/* Warbarons Game UI Styles */
/* Fantasy/Strategy game aesthetic */

:root {
  /* Color palette — old Warbarons parchment theme */
  --bg-dark: #c4a46a;
  --bg-medium: #d4b87a;
  --bg-light: #e0ca96;
  --bg-panel: rgba(0, 0, 0, 0.12);

  --accent-gold: #8a6c2f;
  --accent-gold-light: #a67c1a;
  --accent-blue: #2e5fa1;
  --accent-green: #3a7a2e;
  --accent-red: #9a2a1a;

  --text-primary: #3f320c;
  --text-secondary: #6b5530;
  --text-muted: #746444;

  --border-color: #b39e71;
  --border-gold: #8a7649;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
}

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

/* Prevent accidental text selection only inside the in-game scene.
   Chat and Warpedia popups mount on document.body (outside this container)
   so they remain selectable, as do all community scenes. */
#game-ui-container, .game-ui-container {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Re-enable selection inside the game for chat messages and inputs */
.game-chat-messages, .game-chat-input,
.chatwin_chat, #chatx,
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

html, body {
  height: 100%;
  font-family: Arial, Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13px;
  background-color: #2a1a08;
  color: #3f320c;
  text-shadow: 1px 1px 1px #f1e4c8;
  overflow: hidden;
  font-weight: 600;
}

a {
  color: var(--accent-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Loading screen */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2a1a08;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.5s ease;
}

#loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

#loading-screen.hidden {
  display: none;
}

.loading-content {
  text-align: center;
  width: 474px;
}

/* Same sprite as the top-bar logo, rendered at native size (474x69) */
.loading-logo.logo-img {
  width: 474px;
  height: 69px;
  background: url('/css/interface/transparent.png') no-repeat 0 -469px;
  background-size: 1000px 800px;
  margin: 0 auto var(--spacing-xl);
}

.loading-bar-container {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #5a4a2a;
  margin-bottom: var(--spacing-md);
}

.loading-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #a67c1a 0%, #d4a030 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.loading-status {
  color: #f5d27a;
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85);
  letter-spacing: 1px;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #2a1a08;
  background-image: url('/interface4/main_back.png');
}

/* Top bar */
#top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-lg);
  background-image: url('/interface4/main_background.png');
  background-color: #c4a46a;
  border-bottom: 2px solid #8a7649;
  border-top: 1px solid #f5e2b8;
  height: 48px;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#top-bar.hidden {
  display: none;
}

/* Site footer — appended inside scene scroll area */
.site-footer {
  text-align: center;
  padding: 10px;
  /* Push to bottom of the scene's flex column so short pages (a new
     account with no games / wall activity) don't leave the footer
     floating mid-screen. `auto` margin works because each `.scene` is a
     `flex-direction: column` container. */
  margin-top: auto;
  font-size: 11px;
  color: #8a7649;
  border-top: 1px solid #c4a46a;
  background-image: url('/interface4/main_background.png');
  background-color: #d4b87a;
  flex-shrink: 0;
}

.site-footer a {
  color: #6b4c20;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer .footer-sep {
  margin: 0 8px;
  opacity: 0.5;
}

.top-bar-left .logo {
  font-size: 1.3rem;
  font-weight: bold;
  color: #5a3a0a;
  text-shadow: 1px 1px 0px #f5e2b8;
  letter-spacing: 2px;
}

/* Scaled-down logo_big sprite for the top bar. Original is 474x69 at offset
   0,-469 inside transparent.png (1000x800); scaling by ~0.52 gives 247x36. */
.top-bar-left .logo.logo-img {
  width: 247px;
  height: 36px;
  background: url('/css/interface/transparent.png') no-repeat 0 -245px;
  background-size: 522px 418px;
  text-shadow: none;
  letter-spacing: 0;
  margin-right: 10px;
}

.top-bar-center {
  display: flex;
  gap: var(--spacing-sm);
}

#main-nav {
  display: flex;
  gap: var(--spacing-xs);
}

.nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #6b5530;
  padding: var(--spacing-xs) var(--spacing-md);
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  transition: var(--transition-fast);
  border-radius: 3px;
}

.nav-btn:hover {
  color: #3f320c;
  background: rgba(255, 255, 255, 0.25);
  border-color: #b39e71;
}

.nav-btn.active {
  color: #3a1e00;
  border-color: #8a7649;
  background: rgba(255, 255, 255, 0.3);
  border-bottom: 2px solid #6b4510;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

#user-info {
  color: #5a3a0a;
  font-weight: bold;
}

/* Avatar dropdown — top-right of the top bar. */
.user-menu {
  position: relative;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8a6322, #5a3a0a);
  color: #f5e2b8;
  border: 1px solid #3a2300;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: inherit;
}

.user-avatar:hover {
  background: linear-gradient(135deg, #a07a30, #6e4912);
}

.user-avatar-letters {
  line-height: 1;
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  right: 8px;
  min-width: 140px;
  z-index: 1000;
}

/* When the dropdown carries the .panel class, override .panel's heavy
   defaults (large padding, oversized border-image frame) so the menu
   stays compact while still using the parchment background. */
.user-menu-dropdown.panel {
  padding: 6px 0;
  border-image-width: 30px;
  border-image-outset: 4px;
}

.user-menu-dropdown.hidden {
  display: none;
}

.user-menu-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  text-align: left;
  color: #3a2300;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.user-menu-item:hover {
  background: rgba(58, 35, 0, 0.12);
}

.user-menu-item.hidden {
  display: none;
}

/* Scene container */
#scene-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* Scene transitions */
.scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.scene.active {
  opacity: 1;
  transform: scale(1);
}

.scene.exiting {
  opacity: 0;
  transform: scale(1.02);
}

/* Map Editor Scene - override flex layout like game view */
#scene-map-editor {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid #8a7649;
  background: linear-gradient(180deg, #f5e2b8 0%, #d9c48e 100%);
  color: #3f320c;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: var(--transition-fast);
  border-radius: 3px;
  min-width: 80px;
  text-shadow: 0px 1px 0px #f5e2b8;
}

.btn:hover {
  background: linear-gradient(180deg, #fffce7 0%, #e8d5a8 100%);
  border-color: #6b4510;
  color: #3a1e00;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(180deg, #d4a030 0%, #a67c1a 100%);
  color: #fff;
  border-color: #8a6c2f;
  text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}

.btn-primary:hover {
  background: linear-gradient(180deg, #e0b040 0%, #c09030 100%);
  color: #fff;
}

.btn-success {
  background: linear-gradient(180deg, #5a9a3a 0%, #3a7a2e 100%);
  color: white;
  border-color: #4a8a34;
  text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}

.btn-success:hover {
  background: linear-gradient(180deg, #6aaa4a 0%, #5a9a3a 100%);
  color: white;
}

.btn-small {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.85rem;
  min-width: auto;
  border-width: 1px;
}

.btn-xs {
  padding: 1px 6px;
  font-size: 0.7rem;
  min-width: auto;
  border-width: 1px;
}

.btn-danger {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

.btn-danger:hover {
  background: var(--accent-red);
  color: white;
}

/* Form elements */
.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.form-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: #fffce7;
  border: 1px solid #b39e71;
  border-top-color: #8a7649;
  border-left-color: #8a7649;
  border-radius: 3px;
  color: #3f320c;
  font-size: 13px;
  transition: var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: #6b4510;
  box-shadow: 0 0 0 2px rgba(138, 118, 73, 0.3);
}

.form-input::placeholder {
  color: #a09070;
}

/* Chip-style multi-recipient input. The original .form-input is upgraded in
   Messages.setupAutocompleteStatic — it stays as a hidden value-holder while
   this container renders the badges and the typing field. */
.badge-input-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  cursor: text;
  padding: 4px 6px;
}
.badge-input-container:focus-within {
  border-color: #6b4510;
  box-shadow: 0 0 0 2px rgba(138, 118, 73, 0.3);
}
.badge-input-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e5c374;
  color: #3f320c;
  padding: 2px 4px 2px 8px;
  border: 1px solid #b39e71;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.4;
  user-select: none;
}
.badge-input-chip-remove {
  cursor: pointer;
  width: 16px;
  height: 16px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(63, 50, 12, 0.15);
  color: #3f320c;
  font-size: 14px;
  line-height: 1;
}
.badge-input-chip-remove:hover {
  background: #b03030;
  color: #fff;
}
.badge-input-field {
  flex: 1 1 80px;
  min-width: 80px;
  border: none;
  outline: none;
  padding: 2px;
  background: transparent;
  color: #3f320c;
  font-size: 13px;
}
.badge-input-field::placeholder {
  color: #a09070;
}

/* Panels and cards */
.panel {
  
  background: radial-gradient(ellipse at center, rgba(250, 237, 186, 0.7) 50%, rgba(181, 145, 0, 0.175) 100%), 
  url(/interface4/main_background.png);
  background-color: #c4a46a;
  border: 0px solid transparent;
  border-image-source: url(/interface4/frame_new.png);
  border-image-slice: 120;          /* px into the source image for corners/edges */
  border-image-width: 60px;         /* rendered border width on screen */
  border-image-outset: 10px;        /* push frame outward past the div edge */
  border-image-repeat: round;     /* stretch edges to fill, no tiling */
  image-rendering: auto;     /* disable smoothing/interpolation */
  box-shadow: none;
  padding: var(--spacing-lg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}


.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid #b39e71;
  margin-bottom: var(--spacing-md);
}

.panel-title {
  font-size: 14px;
  color: #3a1e00;
  font-weight: bold;
}

.card {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #b39e71;
  border-radius: 4px;
  padding: var(--spacing-md);
  transition: var(--transition-fast);
}

.card:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: #8a7649;
}

.card-clickable {
  cursor: pointer;
}

/* Main Menu Scene */
.main-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--spacing-xl);
  background-image: url('/css/interface/front20.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-menu-container {
  text-align: center;
  max-width: 540px;
  width: 100%;
}

.main-menu-title {
  font-size: 2.5rem;
  color: #d4a030;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  margin-bottom: var(--spacing-xl);
  letter-spacing: 4px;
}

.main-menu-logo {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto var(--spacing-sm);
}

.logo_big {
  width: 474px;
  height: 69px;
  background: url('/css/interface/transparent.png') no-repeat -0px -469px;
  margin: 0 auto var(--spacing-lg);
}

.main-menu-subtitle {
  color: #5a3d00;
  margin-bottom: var(--spacing-lg);
  font-style: italic;
  text-align: center;
}

.auth-forms {
  background-image: url('/interface4/main_background.png');
  background-color: #c4a46a;
  border: 2px solid #8a7649;
  border-radius: 5px;
  padding: var(--spacing-xl);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.auth-tabs {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
}

.auth-tab {
  flex: 1;
  padding: var(--spacing-sm);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #8a7a5a;
  cursor: pointer;
  font-weight: bold;
  transition: var(--transition-fast);
}

.auth-tab:hover {
  color: #3f320c;
}

.auth-tab.active {
  color: #3a1e00;
  border-bottom-color: #6b4510;
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
}

.auth-form .btn {
  width: 100%;
  margin-top: var(--spacing-md);
}

.auth-error {
  color: var(--accent-red);
  font-size: 0.9rem;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: rgba(231, 76, 60, 0.1);
  border-radius: 4px;
  display: none;
}

.auth-error.visible {
  display: block;
}

/* Lobby Hub Scene */
.lobby-hub {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  max-width: 1160px;
  margin: 0 auto;
}

.lobby-main {
  width: 850px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.lobby-sidebar {
  width: 270px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.lobby-list {
  flex: 1;
  overflow-y: auto;
}

/* Lobby list row layout */
.lobby-item-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 50px 70px 90px 50px 70px;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-bottom: var(--spacing-xs);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.lobby-item-row:hover {
  background: var(--bg-light);
}

.lobby-item-row.lobby-locked {
  border-left: 3px solid var(--accent-gold);
}

.lobby-col-names {
  overflow: hidden;
}

.lobby-gamename {
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lobby-mapname {
  font-size: 13px;
  font-weight: bold;
  color: var(--accent-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lobby-col-map {
  display: flex;
  justify-content: center;
}

.lobby-map-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--bg-dark);
}

.lobby-col-players {
  text-align: center;
}

.lobby-player-count {
  font-size: 15px;
  font-weight: bold;
  color: var(--text-primary);
}

.lobby-gamemode {
  margin-top: 2px;
}

.gamemode-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: bold;
  border-radius: 3px;
  text-transform: uppercase;
  text-shadow: none;
}

.gamemode-badge.ffa {
  background: #2d5a27;
  color: #8fbc8f;
}

.gamemode-badge.one-v-one {
  background: #5a3d27;
  color: #deb887;
}

.gamemode-badge.team {
  background: #27415a;
  color: #87ceeb;
}

.lobby-col-features {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
}

.lobby-icon {
  font-size: 14px;
  cursor: help;
}

.lobby-col-days {
  text-align: center;
}

.lobby-days-value {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
}

.lobby-days-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.lobby-col-join {
  display: flex;
  justify-content: center;
}

.lobby-actions {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-panel);
  border-radius: 8px;
}

/* Game list */
.game-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.game-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-item-name {
  font-weight: 500;
}

.game-item-status {
  font-size: 0.85rem;
  padding: 2px 8px;
  border-radius: 4px;
}

.game-item-status.your-turn {
  background: var(--accent-green);
  color: white;
  text-shadow: 0 0 0 black;
}

.game-item-status.waiting {
  background: var(--text-muted);
  color: var(--text-primary);
}

/* Notifications */
#notifications {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  z-index: 1000;
}

.notification {
  padding: var(--spacing-md) var(--spacing-lg);
  background-image: url('/interface4/main_background.png');
  background-color: #c4a46a;
  border: 1px solid #8a7649;
  border-radius: 4px;
  animation: slideIn var(--transition-normal);
  max-width: 300px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.notification.success {
  border-color: var(--accent-green);
}

.notification.error {
  border-color: var(--accent-red);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* XP toast - brief floating notification after battle */
.xp-toast {
  position: fixed;
  top: calc(50% + 150px);
  left: 50%;
  transform: translate(-50%, -50%);
  color: #3a1e00;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 24px;
  z-index: 10000;
  text-align: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

.xp-toast-fade {
  opacity: 0;
}

/* ========================
   Warpedia (Wiki) Layout
   ======================== */
.wiki-layout {
  display: flex;
  height: 460px;
  max-height: 460px;
}

.wiki-sidebar {
  width: 180px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid #8a7649;
  padding: 4px 0;
}

.wiki-index-item {
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  color: #5a3a0a;
}

.wiki-index-item:hover {
  background: rgba(138, 118, 73, 0.2);
}

.wiki-index-item.wiki-index-active {
  background: rgba(138, 118, 73, 0.35);
  font-weight: bold;
}

.wiki-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #3a2a10;
}

.wiki-content h2, .wiki-content h3 {
  color: #5a3a0a;
  margin: 12px 0 6px 0;
}

.wiki-content img {
  max-width: 100%;
}

.wiki-unit-card {
  border: 1px solid #c4a46a;
  padding: 10px;
  margin: 8px 0;
  background: rgba(255,255,255,0.15);
}

.wiki-unit-card h3 {
  margin: 0 0 6px 0;
  font-size: 15px;
}

.wiki-unit-stats {
  border-collapse: collapse;
}

.wiki-unit-stats td {
  padding: 1px 2px;
}

.wiki-item-card {
  border: 1px solid #c4a46a;
  padding: 10px;
  margin: 8px 0;
  background: rgba(255,255,255,0.15);
}

/* Warpedia standalone page (community section) */
.warpedia-page {
  display: flex;
  height: 100%;
}

.warpedia-sidebar {
  width: 260px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid #8a7649;
  background-image: url('/interface4/main_background.png');
  background-color: #d4b87a;
  padding: 8px 0;
}

.warpedia-nav-item {
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  color: #5a3a0a;
  white-space: nowrap;
}

.warpedia-nav-item:hover {
  background: rgba(138, 118, 73, 0.25);
}

.warpedia-nav-item.warpedia-nav-active {
  background: rgba(138, 118, 73, 0.4);
  font-weight: bold;
}

.warpedia-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  font-size: 14px;
  line-height: 1.7;
  color: #3a2a10;
  background: radial-gradient(ellipse at center, rgba(250, 237, 186, 0.7) 50%, rgba(181, 145, 0, 0.175) 100%),
    url(/interface4/main_background.png);
  background-color: #c4a46a;
}

.warpedia-content-inner {
  max-width: 800px;
}

.warpedia-content table {
  border-collapse: collapse;
  margin: 12px 0;
}

.warpedia-content table th,
.warpedia-content table td {
  border: 1px solid rgba(90, 58, 10, 0.25);
  padding: 6px 12px;
  text-align: left;
}

.warpedia-content table th {
  background: rgba(138, 118, 73, 0.18);
  font-weight: bold;
}

.warpedia-content .bigitem {
  border: none;
}

.warpedia-content h2, .warpedia-content h3 {
  color: #5a3a0a;
  margin: 14px 0 8px 0;
}

.warpedia-content img {
  max-width: 100%;
}

/* ========================
   City Overview Popup
   ======================== */
.city-overview-layout {
  display: flex;
  height: 460px;
}

.city-overview-minimap {
  width: 310px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  overflow: hidden;
}

.city-overview-minimap canvas {
  border: 1px solid #8a7649;
  max-width: 300px;
  max-height: 400px;
  object-fit: contain;
  position: relative;
  z-index: 10;
  cursor: pointer;
}

.city-overview-bank {
  margin-top: 8px;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.city-overview-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}

.city-overview-row {
  border: 1px solid #c4a46a;
  background: rgba(255,255,255,0.1);
  margin: 0 0 4px 0;
  padding: 4px 6px;
  font-size: 11px;
  cursor: pointer;
}

.city-overview-row:hover {
  background: rgba(138, 118, 73, 0.2);
}

.city-overview-row table {
  width: 100%;
  border-collapse: collapse;
}

.city-overview-row td {
  padding: 1px 3px;
  vertical-align: top;
}

.city-overview-prod-selected {
  outline: 2px solid #5a3a0a;
}

/* City overview sprite buttons from miscpanels.png */
div.cancelvector_small        { width:13px; height:12px; background: url('/interface4/miscpanels.png') -613px -129px; float:left; cursor:pointer; margin-right:5px; }
div.cancelvector_small:hover  { width:13px; height:12px; background: url('/interface4/miscpanels.png') -628px -129px; float:left; cursor:pointer; margin-right:5px; }
div.setvector_small1          { width:33px; height:12px; background: url('/interface4/miscpanels.png') -577px -144px; float:left; cursor:pointer; }
div.setvector_small2          { width:33px; height:12px; background: url('/interface4/miscpanels.png') -577px -129px; float:left; cursor:pointer; }
div.movevector_small1         { width:33px; height:12px; background: url('/interface4/miscpanels.png') -614px -144px; float:left; cursor:pointer; }
div.movevector_small2         { width:33px; height:12px; background: url('/interface4/miscpanels.png') -614px -158px; float:left; cursor:pointer; }
div.buywall_small             { width:11px; height:12px; background: url('/interface4/miscpanels.png') -578px -159px; float:left; margin-right:4px; cursor:pointer; }
div.buywall_small:hover       { width:11px; height:12px; background: url('/interface4/miscpanels.png') -592px -159px; float:left; margin-right:4px; cursor:pointer; }
div.sellwall_small            { width:11px; height:12px; background: url('/interface4/miscpanels.png') -578px -174px; float:left; margin-right:4px; cursor:pointer; }
div.sellwall_small:hover      { width:11px; height:12px; background: url('/interface4/miscpanels.png') -592px -174px; float:left; margin-right:4px; cursor:pointer; }
div.gotocity_small            { width:12px; height:18px; background: url('/interface4/miscpanels.png') -313px -5px; float:left; margin-left:4px; cursor:pointer; }
div.gotocity_small:hover      { width:12px; height:18px; background: url('/interface4/miscpanels.png') -296px -5px; float:left; margin-left:4px; cursor:pointer; }

/* ========================
   Diplomacy Popup
   ======================== */
.diplomacy-layout {
  display: flex;
  height: 460px;
}

.diplomacy-minimap {
  width: 310px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
}

.diplomacy-minimap canvas {
  border: 1px solid #8a7649;
  max-width: 300px;
  max-height: 400px;
}

.diplomacy-content {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}

.diplomacy-section {
  border: solid 1px #8a7649;
  margin-bottom: 8px;
}

.diplomacy-section-header {
  font-weight: bold;
  font-size: 12px;
  padding: 5px 8px;
  background-color: #d6b25f;
  display: flex;
  align-items: center;
  gap: 6px;
}

.diplomacy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  background-color: #d6b25f;
  border-spacing: 1px;
}

.diplomacy-table td {
  padding: 3px 6px;
  vertical-align: middle;
  background-color: #f2d593;
  border: 1px solid #d6b25f;
}

.diplomacy-header-row td {
  background-color: #e5c374;
  padding: 3px 6px;
  font-size: 11px;
  text-align: center;
}

.diplomacy-table select {
  font-size: 11px;
  padding: 2px;
  background: #f6dca4;
  border: 1px solid #8a7649;
  color: #3a1e00;
}

/* Diplomacy icons */
.diplomacy-icon { background: url('/interface4/miscpanels.png') -253px -1px; width: 25px; height: 25px; flex-shrink: 0; }
.accept { background: url('/interface4/miscpanels.png') -204px -1px; width: 25px; height: 25px; float: left; cursor: pointer; }
.deny { background: url('/interface4/miscpanels.png') -146px -1px; width: 25px; height: 25px; float: left; cursor: pointer; }

/* Replay minimap */
.replay-minimap {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  border-left: 2px solid #8a7649;
  border-bottom: 2px solid #8a7649;
  cursor: pointer;
  image-rendering: pixelated;
  background: #1a3070;
}

/* Lobby badges — matching game-lobby-type style */
.lobby-badge {
  display: inline-block;
  background: var(--bg-light);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 10px;
}

@keyframes turnToastSlideIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

.turn-toast:hover {
  background: linear-gradient(135deg, #4a3a20, #6a4d2a) !important;
  border-color: #a8820f !important;
}

.turn-toast-icon {
  margin-right: 6px;
}

/* Modal */
#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#modal-overlay.hidden {
  display: none;
}

#modal-content {
  background-image: url('/interface4/main_background.png');
  background-color: #c4a46a;
  border: 2px solid #8a7649;
  border-radius: 5px;
  padding: var(--spacing-xl);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay .modal-content {
  background-image: url('/interface4/main_background.png');
  background-color: #c4a46a;
  border: 2px solid #8a7649;
  border-radius: 5px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Utility classes */
.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

.text-gold {
  color: var(--accent-gold);
}

.text-muted {
  color: var(--text-muted);
}

.text-success {
  color: var(--accent-green);
}

.text-danger {
  color: var(--accent-red);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Loading spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

/* ============================================
   COMMUNITY FEATURES STYLES
   ============================================ */

/* User nav icons */
#user-nav {
  display: flex;
  gap: var(--spacing-xs);
  margin-right: var(--spacing-md);
}

.nav-btn-icon {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  position: relative;
  transition: var(--transition-fast);
}

.nav-btn-icon:hover {
  color: var(--accent-gold);
}

.nav-btn-icon .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--accent-red);
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* Top-bar profile uses the gear sprite to match the rest of the UI.
   Rendered via ::before so the sprite is flex-centered inside the
   padded button, keeping it vertically aligned with the chat emoji. */
.nav-btn-icon.topnav-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.nav-btn-icon.topnav-profile::before {
  content: '';
  display: inline-block;
  width: 25px;
  height: 20px;
  background: url('/css/interface/transparent.png') no-repeat -171px -16px;
}

/* Messages Scene */
.messages-container {
  display: grid;
  grid-template-columns: 300px 850px;
  gap: var(--spacing-md);
  height: 100%;
  padding: var(--spacing-md);
  max-width: 1200px;
  margin: 0 auto;
}

.messages-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.messages-tabs {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.tab-btn {
  flex: 1;
  padding: var(--spacing-sm);
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.tab-btn.active {
  background: var(--accent-gold);
  color: var(--bg-dark);
  border-color: var(--accent-gold);
}

.messages-list {
  flex: 1;
  overflow-y: auto;
}

.message-item {
  padding: 16px;
  border-bottom: 1px solid #d4bc88;
  border-top: 1px solid #f5f0da;
  background: rgba(255, 255, 255, 0.20);
  border-radius: 5px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.message-item:hover {
  background: var(--bg-light);
}

.message-item.unread {
  background: rgba(74, 144, 217, 0.1);
  border-left: 3px solid var(--accent-blue);
  animation: messageUnreadBlink 0.9s ease-in-out infinite;
}

@keyframes messageUnreadBlink {
  0%, 100% {
    opacity: 1;
    background: rgba(74, 144, 217, 0.16);
  }
  50% {
    opacity: 0.4;
    background: rgba(74, 144, 217, 0.06);
  }
}

.message-item.selected {
  background: var(--bg-light);
  border-left: 3px solid var(--accent-gold);
}

.message-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
}

.message-from {
  font-weight: bold;
  color: var(--text-primary);
}

.message-time {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.message-subject {
  color: var(--text-secondary);
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-content {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
}

.message-view {
  padding: var(--spacing-md);
  height: 100%;
  overflow-y: auto;
}

.message-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.message-title {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-sm);
}

.message-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.message-body {
  line-height: 1.6;
  font-weight: 400;
  font-size: 13px;
  padding: 16px;
  border-bottom: 1px solid #d4bc88;
  border-top: 1px solid #f5f0da;
  background: rgba(255, 255, 255, 0.20);
  border-radius: 5px;
  margin-bottom: 5px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.message-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.autocomplete-suggestions {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 100;
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 200px;
  overflow-y: auto;
}

.autocomplete-item {
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.autocomplete-item:hover,
.autocomplete-item.active {
  background: var(--bg-light);
}

.message-replies {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.reply-item {
  padding: 16px;
  border-bottom: 1px solid #d4bc88;
  border-top: 1px solid #f5f0da;
  background: rgba(255, 255, 255, 0.20);
  border-radius: 5px;
  margin-bottom: 5px;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
}

.reply-body {
  line-height: 1.6;
  font-weight: 400;
  font-size: 13px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Friends Scene */
.friends-container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--spacing-md);
  height: 100%;
  padding: var(--spacing-md);
  min-width: 1024px;
  max-width: 1200px;
  margin: 0 auto;
}

.friends-list {
  overflow-y: auto;
}

.friend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.friend-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.status-dot.online {
  background: var(--accent-green);
}

.status-dot.offline {
  background: var(--text-muted);
}

.friend-name {
  font-weight: bold;
}

.friend-country {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.friend-actions {
  display: flex;
  gap: var(--spacing-xs);
}

.request-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.search-results {
  margin-top: var(--spacing-sm);
}

.search-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

/* Chat Scene */
.chat-container {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: var(--spacing-md);
  height: 100%;
  padding: var(--spacing-md);
  min-width: 1024px;
  max-width: 1200px;
  margin: 0 auto;
}

.chat-main .panel {
  height: 100%;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-sm);
}

.chat-message {
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.chat-message.own {
  background: rgba(74, 144, 217, 0.1);
  border-radius: 4px;
}

.chat-username {
  color: var(--accent-gold);
  font-weight: bold;
  margin-right: var(--spacing-sm);
}

.chat-text {
  color: var(--text-primary);
}

.chat-time {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-left: var(--spacing-sm);
}

.chat-input-area {
  display: flex;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
}

.chat-input-area input {
  flex: 1;
}

/* Teams Scene */
.teams-container {
  height: 100%;
  padding: var(--spacing-md);
  max-width: 1200px;
  margin: 0 auto;
}

#teams-list-view,
#teams-detail-view {
  min-width: 1024px;
}

.teams-list {
  overflow-y: auto;
}

.team-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
}

.team-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.team-tag {
  font-weight: bold;
  font-size: 0.85rem;
}

.team-name {
  font-weight: bold;
}

.team-members-count {
  color: var(--text-muted);
}

/* Team detail layout — members left, info+wall right */
.team-detail-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--spacing-md);
}

.team-detail-left {
  min-width: 0;
}

.team-detail-right {
  min-width: 0;
}

/* Team info panel */
.team-message {
  font-style: italic;
  padding: var(--spacing-sm) var(--spacing-md);
}

.team-info-stats {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 12px;
  color: var(--text-muted);
}

.team-actions {
  display: flex;
  gap: 8px;
  padding: var(--spacing-sm) var(--spacing-md);
}

/* Members table */
.team-members-table {
  width: 100%;
}

.team-member-row {
  padding: 6px var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.team-member-line1 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.team-member-line2 {
  font-size: 11px;
  color: var(--text-muted);
  padding-left: 26px;
  padding-top: 2px;
}

.team-member-line3 {
  display: flex;
  gap: 4px;
  padding-left: 26px;
  padding-top: 3px;
}

.team-member-leader-icon {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.team-member-name {
  flex: 1;
  font-weight: bold;
  min-width: 0;
}

.team-member-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Join requests */
.team-requests-section {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-color);
}

.team-requests-section h3 {
  padding: 0 var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.team-request-row {
  display: flex;
  align-items: center;
  padding: 6px var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
  gap: 8px;
}

.team-request-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

/* Back button */
.team-back-btn {
  cursor: pointer;
  margin-bottom: var(--spacing-sm);
  color: var(--accent-blue);
  font-weight: bold;
}

.team-back-btn:hover {
  text-decoration: underline;
}

/* Settings form (leader panel below members) */
.team-settings-form {
  padding: var(--spacing-sm) 0;
}

.team-settings-form .form-group {
  margin-bottom: 8px;
}

/* Tournaments Scene */
.tournaments-container {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--spacing-md);
  height: 100%;
  padding: var(--spacing-md);
}

.tournament-filters {
  display: flex;
  gap: var(--spacing-xs);
}

.filter-btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.85rem;
  transition: var(--transition-fast);
}

.filter-btn.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: white;
}

.tournaments-list {
  overflow-y: auto;
}

.tournament-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
}

.tournament-name {
  font-weight: bold;
  margin-bottom: var(--spacing-xs);
}

.tournament-meta {
  display: flex;
  gap: var(--spacing-sm);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.tournament-type {
  background: var(--bg-light);
  padding: 2px 6px;
  border-radius: 4px;
}

.tournament-status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.status-open { background: var(--accent-green); color: white; }
.status-active { background: var(--accent-blue); color: white; }
.status-complete { background: var(--text-muted); color: white; }

.tournament-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-label {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.info-value {
  font-weight: bold;
}

.tournament-players-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}

.player-tag {
  background: var(--bg-light);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
}

.tournament-activity {
  margin-top: var(--spacing-md);
}

.activity-item {
  padding: var(--spacing-xs);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
}

.activity-type {
  background: var(--bg-light);
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: var(--spacing-sm);
  font-size: 0.8rem;
}

/* Tournament Detail / Bracket View */
.tournament-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--spacing-md);
  grid-column: 1 / -1; /* span full width when inside tournament grid */
}

.tournament-detail-header {
  flex-shrink: 0;
  margin-bottom: var(--spacing-sm);
}

.tournament-back-link {
  display: inline-block;
  color: var(--accent-blue);
  cursor: pointer;
  margin-bottom: var(--spacing-sm);
  font-size: 0.9rem;
}

.tournament-back-link:hover {
  text-decoration: underline;
}

.tournament-detail-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.tournament-detail-title h2 {
  margin: 0;
  font-size: 1.3rem;
}

.tournament-info-bar {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.tournament-info-bar span {
  white-space: nowrap;
}

/* Panel wrapper for bracket area */
.bracket-panel {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Bracket viewport — drag-pannable area */
.bracket-viewport {
  flex: 1 1 0;
  overflow: hidden;
  cursor: grab;
  position: relative;
  min-height: 0;
  user-select: none;
}

.bracket-viewport.dragging {
  cursor: grabbing;
}

/* Prevent native image drag inside brackets */
.bracket-viewport img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.bracket-content {
  display: flex;
  gap: 40px;
  position: relative;
  min-width: fit-content;
  padding: var(--spacing-lg);
}

.bracket-section-label {
  font-size: 1rem;
  font-weight: bold;
  padding: var(--spacing-sm) var(--spacing-lg);
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-gold);
  margin-bottom: var(--spacing-sm);
  background: var(--bg-medium);
}

.bracket-round {
  display: flex;
  flex-direction: column;
  min-width: 190px;
  flex-shrink: 0;
}

.bracket-round-header {
  text-align: center;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  white-space: nowrap;
}

.bracket-round-map {
  text-align: center;
  margin-bottom: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.bracket-round-minimap {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  image-rendering: pixelated;
}

.bracket-round-map-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.bracket-round-map-name {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
}

.bracket-match {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
}

.bracket-entry {
  padding: 4px 8px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  min-height: 24px;
}

.bracket-entry:first-child {
  border-bottom: 1px solid var(--border-color);
}

.bracket-entry.winner {
  color: var(--accent-gold);
  font-weight: bold;
}

.bracket-entry.loser {
  opacity: 0.5;
}

.bracket-entry.playing {
  background: rgba(46, 95, 161, 0.1);
}

.bracket-entry.placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.bracket-entry-name {
  display: flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bracket-entry-name .flag {
  flex-shrink: 0;
}

/* Vertical player list for team games */
.bracket-entry-players {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bracket-player-line {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  font-size: 0.8rem;
  line-height: 1.3;
}

.bracket-player-line .flag {
  flex-shrink: 0;
}

/* Team abbreviation badge */
.bracket-team-abbr {
  font-size: 0.7rem;
  font-weight: bold;
  flex-shrink: 0;
  margin-right: 1px;
}


.bracket-connector-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Double elimination separator */
.bracket-separator {
  width: 100%;
  border-top: 2px solid var(--border-gold);
  margin: var(--spacing-md) 0;
}

/* Single entry in final (bye / champion) */
.bracket-champion {
  background: var(--bg-light);
  border: 2px solid var(--accent-gold);
  border-radius: 4px;
  padding: 6px 10px;
  font-weight: bold;
  color: var(--accent-gold);
  text-align: center;
}

/* Leaderboard Scene */
.leaderboard-container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--spacing-md);
  height: 100%;
  padding: var(--spacing-md);
  max-width: 1200px;
  margin: 0 auto;
}

.leaderboard-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.leaderboard-filters .filter-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: var(--spacing-xs) var(--spacing-sm);
}

.leaderboard-filters .radio-label {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.leaderboard-filters .radio-label input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

.leaderboard-table {
  overflow-y: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table th,
.data-table td {
  padding: var(--spacing-sm);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.data-table th {
  background: var(--bg-medium);
  color: var(--text-muted);
  font-weight: normal;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.data-table tr:hover {
  background: var(--bg-light);
}

.data-table tr.highlight {
  background: rgba(201, 162, 39, 0.1);
}

.rank-cell {
  font-weight: bold;
  color: var(--accent-gold);
}

.data-table .col-rank { width: 55px; }
.data-table .col-narrow { width: 55px; }
.data-table .col-rating { width: 70px; }
.data-table .col-alliance { width: 120px; }

.rating-cell {
  font-weight: bold;
}

.wins-cell {
  color: var(--accent-green);
}

.losses-cell {
  color: var(--accent-red);
}

.streak-cell.positive {
  color: var(--accent-green);
}

.streak-cell.negative {
  color: var(--accent-red);
}

.player-link {
  color: var(--accent-blue);
  cursor: pointer;
}

.player-link:hover {
  text-decoration: underline;
}

.country-flag {
  margin-left: var(--spacing-xs);
  font-size: 0.9rem;
}

.top-section {
  margin-bottom: var(--spacing-md);
}

.top-section h4 {
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.top-player-item {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--border-color);
}

.top-rank {
  color: var(--accent-gold);
  font-weight: bold;
  width: 30px;
}

.my-ranking-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.ranking-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--bg-medium);
  border-radius: 4px;
}

.ranking-type {
  font-weight: bold;
}

.ranking-position {
  color: var(--accent-gold);
  font-size: 1.2rem;
}

.ranking-rating {
  color: var(--text-muted);
}

/* Previous Seasons */
.season-list {
  max-height: 300px;
  overflow-y: auto;
}

.season-item {
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
  color: var(--accent-blue);
}

.season-item:hover {
  background: var(--bg-light);
  text-decoration: underline;
}

.season-type-filters {
  display: flex;
  gap: var(--spacing-xs);
  border-bottom: 1px solid var(--border-color);
}

.season-type-filters .radio-label {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.season-type-filters .radio-label input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

.stats-table {
  width: 100%;
  margin-top: var(--spacing-sm);
  border-collapse: collapse;
}

.stats-table th,
.stats-table td {
  padding: var(--spacing-xs) var(--spacing-sm);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.stats-table th {
  color: var(--text-muted);
  font-weight: normal;
}

/* Game Card Styles */
.game-card {
  padding: var(--spacing-md);
}

.game-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
}

.game-info .game-name {
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.game-info .game-meta {
  font-size: 0.85rem;
}

.game-item-status {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
}

.game-item-status.your-turn {
  background: var(--accent-green);
  color: white;
  animation: pulse 2s infinite;
}

/* Under 6h left on an async turn — badge flips red so the crunch is
   visible at a glance from My Games. */
.game-item-status.your-turn.urgent {
  background: var(--accent-red, #c0392b);
}

.game-item-status.waiting {
  background: var(--bg-light);
  color: var(--text-muted);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.game-card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

/* Player Shields */
.player-shields {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.player-shield {
  width: 28px;
  height: 32px;
  background: var(--player-color, #666);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform var(--transition-fast);
}

.player-shield.is-me {
  border: 2px solid var(--accent-gold);
  box-shadow: 0 0 8px var(--accent-gold);
}

.player-shield.has-turn {
  animation: turnPulse 1.5s infinite;
}


@keyframes turnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.player-shield .turn-indicator {
  position: absolute;
  top: -8px;
  font-size: 10px;
  color: var(--accent-gold);
}

.player-shield .me-indicator {
  font-size: 10px;
  color: white;
  text-shadow: 0 0 2px black;
}

.player-shield .skull-indicator {
  font-size: 14px;
}

.player-shield.eliminated {
  opacity: 0.6;
  filter: grayscale(0.8);
}

/* Timer and Missed Turns */
.game-timer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.time-left {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: bold;
}

.time-left.urgent {
  color: var(--accent-red);
}

.time-left.expired {
  color: var(--accent-red);
  font-weight: bold;
}

.missed-turns {
  display: flex;
  gap: 2px;
}

.miss-dot {
  font-size: 12px;
  color: var(--text-muted);
}

.miss-dot.missed {
  color: var(--accent-red);
}

.game-card-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-color);
}

/* Game View Scene - Replicating original layout */
.game-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-dark);
}

.game-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--bg-panel);
  border-bottom: 2px solid var(--border-gold);
  height: 40px;
}

.topbar-left, .topbar-center, .topbar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.btn-game {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 4px 12px;
  cursor: pointer;
  border-radius: 3px;
}

.btn-game:hover {
  background: var(--accent-gold);
  color: var(--bg-dark);
}

.game-title-text {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--accent-gold);
}

#turn-info {
  font-size: 1rem;
  color: var(--text-primary);
}

#gold-display {
  color: var(--accent-gold);
  font-weight: bold;
}

#timer-display {
  color: var(--text-secondary);
}

#timer-display.expired {
  color: var(--accent-red);
}

.game-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Left Panel - Quick Buttons */
.panel-left {
  width: 48px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: var(--spacing-xs);
  gap: var(--spacing-xs);
}

.side-btn {
  width: 40px;
  height: 40px;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
}

.side-btn:hover {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
}

/* Map Viewport */
.map-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: grab;
  background: #1a1a2e;
}

.map-viewport:active {
  cursor: grabbing;
}

.map-content {
  position: absolute;
  top: 0;
  left: 0;
}

.map-bigtile {
  image-rendering: pixelated;
}

/* Right Panel */
.panel-right {
  width: 220px;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: var(--spacing-sm);
  gap: var(--spacing-sm);
}

/* Minimap */
.minimap-panel {
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 4px;
}

.minimap-inner {
  position: relative;
}

.minimap-inner canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* Magnifier defined in game-view section below */

/* Player Shields */
.shields-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--spacing-xs);
  background: var(--bg-dark);
  border-radius: 4px;
}

.shields-panel .player-shield {
  width: 24px;
  height: 28px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

.shields-panel .player-shield.blue { background: #4a90d9; }
.shields-panel .player-shield.red { background: #e74c3c; }
.shields-panel .player-shield.green { background: #2ecc71; }
.shields-panel .player-shield.orange { background: #f39c12; }
.shields-panel .player-shield.purple { background: #9b59b6; }
.shields-panel .player-shield.teal { background: #1abc9c; }
.shields-panel .player-shield.pink { background: #e91e63; }
.shields-panel .player-shield.brown { background: #795548; }
.shields-panel .player-shield.gray { background: #607d8b; }
.shields-panel .player-shield.neutral { background: #888; }

.shields-panel .player-shield.is-me {
  box-shadow: 0 0 6px var(--accent-gold);
}

.shields-panel .player-shield.has-turn {
  animation: shieldPulse 1s infinite;
}

.shields-panel .player-shield.eliminated {
  opacity: 0.5;
  filter: grayscale(1);
}

@keyframes shieldPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Unit Selection Slots */
.unit-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.unit-slot {
  aspect-ratio: 1;
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.unit-slot:hover {
  border-color: var(--accent-gold);
}

.slot-number {
  font-size: 10px;
  color: var(--text-muted);
  position: absolute;
  bottom: 2px;
  right: 4px;
}

/* Group Area */
.group-area {
  min-height: 60px;
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

/* Action Buttons */
.action-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.action-btn {
  padding: 8px 4px;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.action-btn:hover {
  background: var(--accent-gold);
  color: var(--bg-dark);
  border-color: var(--accent-gold);
}

.action-btn.primary {
  background: var(--accent-green);
  color: white;
  grid-column: span 2;
}

.action-btn.primary:hover {
  background: #3da047;
}

.action-btn.active {
  background: var(--accent-gold);
  color: var(--bg-dark);
  border-color: var(--accent-gold-light);
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.5);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Bottom Bar */
.game-bottombar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--bg-panel);
  border-top: 1px solid var(--border-color);
  height: 32px;
}

.tile-info, .unit-info {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Map Objects */
.map-city {
  position: absolute;
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.map-city::before {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 2px solid rgba(0,0,0,0.5);
}

.map-city.player-0::before { background: #888; }
.map-city.player-1::before { background: #4a90d9; }
.map-city.player-2::before { background: #e74c3c; }
.map-city.player-3::before { background: #2ecc71; }
.map-city.player-4::before { background: #f39c12; }
.map-city.player-5::before { background: #9b59b6; }
.map-city.player-6::before { background: #1abc9c; }
.map-city.player-7::before { background: #e91e63; }
.map-city.player-8::before { background: #795548; }

.map-city.capital::before {
  border-color: var(--accent-gold);
  box-shadow: 0 0 8px var(--accent-gold);
}

.city-label {
  position: absolute;
  bottom: -2px;
  font-size: 9px;
  color: white;
  text-shadow: 1px 1px 1px black;
  white-space: nowrap;
}

.city-income {
  position: absolute;
  top: 8px;
  font-size: 11px;
  font-weight: bold;
  color: var(--accent-gold);
  text-shadow: 1px 1px 1px black;
}

/* Map Units */
.map-unit {
  position: absolute;
  width: 64px;
  height: 64px;
  pointer-events: auto;
  cursor: pointer;
  background-repeat: no-repeat;
  z-index: 50;
}

/* Player color indicator ring */
.unit-player-indicator {
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.5);
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

.map-unit.player-0 .unit-player-indicator { background: #888; }
.map-unit.player-1 .unit-player-indicator { background: #4a90d9; }
.map-unit.player-2 .unit-player-indicator { background: #e74c3c; }
.map-unit.player-3 .unit-player-indicator { background: #2ecc71; }
.map-unit.player-4 .unit-player-indicator { background: #f39c12; }
.map-unit.player-5 .unit-player-indicator { background: #9b59b6; }
.map-unit.player-6 .unit-player-indicator { background: #1abc9c; }
.map-unit.player-7 .unit-player-indicator { background: #e91e63; }
.map-unit.player-8 .unit-player-indicator { background: #795548; }

.unit-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,0.8);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
  z-index: 2;
}

/* Fallback unit icon (when sprite not available) */
.unit-type {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  z-index: 1;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* ============================================= */
/* GAME LOADING SCREEN                           */
/* ============================================= */

.game-loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0a0a12;
  background-image: url('/css/interface/front40.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 80px;
  z-index: 2000;
  transition: opacity 0.5s ease;
}

.game-loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.game-loading-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.game-loading-bar-container {
  width: 320px;
  height: 20px;
  background: rgba(0,0,0,0.6);
  border: 1px solid #392f1f;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.game-loading-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, #8b6914, #d4af37, #f4d03f);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(212,175,55,0.4);
}

.game-loading-status {
  color: #1a0f00;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(255, 230, 180, 0.6);
}

.game-ui-container {
  display: contents;
}

/* Loading Overlay */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(26, 26, 46, 0.95);
  color: var(--text-primary);
  gap: var(--spacing-md);
  z-index: 100;
}

.loading-overlay.hidden {
  display: none;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border-color);
  border-top-color: var(--accent-gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========================
   Unit Selection System
   ======================== */

/* Selected unit wrapper */
div.selecteddiv {
  position: relative;
  width: 64px;
  height: 64px;
}

/* Selection indicators (from original interface) */
/* Unscoped rules for PixiJS TextureManager probe */
div.select2 {
  background: url('/interface4/miscpanels.png') -651px -128px;
  width: 64px;
  height: 64px;
}
div.select3 {
  background: url('/interface4/miscpanels.png') -256px -64px;
  width: 64px;
  height: 64px;
}
/* Scoped rules for DOM rendering */
.game-view-scene div.select2 {
  position: absolute;
  float: left;
  z-index: 1700;
  top: 0;
  left: 0;
}

.game-view-scene div.select3 {
  position: absolute;
  float: left;
  z-index: 1700;
  top: 0;
  left: 0;
}

/* Path counter indicators (movement path display) */
div.pathcounter {
  width: 64px;
  height: 64px;
  background: url('/interface4/basepopup.png') -64px -0px;
  font-size: 16px;
  color: #FFFFFF;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-family: arial;
  font-weight: bold;
  cursor: default;
  position: absolute;
  z-index: 999;
  text-align: left;
  padding: 4px 0 0 6px;
  box-sizing: border-box;
  top: 0;
  left: 0;
}

div.pathcounter2 {
  width: 64px;
  height: 64px;
  background: url('/interface4/basepopup.png') -0px -0px;
  font-size: 16px;
  color: #DDDDDD;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-family: arial;
  font-weight: bold;
  cursor: default;
  position: absolute;
  z-index: 999;
  text-align: left;
  padding: 4px 0 0 6px;
  box-sizing: border-box;
  top: 0;
  left: 0;
}

/* Fog of War overlay */
div.fow {
  background-image: url(/interface4/darkbox.png);
  width: 64px;
  height: 64px;
  position: absolute;
  z-index: 300;
  top: 0;
  left: 0;
}

/* Unit slot selection */
.unit-slot.selected {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 0 2px var(--accent-gold), 0 0 10px rgba(201, 162, 39, 0.5);
}

.unit-slot.filled {
  background: rgba(0, 0, 0, 0.3);
}

.unit-slot .slot-unit {
  position: absolute;
  width: 64px;
  height: 64px;
  top: 0;
  left: 0;
}

.unit-slot .slot-hp {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.8);
  color: #4caf50;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 2px;
}

/* ========================
   City Selection Menu
   ======================== */

#cityselectmenu {
  position: absolute;
  background-image: url('/interface4/dropdownbg.png');
  background-color: #f6dca4;
  border-top: solid 1px #f6e1a6;
  border-left: solid 1px #f6e1a6;
  border-right: solid 1px #8a7649;
  border-bottom: solid 1px #8a7649;
  padding: 4px;
  z-index: 1000;
  display: none;
  min-width: 120px;
}

#cityselectmenu .marker {
  padding: 4px 4px;
  cursor: pointer;
  color: var(--text-primary);
  transition: background-color 0.15s;
  float: none;
  display: flex;
  align-items: center;
  clear: both;
  white-space: nowrap;
}
.csm-icon {
  width: 28px;
  height: 24px;
  background: url('/interface4/mainpanels.png') no-repeat;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 6px;
}
.csm-icon-hero      { background-position: 0px -153px; }
.csm-icon-raise     { background-position: 0px -213px; }
.csm-icon-city      { background-position: 0px -183px; }
.csm-icon-construct { background-position: 0px -126px; }
.csm-icon-vision    { background-position: 0px -239px; }

#cityselectmenu .marker:hover {
  background: var(--bg-light);
}

/* ========================
   City/Building Popups
   ======================== */

/* City popup overlay - now handled by Popup component (popup.css) */
/* Legacy ID-based styles removed to avoid conflicts with .wb-popup-overlay */

/* City popup container using CSS grid for ornate borders */
.city-popup-container {
  display: grid;
  grid-template-columns: 26px 1fr 26px;
  grid-template-rows: 26px auto 26px;
  width: 650px;
  min-height: 450px;
}

/* City popup body content */
.city-popup-body {
  padding: 20px 15px 15px 15px;
  max-height: 350px;
  overflow-y: auto;
}

/* City popup tabs */
.city-popup-tabs {
  display: flex;
  border-bottom: 2px solid #5a3d2b;
  margin: 25px 15px 0 15px;
}

.city-popup-tab {
  flex: 1;
  padding: 10px 15px;
  background: transparent;
  border: none;
  color: #5f3b1a;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0px 1px 1px #faf2e1;
}

.city-popup-tab:hover {
  background: rgba(201, 162, 39, 0.2);
}

.city-popup-tab.active {
  background: rgba(201, 162, 39, 0.3);
  border-bottom: 3px solid #c9a227;
  margin-bottom: -2px;
}

/* City popup footer */
.city-popup-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-top: 1px solid #5a3d2b;
  margin-top: 10px;
}

.city-popup-gold {
  font-size: 14px;
  font-weight: bold;
  color: #5f3b1a;
  text-shadow: 0px 1px 1px #faf2e1;
}

.city-popup-gold::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('/interface4/icon_gold.png') center/contain no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}

.city-popup-buttons {
  display: flex;
  gap: 10px;
}

.city-popup-btn {
  padding: 8px 25px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  background: url('/interface4/basepopup.png') -6px -123px;
  color: #5f3b1a;
  text-shadow: 0px 1px 1px #faf2e1;
  min-width: 80px;
  height: 32px;
}

.city-popup-btn:hover {
  filter: brightness(1.1);
}

.city-popup-btn.cancel {
  background-position: -6px -123px;
}

.city-popup-btn.ok {
  background-position: -6px -123px;
}

/* City info styling inside popup */
.city-popup-body .city-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(90, 61, 43, 0.3);
  color: #5f3b1a;
  font-size: 14px;
}

.city-popup-body .city-stat-row label {
  font-weight: bold;
  color: #5f3b1a;
  text-shadow: 0px 1px 1px #faf2e1;
}

.city-popup-body .city-stat-row span {
  color: #3d2817;
}

.city-popup-body input[type="text"] {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #5a3d2b;
  padding: 5px 10px;
  color: #3d2817;
  border-radius: 3px;
  width: 150px;
}

.city-popup-body h4 {
  color: #5f3b1a;
  font-size: 16px;
  margin: 15px 0 10px 0;
  text-shadow: 0px 1px 1px #faf2e1;
  border-bottom: 1px solid #5a3d2b;
  padding-bottom: 5px;
}

.city-popup-body .upgrade-btn {
  padding: 5px 12px;
  background: url('/interface4/basepopup.png') -6px -123px;
  border: none;
  color: #5f3b1a;
  font-weight: bold;
  cursor: pointer;
  font-size: 12px;
}

.city-popup-body .upgrade-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Legacy support - old building-popup class (city-popup now uses Popup component) */
.building-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-panel);
  border: 3px solid var(--border-gold);
  border-radius: 8px;
  min-width: 400px;
  min-height: 300px;
  z-index: 1000;
  display: none;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: linear-gradient(to bottom, rgba(201, 162, 39, 0.3), transparent);
  border-bottom: 1px solid var(--border-gold);
}

.popup-header h3 {
  color: var(--accent-gold);
  margin: 0;
}

.popup-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
}

.popup-close:hover {
  color: var(--accent-red);
}

.popup-content {
  padding: var(--spacing-lg);
}

/* ========================
   Group Handling Area
   ======================== */

.group-area {
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  min-height: 40px;
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-xs);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.group-area .group-unit {
  width: 32px;
  height: 32px;
  background: var(--bg-dark);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.group-area .group-unit:hover {
  outline: 1px solid var(--accent-gold);
}

/* ========================
   Popup Overlay System
   ======================== */

.popup-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: 1000;
}

.popup-overlay.hidden {
  display: none;
}

.popup-container {
  background: linear-gradient(to bottom, #2a2a4e, #1a1a2e);
  border: 3px solid var(--border-gold);
  border-radius: 8px;
  min-width: 350px;
  max-width: 600px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: linear-gradient(to bottom, rgba(201, 162, 39, 0.3), transparent);
  border-bottom: 1px solid var(--border-gold);
  border-radius: 5px 5px 0 0;
}

.popup-header h3 {
  color: var(--accent-gold);
  margin: 0;
  font-size: 1.3rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.popup-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 8px;
}

.popup-close:hover {
  color: var(--accent-red);
}

.popup-body {
  padding: var(--spacing-lg);
}

.popup-footer {
  padding: var(--spacing-md);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  border-top: 1px solid var(--border-color);
}

.btn-popup {
  padding: 10px 24px;
  background: var(--accent-gold);
  color: var(--bg-dark);
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-popup:hover {
  background: var(--accent-gold-light);
}

.btn-popup.secondary {
  background: var(--bg-light);
  color: var(--text-primary);
}

.btn-popup.secondary:hover {
  background: var(--border-color);
}

/* City Popup Specifics */
.city-popup-content {
  min-width: 400px;
}

.city-info-section {
  margin-bottom: var(--spacing-md);
}

.city-stats {
  display: grid;
  gap: var(--spacing-sm);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-label {
  color: var(--text-secondary);
}

.stat-value {
  color: var(--text-primary);
  font-weight: bold;
}

.city-production-section {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.city-production-section h4 {
  color: var(--accent-gold);
  margin: 0 0 var(--spacing-sm) 0;
}

.current-production {
  background: var(--bg-dark);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 4px;
  margin-bottom: var(--spacing-md);
}

.production-queue {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm);
}

.production-option {
  width: 64px;
  height: 64px;
  background: var(--bg-dark);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.production-option:hover {
  border-color: var(--accent-gold);
}

.production-option.selected {
  border-color: var(--accent-gold);
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.5);
}

/* ========================
   Ship Conversion Popup
   ======================== */

.ship-convert-grid {
  font-weight: bold;
  font-size: 14px;
}

.btn-popup.primary {
  background: var(--accent-green);
  color: white;
}

.btn-popup.primary:hover {
  background: #2ecc71;
}

.btn-popup.disabled {
  background: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.5;
}

/* ========================
   Hero Popup System
   ======================== */

/* Hero inspect popup container */
/* hero-inspect-popup uses the standard big popup (990x550) */

/* Minimap column - floated left beside the hero table */
.hero-minimap-col {
  float: left;
  width: 302px;
}

/* Hero table matching old layout */
.hero_table1 { width: 612px; float: left; }
.hero_tdwidth1 { width: 90px; }
.hero_tdwidth2 { width: 150px; }
.hero_tdwidth3 { width: 455px; }
.hero_tdwidth4 { width: 55px; }
.hero_tdwidth5 { width: 65px; }
.hero_tdwidth6 { width: 100px; }
.hero_tdheight1 { height: 16px; }
.hero_tdheight2 { height: 17px; }
.hero_table2 { width: 120px; margin: 45px 0px 0px 20px; }
.hero_table3 { width: 120px; margin: 0px 0px 0px 20px; }
.hero_div1 { margin-top: 4px; margin-left: 13px; }
.hero_div2 { width: 200px; max-height: 390px; height: 390px; margin: 24px 0px 0px 10px; font-size: 14px; }
.hero_margintop { margin-top: -6px; }
.hero_margin { margin: 2px; }

/* Base text style used in hero/city popups */
.basetext { color: #5f3b1a; font-weight: bold; font-size: 12px; }

/* Progress bar matching old version */
.progressback { border: solid 1px; background: url('/interface4/progressback.gif'); width: 152px; height: 22px; margin: 5px 0 5px 0; }
.progressfront { background: url('/interface4/progressfront.gif'); width: 35%; height: 20px; float: left; }

/* Ground slots container below minimap */
.hero_groundslots { float: left; width: 300px; margin-left: 3px; margin-top: 8px; color: #5f3b1a; font-weight: bold; font-size: 12px; }

/* Tab content area */
.hero-tab-content {
  padding: 5px 0 0 8px;
  min-height: 350px;
  /* Cap the height and scroll instead of growing past the fixed-size popup
     when a hero has many stat rows / item bonuses. */
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  clear: both;
  color: #5f3b1a;
  font-weight: bold;
  font-size: 14px;
}

.hero-tab-content.hidden {
  display: none;
}

/* Barbarian's skills list (Plunder + Sprint added in ver103) is tall enough
   to nudge past the shared 420px cap, tripping the .hero-tab-content
   scrollbar even though the content actually fits the popup — no scroll is
   needed for this hero. Suppress the scrollbar for this class only; other
   heroes keep the normal scroll-on-overflow behaviour. */
.hero-tab-content-noscroll {
  overflow: hidden;
}

/* The equipment tab has its own inner scroll (.equip-stats-col) and a
   fixed-size hero/slots layout, so it must NOT also get the outer
   .hero-tab-content scrollbar. A 1px hover reflow (e.g. leaving the
   Equipment tab button) was tipping the content just over max-height and
   showing an unneeded vertical scrollbar that made the tab look too wide. */
#hero-tab-equipment {
  max-height: none;
  overflow: visible;
}

/* Skills Section */
.skills-section h4 {
  color: #5f3b1a;
  margin: 0;
  padding: 0;
  text-decoration: underline;
  text-align: center;
}

.skills-table {
  width: 445px;
  margin-top: 5px;
  margin-left: 8px;
  border-collapse: collapse;
  color: #5f3b1a;
  font-weight: bold;
  font-size: 14px;
}

.skill-row td {
  padding: 2px 4px;
  vertical-align: middle;
}

/* skill-icon class removed - using baseicon/wbaseicon from icons.css instead */

.skill-controls {
  display: flex;
  gap: 2px;
  align-items: center;
}

.skill-info, .ability-info {
  color: #5f3b1a;
  font-size: 13px;
}

.skill-limit {
  color: #5f3b1a;
  font-size: 13px;
}

.item-bonus {
  color: #850000;
}

/* Equipment Section - uses equip-* classes defined above */

/* Abilities Section */
.abilities-section {
  color: #5f3b1a;
  font-weight: bold;
  font-size: 14px;
}

.ability-points {
  color: #5f3b1a;
  font-weight: bold;
  margin-bottom: var(--spacing-md);
}

.abilities-table {
  width: 425px;
  margin-top: 5px;
  margin-left: 10px;
  border-collapse: collapse;
}

.ability-row td {
  padding: 6px 4px;
  vertical-align: middle;
}

.ability-controls {
  display: flex;
  gap: 2px;
  align-items: center;
  width: 65px;
}

/* Droppable highlights */
.drop_active {
  border-color: var(--accent-gold) !important;
  background: rgba(201, 162, 39, 0.2) !important;
}

/* Hero frame styles - using heroes.png sprite sheet */
.heroknightframe { background: url(/units/set2/heroes.png) -0px -130px; width: 150px; height: 150px; }
.heroamazonframe { background: url(/units/set2/heroes.png) -306px -130px; width: 150px; height: 150px; }
.herodreadknightframe { background: url(/units/set2/heroes.png) -153px -130px; width: 150px; height: 150px; }
.herohorselordframe { background: url(/units/set2/heroes.png) -762px -130px; width: 150px; height: 150px; }
.herobarbarianframe { background: url(/units/set2/heroes.png) -458px -130px; width: 150px; height: 150px; }
.heroassassinframe { background: url(/units/set2/heroes.png) -610px -130px; width: 150px; height: 150px; }
.herorangerframe { background: url(/units/set2/heroes.png) -0px -280px; width: 150px; height: 150px; }
.herodwarfframe { background: url(/units/set2/heroes.png) -153px -280px; width: 150px; height: 150px; float: left; margin: 1px 5px 5px 5px; border: solid 1px; }
.herosorceressframe { background: url(/units/set2/heroes.png) -458px -280px; width: 150px; height: 150px; float: left; margin: 1px 5px 5px 5px; border: solid 1px; }
/* ver103 Necromancer (Fas 7) — confirmed sprite cell in set2/heroes.png. */
.heronecromancerframe { background: url(/units/set2/heroes.png) -307px -280px; width: 150px; height: 150px; }

/* Hero frame by ID */
.heroframe50 { background: url(/units/set2/heroes.png) -0px -130px; width: 150px; height: 150px; }
.heroframe51 { background: url(/units/set2/heroes.png) -306px -130px; width: 150px; height: 150px; }
.heroframe52 { background: url(/units/set2/heroes.png) -153px -130px; width: 150px; height: 150px; }
.heroframe53 { background: url(/units/set2/heroes.png) -762px -130px; width: 150px; height: 150px; }
.heroframe54 { background: url(/units/set2/heroes.png) -458px -130px; width: 150px; height: 150px; }
.heroframe55 { background: url(/units/set2/heroes.png) -610px -130px; width: 150px; height: 150px; }
.heroframe56 { background: url(/units/set2/heroes.png) -0px -280px; width: 150px; height: 150px; }
.heroframe57 { background: url(/units/set2/heroes.png) -153px -280px; width: 150px; height: 150px; }
.heroframe58 { background: url(/units/set2/heroes.png) -458px -280px; width: 150px; height: 150px; }

/* Small hero frames for browse/list views */
.heroknightframe_small { background: url(/units/set2/heroesframesmall.png) -0px -0px; width: 75px; height: 75px; }
.heroamazonframe_small { background: url(/units/set2/heroesframesmall.png) -150px -0px; width: 75px; height: 75px; }
.herodreadknightframe_small { background: url(/units/set2/heroesframesmall.png) -75px -0px; width: 75px; height: 75px; }
.herohorselordframe_small { background: url(/units/set2/heroesframesmall.png) -300px -75px; width: 75px; height: 75px; }
.herobarbarianframe_small { background: url(/units/set2/heroesframesmall.png) -225px -0px; width: 75px; height: 75px; }
.heroassassinframe_small { background: url(/units/set2/heroesframesmall.png) -300px -0px; width: 75px; height: 75px; }
.herorangerframe_small { background: url(/units/set2/heroesframesmall.png) -0px -75px; width: 75px; height: 75px; }
.herodwarfframe_small { background: url(/units/set2/heroesframesmall.png) -75px -75px; width: 75px; height: 75px; }
.herosorceressframe_small { background: url(/units/set2/heroesframesmall.png) -225px -75px; width: 75px; height: 75px; }
.heronecromancerframe_small { background: url(/units/set2/heroesframesmall.png) -150px -75px; width: 75px; height: 75px; }

/* Big hero portraits */
.heropaladin_big { background: url(/units/set2/heroes.png) -0px -0px; width: 128px; height: 128px; }
.heroamazon_big { background: url(/units/set2/heroes.png) -256px -0px; width: 128px; height: 128px; }
.herodreadknight_big { background: url(/units/set2/heroes.png) -128px -0px; width: 128px; height: 128px; }
.herobarbarian_big { background: url(/units/set2/heroes.png) -384px -0px; width: 128px; height: 128px; }
.herohorselord_big { background: url(/units/set2/heroes.png) -640px -0px; width: 128px; height: 128px; }
.heroassassin_big { background: url(/units/set2/heroes.png) -512px -0px; width: 128px; height: 128px; }
.heroranger_big { background: url(/units/set2/heroes.png) -260px -450px; width: 128px; height: 128px; }
.herodwarf_big { background: url(/units/set2/heroes.png) -0px -450px; width: 128px; height: 128px; }
.herosorceress_big { background: url(/units/set2/heroes.png) -768px -0px; width: 128px; height: 128px; }
.heronecromancer_big { background: url(/units/set2/heroes.png) -128px 150px; width: 128px; height: 128px; }

/* Hero popup buttons - matching old hero-pop.png sprite */
.hero_add { width: 21px; height: 21px; background: url('/interface4/hero-pop.png') -97px -2px; float: left; cursor: pointer; }
.hero_sub { width: 21px; height: 21px; background: url('/interface4/hero-pop.png') -68px -2px; float: left; margin-right: 5px; cursor: pointer; }

/* Browse arrows - hero-pop.png sprite */
.browseleft { width: 30px; height: 24px; background: url('/interface4/hero-pop.png') -31px -0px; float: left; cursor: pointer; }
.browseright { width: 30px; height: 24px; background: url('/interface4/hero-pop.png') -0px -0px; float: right; cursor: pointer; }

/* Equipment slot sprites - hero-pop.png */
.hero-equip-slot.helm { width: 56px; height: 56px; background: url('/interface4/hero-pop.png') -3px -86px; }
.hero-equip-slot.armour { width: 56px; height: 56px; background: url('/interface4/hero-pop.png') -174px -86px; }
.hero-equip-slot.shield { width: 56px; height: 56px; background: url('/interface4/hero-pop.png') -60px -29px; }
.hero-equip-slot.weapon { width: 56px; height: 56px; background: url('/interface4/hero-pop.png') -3px -29px; }
.hero-equip-slot.ring { width: 56px; height: 56px; background: url('/interface4/hero-pop.png') -117px -29px; }
.hero-equip-slot.boots { width: 56px; height: 56px; background: url('/interface4/hero-pop.png') -117px -86px; }
.itemslot_backpack { width: 56px; height: 56px; background: url('/interface4/hero-pop.png') -174px -29px; }
.itemslot_ground { width: 56px; height: 56px; background: url('/interface4/hero-pop.png') -60px -86px; }

/* Equipment tab layout */
.equip-tab-layout { display: flex; gap: 8px; }
.equip-stats-col { width: 200px; max-height: 400px; overflow-y: auto; overflow-x: hidden; font-size: 14px; color: #5f3b1a; font-weight: bold; }
.equip-hero-col { position: relative; width: 250px; min-height: 385px; }
.equip-hero-body { position: absolute; top: 55px; left: 60px; }
.equip-slot-helm { position: absolute; top: 0px; left: 92px; }
.equip-slot-armour { position: absolute; top: 10px; left: 0px; }
.equip-slot-weapon { position: absolute; top: 100px; left: 0px; }
.equip-slot-ring { position: absolute; top: 165px; left: 0px; }
.equip-slot-boots { position: absolute; top: 185px; left: 92px; }
.equip-slot-shield { position: absolute; top: 30px; left: 185px; }
.equip-backpack { margin-top: 8px; color: #5f3b1a; font-weight: bold; font-size: 12px; }
.equip-backpack-slots { display: flex; gap: 3px; margin-top: 3px; }
.equip-backpack-inline { position: absolute; top: 255px; left: 0; width: 100%; color: #5f3b1a; font-weight: bold; font-size: 12px; }
.equip-backpack-grid { display: grid; grid-template-columns: repeat(3, 56px); gap: 3px; margin-top: 3px; }
.equip-ground { margin-top: 8px; color: #5f3b1a; font-weight: bold; font-size: 12px; }
.equip-ground-slots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.hero_marginleft { margin-left: 3px; }

/* Skill/ability icon layout (unique to game-ui, not in icons.css) */
.skill-icon, .ability-icon {
  width: 48px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  font-weight: bold;
  padding-right: 4px;
}

/* ============================================= */
/* ORIGINAL WARBARONS INTERFACE                   */
/* ============================================= */

/* Base body styles for game view */
body.game-view {
  background-color: #e3e3e3;
  font-family: arial;
  margin: 0;
  text-shadow: 0px 1px 1px #faf2e1;
  font-size: 12px;
  background-image: url('/interface4/main_background.png');
  overflow: hidden;
  color: #3f320c; /* Default dark brown text */
  /* Scrollbar color variables - change here to update all scrollbars */
  --scrollbar-track: #f1dbab;
  --scrollbar-thumb: #f6efe2;
  --scrollbar-thumb-hover: #e8dfd0;
}

/* Global scrollbar styling for game view */
body.game-view *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.game-view *::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

body.game-view *::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

body.game-view *::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Firefox scrollbar */
body.game-view * {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

html, body { height: 100%; }

/* Game View Scene - override flex layout */
.scene.game-view-scene {
  display: block;
  overflow: hidden;
  background-color: #e3e3e3;
  background-image: url('/interface4/main_background.png');
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #3f320c; /* Default dark brown text */
}

/* Two column layout - matching original exactly */
/* leftCol uses overflow:hidden to fill remaining space after rightCol floats right */
.game-view-scene .leftCol {
  overflow: hidden;
  height: 100%;
  padding: 3px;
}

.game-view-scene .rightCol {
  float: right;
  width: 302px;
  margin: 3px 3px 3px 2px; /* Original margin */
  background-image: url('/interface4/main_background.png');
  height: 100%;
  overflow-y: auto;
}

/* Map container - matching original map.css */
.game-view-scene #outerDiv {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: move;
  /* Original border gives inset look */
  border-top: solid 1px #392f1f;
  border-left: solid 1px #392f1f;
  border-right: solid 1px #f4e3c2;
  border-bottom: solid 1px #f4e3c2;
  box-sizing: border-box;
}

.game-view-scene #innerDiv {
  position: relative;
  left: 0px;
  top: 0px;
  z-index: 0; /* Creates stacking context - terrain z-indices are contained within */
  background-color: #379488;
}

.game-view-scene #popWar {
  position: absolute;
}

/* div.war position: absolute is set in markers.css */

/* Dark overlay */
.game-view-scene div.dark {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 800;
  background: url('/interface4/darkbox.png');
  position: fixed;
  display: none;
}

/* ============================================= */
/* LEFT SIDE PANEL                                */
/* ============================================= */

/* Matching original - floats on top of map at top:3px */
.if_uppermidleftpanel {
  width: 74px;
  padding-left: 2px;
  position: absolute;
  top: 3px;
  left: 3px;
  background: url('/interface4/y-panels.png') -77px -0px;
  z-index: 5;
}

/* Matching original - floats on top of map at bottom:3px */
.if_lowermidleftpanel {
  width: 73px;
  padding-left: 2px;
  position: absolute;
  bottom: 3px;
  left: 3px;
  background: url('/interface4/y-panels.png') -77px -0px;
  z-index: 5;
}

.if_topleftpanel {
  width: 72px;
  position: absolute;
  bottom: 146px;
  left: 3px;
  background: url('/interface4/mainpanels.png') -206px -257px;
  padding-top: 4px;
  padding-left: 2px;
  z-index: 5;
}

.if_bottomleftpanel {
  width: 74px;
  height: 3px;
  position: absolute;
  top: 250px;
  left: 3px;
  background: url('/interface4/mainpanels.png') -206px -262px;
  z-index: 5;
}

/* Resource info icons - dark text color for yellow background */
.if_goldsites { width: 64px; height: 30px; background: url(/interface4/mainpanels.png) -213px -156px; float: left; margin-left: -2px; margin-top: 4px; text-align: right; font-size: 12px; font-weight: bold; padding: 0px 4px 0px 0px; color: #5f3b1a; text-shadow: 0px 1px 1px #faf2e1; }
.if_treasury { width: 64px; height: 30px; background: url(/interface4/mainpanels.png) -213px -216px; float: left; margin-left: -2px; margin-top: 4px; text-align: right; font-size: 12px; font-weight: bold; padding: 0px 4px 0px 0px; color: #5f3b1a; text-shadow: 0px 1px 1px #faf2e1; }
.if_castle { width: 64px; height: 30px; background: url(/interface4/mainpanels.png) -213px -126px; float: left; margin-left: -2px; margin-top: 6px; text-align: right; font-size: 12px; font-weight: bold; padding: 0px 4px 0px 0px; color: #5f3b1a; text-shadow: 0px 1px 1px #faf2e1; }
.if_income { width: 64px; height: 30px; background: url(/interface4/mainpanels.png) -213px -186px; float: left; margin-left: -2px; margin-top: 6px; margin-bottom: 4px; text-align: right; font-size: 12px; font-weight: bold; padding: 0px 4px 0px 0px; color: #5f3b1a; text-shadow: 0px 1px 1px #faf2e1; }

/* ============================================= */
/* RESOLUTION INFO BAR (transparent status bar)   */
/* ============================================= */
.game-view-scene #resolutionInfo {
  padding: 2px 0 0 5px;
  width: 400px;
  font: normal 10px sans-serif;
  position: relative;
  background-image: url('/interface4/contentback.png');
  margin-top: -25px;
  margin-left: 130px;
  height: 24px;
  text-align: left;
  float: left;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  color: #3f320c; /* Dark brown text */
  z-index: 100;
}

/* ============================================= */
/* MINIMAP                                        */
/* ============================================= */

.game-view-scene .if_minicontainer {
  width: 300px;
  height: 300px;
  background-color: #000 !important;
  background-image: none !important;
  border-top: solid 1px #392f1f;
  border-left: solid 1px #392f1f;
  border-right: solid 1px #f4e3c2;
  border-bottom: solid 1px #f4e3c2;
  float: left;
}

.game-view-scene .minimap {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
  background: #000 !important;
  background-image: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hide prerendered minimap image - it's only used as a source for canvas drawing */
.game-view-scene .minimap img.minimap-prerendered,
.game-view-scene .minimap img {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
}

.game-view-scene .minimapinner {
  /* Don't stretch - use natural canvas size set via inline style */
  display: block;
  /* Position relative so magnifier can be positioned correctly */
  position: relative;
  /* Ensure no background stretching */
  background: transparent !important;
  /* Don't let any rules stretch the canvas - inline styles take priority */
  max-width: 300px;
  max-height: 300px;
}

/* Ensure canvas inside minimap isn't stretched by percentage rules */
.game-view-scene .minimap canvas.minimapinner {
  /* Inline styles will set exact px dimensions - this just prevents percent-based stretching */
  max-width: 100%;
  max-height: 100%;
}

/* Matching original map.css #magnifier */
.game-view-scene .magnifier {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1001;
  background-color: transparent;
  border: solid white 1px;
  pointer-events: none;
}

/* ============================================= */
/* TURN INFO                                      */
/* ============================================= */

#IDshields {
  padding-top: 3px;
}

.if_turninfo {
  float: left;
  text-align: center;
  width: 300px;
  height: 30px;
  line-height: 30px;
  border-top: solid 1px #392f1f;
  border-left: solid 1px #392f1f;
  border-right: solid 1px #f4e3c2;
  border-bottom: solid 1px #f4e3c2;
  background-image: url(/interface4/dropdownbg.png);
}

.menutopic_right {
  font-family: arial, sans-serif;
  color: #3f320c;
  font-size: 14px;
  margin-left: 2px;
  margin-right: 1px;
  font-weight: bold;
  line-height: 30px;
  display: inline-block;
  vertical-align: middle;
}

/* ============================================= */
/* UNIT SELECTION SLOTS - Exact original layout   */
/* ============================================= */

/* EXACT match to original - no extra properties */
.if_unitunselected {
  position: relative;
  width: 72px;
  height: 100px;
  float: left;
  background: url(/interface4/mainpanels.png) -563px -217px;
  margin: 1px 2px 1px 1px;
  font-size: 10px;
  color: #3f320c; /* Dark brown text */
}

.if_unitselected {
  position: relative;
  width: 72px;
  height: 100px;
  float: left;
  background: url(/interface4/mainpanels.png) -563px -217px;
  margin: 1px 2px 1px 1px;
  font-size: 10px;
  color: #3f320c; /* Dark brown text */
}

/* Selected unit slot - unit sprite gets black border with larger size */
.if_unitselected .unit-display > div {
  border: solid 2px #000;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  margin: 2px 0px 0px 2px;
  width: 66px !important;
  height: 66px !important;
}

/* Unselected unit slot - no border, extra margin to compensate */
.if_unitunselected .unit-display > div {
  border: none;
  margin: 3px 0px 1px 4px;
}

/* EXACT match - position only, font inherits from parent */
.if_unitslotcount {
  position: absolute;
  left: 6px;
  top: 2px;
}

/* ver103: small floating Stack button between two adjacent unit slots.
   Positioned absolutely inside the LEFT slot so it overhangs the boundary
   with the right slot. Click to merge two stackable solos into one slot.
   z-index must beat the unit sprite (`div.elf` etc. = z-index 130 in
   units.css) — otherwise the sprite captures the click. */
.wb-stack-btn {
  position: absolute;
  top: 30px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fde7a4 0%, #c98c1b 60%, #5a3a09 100%);
  border: 1px solid #2f1d04;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6), inset 0 0 2px rgba(255, 255, 255, 0.3);
  color: #2f1d04;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  z-index: 200;
  user-select: none;
  transition: transform 0.1s, box-shadow 0.1s;
}
.wb-stack-btn.wb-stack-btn-right { right: -10px; }
.wb-stack-btn.wb-stack-btn-left  { left: -10px; }

.wb-stack-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 0 6px rgba(255, 220, 100, 0.8), inset 0 0 2px rgba(255, 255, 255, 0.4);
}

.wb-stack-btn:active {
  transform: scale(0.95);
}

/* ver103 anti-air surcharge indicator on a path-step counter. Renders as
   a smaller line BELOW the main remaining-moves number, in the same blue
   tint as the zone overlay so the player visually links the cost to the
   highlighted area. */
div.pathcounter .pathcounter-aa,
div.pathcounter2 .pathcounter-aa {
  display: block;
  margin-top: 1px;
  color: #6cb2ff;
  font-weight: bold;
  font-size: 11px;
  line-height: 1.1;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
  pointer-events: none;
}

/* ver103 Liquidate payout pill shown in the News popup events list. */
.news-liq-gold {
  display: inline-block;
  background: url('/icons/icons.png') no-repeat 1px -243px;
  padding: 0 4px 0 26px;
  margin-left: 4px;
  height: 24px;
  line-height: 24px;
  vertical-align: middle;
  font-weight: bold;
  color: #2f1d04;
}

.news-event-line .small_elf,
.news-event-line [class^="small_"] {
  float: none !important;
  margin: 0 4px !important;
  vertical-align: middle;
}

/* ver103 Liquidate confirmation panel needs more room than Destroy's
   140×95 box because the body text explains the payout delay and the
   capture-cancel rule. Overrides cty_destroy1 width/height when both
   classes are present. */
.cty_destroy1.cty_liquidate1 {
  width: 280px;
  height: auto;
  min-height: 110px;
  padding: 6px 8px 8px;
}

/* ver103 Liquidate Production: countdown badge in the corner of the
   liquidating slot. Shows the number of turns left until payout. */
.wb-liq-countdown {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fde7a4 0%, #c98c1b 60%, #5a3a09 100%);
  border: 1px solid #2f1d04;
  color: #2f1d04;
  font-size: 11px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
  z-index: 250;
  pointer-events: none;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* ver103 stacked-slot count badge in the bottom-right of the sprite.
   z-index must beat the unit sprite (130). Badge is non-interactive
   (pointer-events:none) so clicks pass through to whatever's behind. */
.wb-stack-count-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  min-width: 20px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: radial-gradient(circle at 35% 30%, #fde7a4 0%, #c98c1b 60%, #5a3a09 100%);
  border: 1px solid #2f1d04;
  color: #2f1d04;
  font-size: 11px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  z-index: 200;
  pointer-events: none;
}

/* ver103 battle popup: stack cell — ONE cell holds N units of the same
   armytype. Renders the alive leader's sprite + a small ×N corner badge.
   When a stack member dies this round, the dying sprite is overlaid with
   the same dark/killed treatment as solo deaths, and the new lead slides
   in from the right "in front" of it. */
.wb-stack-cell {
  position: relative;
}

/* Small corner badge with the alive count. We need a very specific
   selector (matching `div.selectrowunit > div { position: relative }` from
   line ~5878) so our `position: absolute` actually wins — otherwise the
   badge falls back to in-flow and stretches across the elf's head. */
div.selectrowunit.wb-stack-cell > div.wb-stack-corner-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: auto;
  min-width: 0;
  height: 14px;
  line-height: 14px;
  padding: 0 4px;
  border-radius: 7px;
  background: radial-gradient(circle at 35% 30%, #fde7a4 0%, #c98c1b 60%, #5a3a09 100%);
  border: 1px solid #2f1d04;
  color: #2f1d04;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  z-index: 250;
  pointer-events: none;
  float: none;
}

/* When a stack member dies the count badge gets a brief red flash so the
   player notices ×2 → ×1 — the live elf sprite itself isn't decorated. */
div.selectrowunit.wb-stack-cell > div.wb-stack-corner-badge.wb-stack-badge-deathflash {
  animation: wb-badge-deathflash 1100ms ease-out forwards;
}

@keyframes wb-badge-deathflash {
  0%   {
    background: radial-gradient(circle at 35% 30%, #ffd6d6 0%, #b81818 60%, #4a0606 100%);
    color: #fff;
    box-shadow: 0 0 8px rgba(255, 60, 60, 0.95), 0 0 14px rgba(255, 0, 0, 0.6);
    transform: scale(1.25);
  }
  35%  {
    background: radial-gradient(circle at 35% 30%, #ffd6d6 0%, #b81818 60%, #4a0606 100%);
    color: #fff;
    box-shadow: 0 0 6px rgba(255, 60, 60, 0.8);
    transform: scale(1.1);
  }
  100% {
    background: radial-gradient(circle at 35% 30%, #fde7a4 0%, #c98c1b 60%, #5a3a09 100%);
    color: #2f1d04;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    transform: scale(1);
  }
}

/* Unstack ✕ button on stacked slot — top-right corner. z-index must beat
   the unit sprite (units.css gives every .elf/.orc/etc. z-index 130) or
   the sprite intercepts the click even when the ✕ is visually on top. */
.wb-unstack-btn {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd0d0 0%, #a02020 70%, #4a0808 100%);
  border: 1px solid #2f0404;
  color: #fff5f5;
  font-size: 11px;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  z-index: 200;
  user-select: none;
  transition: transform 0.1s;
}

.wb-unstack-btn:hover {
  transform: scale(1.2);
  box-shadow: 0 0 4px rgba(255, 100, 100, 0.7);
}

.wb-unstack-btn:active { transform: scale(0.9); }

/* Unit stats - positioned at bottom of slot */
.unit-stats {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  padding-left: 7px;
  font-size: 9px;
  line-height: 1.2;
}

/* ============================================= */
/* GROUP AREA - Exact original positioning        */
/* ============================================= */

.if_grouparea {
  padding: 6px;
  position: absolute;
  width: 138px;
  height: 49px;
  float: left;
  border: solid 0px;
  right: 89px;
  top: 444px;
  background: url(/interface4/mainpanels.png) -142px -2px;
}

/* ============================================= */
/* ACTION BUTTONS - Original float layout         */
/* ============================================= */

/* Main action buttons - all use float layout like original */
div.move1 { background: url('/interface4/mainpanels.png') -484px -146px; width: 67px; height: 35px; margin-left: 1px; margin-bottom: 5px; margin-right: 6px; cursor: pointer; float: left; }
div.move2 { background: url('/interface4/mainpanels.png') -484px -181px; width: 67px; height: 35px; margin-left: 1px; margin-bottom: 5px; margin-right: 6px; cursor: pointer; float: left; }

div.fightorder1 { background: url('/interface4/miscpanels.png') -0px -195px; width: 67px; height: 35px; margin-bottom: 6px; margin-right: 8px; cursor: pointer; float: left; }
div.fightorder2 { background: url('/interface4/miscpanels.png') -67px -195px; width: 67px; height: 35px; margin-bottom: 6px; margin-right: 8px; cursor: pointer; float: left; }

div.unselect1 { background: url('/interface4/mainpanels.png') -350px -215px; width: 67px; height: 35px; margin-bottom: 5px; margin-right: 8px; cursor: pointer; float: left; }
div.unselect2 { background: url('/interface4/mainpanels.png') -350px -249px; width: 67px; height: 35px; margin-bottom: 5px; margin-right: 8px; cursor: pointer; float: left; }

div.groupstats1 { background: url('/interface4/miscpanels.png') -135px -195px; width: 67px; height: 35px; margin-bottom: 6px; margin-right: 8px; cursor: pointer; float: left; }
div.groupstats2 { background: url('/interface4/miscpanels.png') -202px -195px; width: 67px; height: 35px; margin-bottom: 6px; margin-right: 8px; cursor: pointer; float: left; }

div.stop1 { background: url('/interface4/mainpanels.png') -282px -215px; width: 67px; height: 35px; margin-bottom: 5px; margin-right: 8px; cursor: pointer; float: left; }
div.stop2 { background: url('/interface4/mainpanels.png') -282px -249px; width: 67px; height: 35px; margin-bottom: 5px; margin-right: 8px; cursor: pointer; float: left; }

div.attention1 { background: url('/interface4/mainpanels.png') -282px -145px; width: 67px; height: 35px; margin-bottom: 5px; margin-right: 8px; cursor: pointer; float: left; }
div.attention2 { background: url('/interface4/mainpanels.png') -282px -180px; width: 67px; height: 35px; margin-bottom: 5px; margin-right: 8px; cursor: pointer; float: left; }

div.nextunit1 { background: url('/interface4/mainpanels.png') -550px -145px; width: 67px; height: 35px; margin-bottom: 5px; margin-right: 8px; cursor: pointer; float: left; }
div.nextunit2 { background: url('/interface4/mainpanels.png') -550px -180px; width: 67px; height: 35px; margin-bottom: 5px; margin-right: 8px; cursor: pointer; float: left; }

div.endturn1 { background: url('/interface4/mainpanels.png') -416px -145px; width: 67px; height: 35px; margin-bottom: 6px; margin-right: 8px; cursor: pointer; float: left; }
div.endturn2 { background: url('/interface4/mainpanels.png') -416px -180px; width: 67px; height: 35px; margin-bottom: 6px; margin-right: 8px; cursor: pointer; float: left; }

/* EXACT match - no cursor property */
.btn_notes1 { background: url('/interface4/miscpanels.png') -270px -196px; width: 67px; height: 35px; float: left; margin-left: 1px; margin-bottom: 5px; margin-right: 6px; margin-top: 1px; }
.btn_notes2 { background: url('/interface4/miscpanels.png') -337px -196px; width: 67px; height: 35px; float: left; margin-left: 1px; margin-bottom: 5px; margin-right: 6px; margin-top: 1px; cursor: pointer; }

.btn_groupmove1 { background: url('/interface4/miscpanels.png') -541px -195px; width: 67px; height: 35px; margin-bottom: 6px; margin-right: 8px; cursor: pointer; float: left; }
.btn_groupmove2 { background: url('/interface4/miscpanels.png') -608px -195px; width: 67px; height: 35px; margin-bottom: 6px; margin-right: 8px; cursor: pointer; float: left; }

/* EXACT match - no cursor property (scoped to game view to avoid conflict with mapeditor.css) */
.game-view-scene .btn_grid1 { background: url('/interface4/mapeditor.png') -0px -36px; width: 68px; height: 36px; float: left; }
.game-view-scene .btn_grid2 { background: url('/interface4/mapeditor.png') -68px -36px; width: 68px; height: 36px; float: left; cursor: pointer; }

/* Toggle buttons */
.togglefightorder1 { background: url(/interface4/miscpanels.png) -330px -2px; width: 20px; height: 24px; position: absolute; top: 342px; right: 285px; cursor: pointer; }
.togglefightorder2 { background: url(/interface4/miscpanels.png) -352px -2px; width: 20px; height: 24px; position: absolute; top: 342px; right: 285px; cursor: pointer; }

.toggletrackplayer1 { background: url(/interface4/miscpanels.png) -334px -43px; width: 20px; height: 24px; position: absolute; top: 343px; right: 260px; cursor: pointer; }
.toggletrackplayer2 { background: url(/interface4/miscpanels.png) -359px -43px; width: 20px; height: 24px; position: absolute; top: 343px; right: 260px; cursor: pointer; }

/* ============================================= */
/* SIDE BUTTONS (Left panel)                      */
/* ============================================= */

.sidechat1 { background: url('/interface4/mainpanels.png') -418px -0px; width: 68px; height: 36px; margin-bottom: 6px; cursor: pointer; margin-left: -2px; float: left; }
.sidechat2 { background: url('/interface4/mainpanels.png') -418px -36px; width: 68px; height: 36px; margin-bottom: 6px; cursor: pointer; margin-left: -2px; float: left; }

.sidebattle1 { background: url('/interface4/mainpanels.png') -282px -0px; width: 68px; height: 36px; margin-bottom: 6px; cursor: pointer; margin-left: -2px; float: left; }
.sidebattle2 { background: url('/interface4/mainpanels.png') -282px -36px; width: 68px; height: 36px; margin-bottom: 6px; cursor: pointer; margin-left: -2px; float: left; }

/* Swap the battle-reports button to the animated GIF (matches the existing
   dock/ruin/temple "active" pattern). Clears when the player opens the
   reports list. */
.sidebattle1.has-new-battle,
.sidebattle2.has-new-battle {
  background: url('/interface4/battleactive.gif') no-repeat 0 0;
}

.sidecity1 { background: url('/interface4/mainpanels.png') -486px -0px; width: 68px; height: 36px; margin-bottom: 6px; cursor: pointer; margin-left: -2px; float: left; }
.sidecity2 { background: url('/interface4/mainpanels.png') -486px -36px; width: 68px; height: 36px; margin-bottom: 6px; cursor: pointer; margin-left: -2px; float: left; }

/* .sidewiki1, .sidewiki2 — defined in city.css */

.buyhero1 { background: url('/interface4/mainpanels.png') -350px -0px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }
.buyhero2 { background: url('/interface4/mainpanels.png') -350px -36px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }
.buyheroactive { background: url('/interface4/mainpanels.png') -350px -36px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }

.btn_dock1 { background: url('/interface4/mainpanels.png') -350px -73px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }
.btn_dock2 { background: url('/interface4/mainpanels.png') -350px -109px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }
.btn_dockactive { background: url('/interface4/dockactive.gif') no-repeat 0 0; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }

.btn_ruin1 { background: url('/interface4/mainpanels.png') -554px -73px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }
.btn_ruin2 { background: url('/interface4/mainpanels.png') -554px -109px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }
.btn_ruinactive { background: url('/interface4/ruinactive.gif') no-repeat 0 0; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }

.btn_temple1 { background: url('/interface4/mainpanels.png') -214px -54px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }
.btn_temple2 { background: url('/interface4/mainpanels.png') -214px -90px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }
.btn_templeactive { background: url('/interface4/templeactive.gif') no-repeat 0 0; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }

.btn_empty1 { background: url('/interface4/mainpanels.png') -418px -73px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }
.btn_empty2 { background: url('/interface4/mainpanels.png') -418px -109px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }

.btn_tower1 { background: url('/interface4/mainpanels.png') -486px -73px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }
.btn_tower2 { background: url('/interface4/mainpanels.png') -486px -109px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }
.btn_toweractive { background: url('/interface4/toweractive.gif') no-repeat 0 0; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }

.btn_trigger1 { background: url('/interface4/mainpanels.png') -554px -146px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }
.btn_trigger2 { background: url('/interface4/mainpanels.png') -554px -182px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }
.btn_triggeractive { background: url('/interface4/triggeractive.gif') no-repeat 0 0; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }

/* Group/Ungroup buttons */
.button_group1 { width: 65px; height: 34px; background: url('/interface4/mainpanels.png') -281px -284px; cursor: pointer; }
.button_group2 { width: 65px; height: 34px; background: url('/interface4/mainpanels.png') -281px -318px; cursor: pointer; }
.button_ungroup1 { width: 65px; height: 34px; background: url('/interface4/mainpanels.png') -410px -286px; cursor: pointer; }
.button_ungroup2 { width: 65px; height: 34px; background: url('/interface4/mainpanels.png') -410px -320px; cursor: pointer; }

.diplomacy1 { background: url('/interface4/mainpanels.png') -554px -0px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }
.diplomacy2 { background: url('/interface4/mainpanels.png') -554px -36px; width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }

.chatactive { background: url('/buttons2/chatactive.gif'); width: 68px; height: 36px; margin-bottom: 6px; cursor: pointer; margin-left: -2px; float: left; }
.diplomacyactive { background: url('/buttons2/diplomacyactive.gif'); width: 68px; height: 36px; margin-bottom: 4px; cursor: pointer; margin-left: -2px; float: left; }

/* ============================================= */
/* TOP MENU                                       */
/* ============================================= */

/* Matching original - position absolute, floats on top of map */
#topmenupos {
  position: absolute;
  z-index: 5;
  top: 3px;
  left: 5px;
  border-bottom: solid 1px #392f1f;
  border-left: solid 1px #f4e3c2;
  border-right: solid 1px #392f1f;
  background-image: url(/interface4/main_background.png);
  width: 620px;
  height: 20px;
  text-align: left;
  float: left;
}

.topmenu-item {
  position: relative;
  float: left; /* Side by side like original .menutopic */
  padding: 0 12px;
  cursor: pointer;
  font-weight: bold;
  color: #3f320c;
  font-size: 14px; /* Original uses 14px */
  margin-left: 5px;
  margin-right: 5px;
}

.topmenu-item:hover {
  background-color: #e2b852;
}

.menu-label {
  line-height: 20px;
}

.game-view-scene .dropmenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background-image: url(/interface4/dropdownbg.png);
  border-top: solid 1px #f6e1a6;
  border-left: solid 1px #f6e1a6;
  border-right: solid 1px #8a7649;
  border-bottom: solid 1px #8a7649;
  box-shadow: 0 10px 10px 0 #333;
  min-width: 150px;
}

.menu-option {
  padding: 5px 10px;
  color: #3f320c;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
}

.menu-option:hover {
  background-color: #e2b852;
}

.game-title-text {
  font-weight: bold;
  color: #3f320c;
  font-size: 14px;
}

/* ============================================= */
/* STATUS INDICATORS                              */
/* ============================================= */

div.observer { width: 52px; height: 52px; position: absolute; right: 360px; top: 50px; background: url(/interface4/mainpanels.png) -86px -2px; border: solid 3px; display: none; }
div.freeze { width: 58px; height: 58px; position: absolute; right: 360px; top: 50px; background: url(/interface4/mainpanels.png) -152px -209px; border: solid 3px; display: none; }
div.activeturn { width: 52px; height: 52px; position: absolute; right: 360px; top: 50px; background: url(/interface4/mainpanels.png) -152px -155px; border: solid 3px; display: none; }

.fullscreen {
  position: absolute;
  bottom: 10px;
  left: 80px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: url(/interface4/miscpanels.png) -655px -71px;
  z-index: 5;
}

/* ============================================= */
/* LOADING OVERLAY                                */
/* ============================================= */

.if_darkboxwait {
  width: 100%;
  height: 100%;
  position: fixed;
  display: none;
  z-index: 1100;
  background-image: url('/interface4/waiting.gif');
  color: #fff;
  font-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
}

.if_darkboxwait span {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -85px;
  margin-top: -40px;
  border: solid 1px;
  width: 170px;
  height: 60px;
  border-color: #DDDDAA;
  padding-top: 5px;
}

/* ============================================= */
/* TILE INFO PANEL                                */
/* ============================================= */

.tile-info-panel {
  position: absolute;
  bottom: 10px;
  left: 130px;
  background-image: url(/interface4/dropdownbg.png);
  border: solid 1px #8a7649;
  padding: 5px 10px;
  font-weight: bold;
  color: #3f320c;
  z-index: 5;
}

/* ============================================= */
/* SHIELD MARKERS                                 */
/* ============================================= */

/* Shield icons - add margin-right for spacing between shields */
.shield_tiny0 { background: url(/interface4/mainpanels.png) -159px -80px; float: left; height: 22px; width: 15px; margin-right: 2px; }
.shield_tiny1 { background: url(/interface4/mainpanels.png) -175px -56px; float: left; height: 22px; width: 15px; margin-right: 2px; }
.shield_tiny2 { background: url(/interface4/mainpanels.png) -191px -56px; float: left; height: 22px; width: 15px; margin-right: 2px; }
.shield_tiny3 { background: url(/interface4/mainpanels.png) -192px -80px; float: left; height: 22px; width: 15px; margin-right: 2px; }
.shield_tiny4 { background: url(/interface4/mainpanels.png) -159px -103px; float: left; height: 22px; width: 15px; margin-right: 2px; }
.shield_tiny5 { background: url(/interface4/mainpanels.png) -176px -102px; float: left; height: 22px; width: 15px; margin-right: 2px; }
.shield_tiny6 { background: url(/interface4/mainpanels.png) -193px -103px; float: left; height: 22px; width: 15px; margin-right: 2px; }
.shield_tiny7 { background: url(/interface4/mainpanels.png) -159px -128px; float: left; height: 22px; width: 15px; margin-right: 2px; }
.shield_tiny8 { background: url(/interface4/mainpanels.png) -156px -56px; float: left; height: 22px; width: 15px; margin-right: 2px; }
.tinydead { background: url(/interface4/mainpanels.png) -176px -80px; width: 16px; height: 22px; float: left; background-repeat: no-repeat; margin-right: 2px; }
/* .playerMe, .playerActive, .playerInActive, .playerDone — defined in markers.css */

/* ============================================= */
/* TAVERN POPUP                                   */
/* ============================================= */

#tavern-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tavern-popup.hidden {
  display: none;
}

.tavern-popup-content {
  width: 700px;
  max-width: 95%;
  background-image: url(/interface4/dropdownbg.png);
  border-top: solid 2px #f6e1a6;
  border-left: solid 2px #f6e1a6;
  border-right: solid 2px #8a7649;
  border-bottom: solid 2px #8a7649;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.tavern-header {
  background: linear-gradient(to bottom, #5a4a30, #3a2a10);
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px #8a7649;
}

.tavern-header h3 {
  margin: 0;
  color: #f6e1a6;
  font-size: 16px;
  text-shadow: 1px 1px 2px #000;
}

.tavern-body {
  padding: 15px;
}

.tavern-layout {
  display: flex;
  gap: 15px;
}

.tavern-hero-select {
  width: 200px;
  flex-shrink: 0;
}

.tavern-hero-preview {
  width: 180px;
  flex-shrink: 0;
  text-align: center;
}

.tavern-hero-details {
  flex: 1;
}

.tavern-section-title {
  font-weight: bold;
  color: #3f320c;
  font-size: 13px;
  margin-bottom: 10px;
  border-bottom: solid 1px #8a7649;
  padding-bottom: 5px;
}

.tavern-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.tavern-hero-btn {
  background-image: url(/interface4/dropdownbg.png);
  border: solid 1px #8a7649;
  padding: 5px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.tavern-hero-btn:hover {
  background-color: rgba(226, 184, 82, 0.3);
}

.tavern-hero-btn.selected {
  border-color: #f6e1a6;
  background-color: rgba(226, 184, 82, 0.5);
  box-shadow: inset 0 0 5px rgba(246, 225, 166, 0.5);
}

.hero-frame-small {
  width: 48px;
  height: 48px;
  margin: 0 auto 3px;
  background-size: cover;
}

.hero-type-name {
  font-size: 9px;
  color: #3f320c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-preview-frame {
  background: rgba(0, 0, 0, 0.2);
  border: solid 1px #8a7649;
  padding: 10px;
  margin-bottom: 10px;
}

.hero-portrait-large {
  width: 128px;
  height: 128px;
  margin: 0 auto;
  background-size: cover;
}

.hero-preview-stats {
  text-align: left;
  background: rgba(0, 0, 0, 0.1);
  padding: 8px;
  border: solid 1px #8a7649;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #3f320c;
  padding: 2px 0;
}

.stat-label {
  font-weight: bold;
}

.stat-value {
  color: #5a4a30;
}

.tavern-field {
  margin-bottom: 12px;
}

.tavern-field label {
  display: block;
  font-weight: bold;
  color: #3f320c;
  font-size: 12px;
  margin-bottom: 4px;
}

.tavern-field input {
  width: 100%;
  padding: 6px 8px;
  border: solid 1px #8a7649;
  background: #f9f3e3;
  color: #3f320c;
  font-size: 13px;
}

.tavern-field input:focus {
  outline: none;
  border-color: #f6e1a6;
  background: #fff;
}

.hero-class-bonuses {
  background: rgba(0, 0, 0, 0.1);
  padding: 8px;
  border: solid 1px #8a7649;
  font-size: 11px;
  color: #3f320c;
}

.bonus-item {
  padding: 2px 0;
  padding-left: 12px;
  position: relative;
}

.bonus-item::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #8a7649;
}

.tavern-cost, .tavern-gold {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 5px 0;
  border-bottom: solid 1px #ddd5c0;
}

.cost-label, .gold-label {
  font-weight: bold;
  color: #3f320c;
}

.cost-value {
  color: #8b4513;
  font-weight: bold;
}

.cost-value.cannot-afford {
  color: #cc0000;
}

.gold-value {
  color: #c9a227;
  font-weight: bold;
}

.tavern-footer {
  background: linear-gradient(to bottom, #4a3a20, #3a2a10);
  padding: 10px 15px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: solid 1px #8a7649;
}

.btn-popup {
  padding: 6px 16px;
  border: solid 1px #8a7649;
  background: linear-gradient(to bottom, #d4c4a0, #b4a480);
  color: #3f320c;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-popup:hover {
  background: linear-gradient(to bottom, #e4d4b0, #c4b490);
}

.btn-popup:active {
  background: linear-gradient(to bottom, #b4a480, #d4c4a0);
}

.btn-popup.primary {
  background: linear-gradient(to bottom, #c9a227, #a08020);
  border-color: #e6c84a;
  color: #3a1e00;
}

.btn-popup.primary:hover {
  background: linear-gradient(to bottom, #e6c84a, #c9a227);
}

.btn-popup:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Hero portrait (large) sprites from heroes.png */
.hero-portrait.heroknightframe { background: url('/heroes/heroes.png') 0 0; width: 128px; height: 128px; }
.hero-portrait.heroamazonframe { background: url('/heroes/heroes.png') -128px 0; width: 128px; height: 128px; }
.hero-portrait.herodreadknightframe { background: url('/heroes/heroes.png') -256px 0; width: 128px; height: 128px; }
.hero-portrait.herohorselordframe { background: url('/heroes/heroes.png') -384px 0; width: 128px; height: 128px; }
.hero-portrait.herobarbarianframe { background: url('/heroes/heroes.png') -512px 0; width: 128px; height: 128px; }
.hero-portrait.heroassassinframe { background: url('/heroes/heroes.png') 0 -128px; width: 128px; height: 128px; }
.hero-portrait.herorangerframe { background: url('/heroes/heroes.png') -128px -128px; width: 128px; height: 128px; }
.hero-portrait.herodwarfframe { background: url('/heroes/heroes.png') -256px -128px; width: 128px; height: 128px; }
.hero-portrait.herosorceressframe { background: url('/heroes/heroes.png') -384px -128px; width: 128px; height: 128px; }
.hero-portrait.heronecromancerframe { background: url('/heroes/heroes.png') -256px 0; width: 128px; height: 128px; }

/* Large portrait for tavern preview */
.hero-portrait-large.heroknightframe { background: url('/heroes/heroes.png') 0 0; }
.hero-portrait-large.heroamazonframe { background: url('/heroes/heroes.png') -128px 0; }
.hero-portrait-large.herodreadknightframe { background: url('/heroes/heroes.png') -256px 0; }
.hero-portrait-large.herohorselordframe { background: url('/heroes/heroes.png') -384px 0; }
.hero-portrait-large.herobarbarianframe { background: url('/heroes/heroes.png') -512px 0; }
.hero-portrait-large.heroassassinframe { background: url('/heroes/heroes.png') 0 -128px; }
.hero-portrait-large.herorangerframe { background: url('/heroes/heroes.png') -128px -128px; }
.hero-portrait-large.herodwarfframe { background: url('/heroes/heroes.png') -256px -128px; }
.hero-portrait-large.herosorceressframe { background: url('/heroes/heroes.png') -384px -128px; }
.hero-portrait-large.heronecromancerframe { background: url('/heroes/heroes.png') -256px 0; }

/* ============================================
   BATTLE POPUP STYLES (Original Warbarons Style)
   ============================================ */

/* Battle popup overlay - now handled by Popup component (popup.css) */
/* Legacy ID-based styles removed to avoid conflicts with .wb-popup-overlay */

/* Popup container using CSS grid for borders */
.battle-popup-container {
  display: grid;
  grid-template-columns: 26px 1fr 26px;
  grid-template-rows: 26px 513px 26px;
  width: 990px;
  height: 565px;
}

/* Popup border pieces (div-based) */
.pop-border { background-repeat: repeat; }
.pop-border-tl { grid-area: 1 / 1 / 2 / 2; background: url('/interface4/popup_tl.png') no-repeat; }
.pop-border-t { grid-area: 1 / 2 / 2 / 3; background: url('/interface4/popup_t.png') repeat-x; }
.pop-border-tr { grid-area: 1 / 3 / 2 / 4; background: url('/interface4/popup_tr.png') no-repeat; }
.pop-border-l { grid-area: 2 / 1 / 3 / 2; background: url('/interface4/popup_l.png') repeat-y; }
.pop-border-r { grid-area: 2 / 3 / 3 / 4; background: url('/interface4/popup_r.png') repeat-y; }
.pop-border-bl { grid-area: 3 / 1 / 4 / 2; background: url('/interface4/popup_bl.png') no-repeat; }
.pop-border-b { grid-area: 3 / 2 / 4 / 3; background: url('/interface4/popup_b.png') repeat-x; }
.pop-border-br { grid-area: 3 / 3 / 4 / 4; background: url('/interface4/popup_br.png') no-repeat; }

/* Main popup content area */
.pop-content {
  grid-area: 2 / 2 / 3 / 3;
  background-image: url('/interface4/dropdownbg.png');
  position: relative;
  overflow: visible;
}

/* Popup header box */
.pop-header-box {
  width: 414px;
  height: 63px;
  background: url('/interface4/basepopup.png') -285px -56px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -10px;
  text-align: center;
  font-family: Copperplate, Copperplate Gothic Light, fantasy;
  color: #2f2419;
  font-size: 26px;
  font-weight: bold;
  line-height: 45px;
  text-shadow: 1px 1px 1px #f4eedf;
  z-index: 1000;
}

/* Close button for popup */
.pop-close-btn {
  position: absolute;
  top: 6px;
  right: 10px;
  height: 22px;
  width: 21px;
  background: url('/interface4/basepopup.png') -666px -31px;
  cursor: pointer;
  border: 0;
  z-index: 20;
}
.pop-close-btn:hover { background: url('/interface4/basepopup.png') -666px -7px; }

/* Legacy table-based popup support */
.battle-popup-table { margin: auto; }
.pop_tl { height: 26px; width: 26px; background: url('/interface4/popup_tl.png'); }
.pop_t { height: 26px; background: url('/interface4/popup_t.png'); }
.pop_tr { height: 26px; width: 26px; background: url('/interface4/popup_tr.png'); }
.pop_l { width: 26px; background: url('/interface4/popup_l.png'); }
.pop_c { height: 498px; width: 938px; background-image: url('/interface4/dropdownbg.png'); position: relative; color: #2f2419; text-shadow: 1px 1px 1px #f4eedf; }
.pop_r { width: 26px; background: url('/interface4/popup_r.png'); }
.pop_bl { height: 26px; width: 26px; background: url('/interface4/popup_bl.png'); }
.pop_b { height: 26px; background: url('/interface4/popup_b.png'); }
.pop_br { height: 26px; width: 26px; background: url('/interface4/popup_br.png'); }

.pop_header {
  width: 414px;
  height: 63px;
  background: url('/interface4/basepopup.png') -285px -56px;
  position: absolute;
  left: 288px;
  top: -8px;
  text-align: center;
  font-family: Copperplate, Copperplate Gothic Light, fantasy;
  color: #2f2419;
  font-size: 26px;
  font-weight: bold;
  line-height: 55px;
  text-shadow: 1px 1px 1px #f4eedf;
}

.pop_close {
  position: absolute;
  top: 6px;
  left: 900px;
  height: 22px;
  width: 21px;
  background: url('/interface4/basepopup.png') -666px -31px;
  cursor: pointer;
  border: 0;
}
.pop_close:hover { background: url('/interface4/basepopup.png') -666px -7px; }

/* Popup container positioning */
.pop_table {
  display: none;
  z-index: 950;
  top: 50%;
  left: 50%;
  margin-left: -495px;
  margin-top: -275px;
  text-align: center;
  position: fixed;
  width: 990px;
  height: 550px;
}

.pop_footer {
  width: 371px;
  height: 49px;
  background: url('/interface4/basepopup.png') -292px -4px;
  position: absolute;
  left: 310px;
  top: 512px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pop_headlinetext {
  font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
  font-size: 26px;
  color: #2f2419;
  text-shadow: 1px 1px 1px #f4eedf;
  font-weight: bold;
  margin-top: 8px;
}

.okpopupcontent {
  padding: 15px;
  overflow: hidden;
}

/* Dark overlay behind popups */
.darkbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/interface4/darkbox.png');
  z-index: 900;
}

/* ============================================
   HERO OFFER POPUP STYLES
   ============================================ */

/* Hero offer overlay - now handled by Popup component (popup.css) */
/* Legacy ID-based styles removed to avoid conflicts with .wb-popup-overlay */

/* Hero offer popup container using CSS grid for borders */
.hero-offer-popup-container {
  display: grid;
  grid-template-columns: 26px 1fr 26px;
  grid-template-rows: 26px 480px 26px;
  width: 990px;
  height: 532px;
}

/* Main layout inside popup (3 column) */
.hero-offer-layout {
  display: flex;
  flex-direction: row;
  height: 100%;
  padding: 5px 15px 15px 15px;
}

/* Left section: Minimap and Bank */
.hero-offer-minimap-section {
  width: 302px;
  flex-shrink: 0;
}

.hero-offer-bank {
  font-size: 14px;
  font-weight: bold;
  color: #5f3b1a;
  text-shadow: 0px 1px 1px #faf2e1;
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-offer-gold-value {
  background: url('/icons/icons.png') no-repeat 1px -1107px;
  display: inline-block;
  width: 66px;
  height: 26px;
  text-align: right;
  padding-right: 5px;
  line-height: 28px;
  color: #5f3b1a;
}

/* Center section: Hero selection with scroller */
.hero-offer-select-section {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-offer-portrait-large {
  margin-bottom: 10px;
  /* Portrait lives INSIDE the description cell (.hero-offer-stats-desc), above
     the text. overflow:hidden contains the floated hero frame so the
     description text starts BELOW the portrait instead of wrapping beside it. */
  overflow: hidden;
  width: 158px;
}

/* Left info column wrapped in its own cell so its vertical spacing (name /
   cost / level / icons / allies) is INDEPENDENT of the description column's
   height. Previously the description spanned grid rows 2-6 and a tall desc
   (Necromancer) distributed its height into those rows, spreading the left
   items apart and pushing the allies row off the bottom of the popup. */
.hero-offer-left-col {
  grid-column: 1;
  align-self: start;
}

.hero-offer-portrait-large > div {
  box-shadow: 1px 1px 4px #000;
}

/* Explicit sizing for hero frames in offer popup - coordinates from ver102/css/units_20120510.css */
.hero-offer-portrait-large .heroknightframe { background: url('/units/set2/heroes.png') -0px -130px; width: 150px; height: 150px; }
.hero-offer-portrait-large .heroamazonframe { background: url('/units/set2/heroes.png') -306px -130px; width: 150px; height: 150px; }
.hero-offer-portrait-large .herodreadknightframe { background: url('/units/set2/heroes.png') -153px -130px; width: 150px; height: 150px; }
.hero-offer-portrait-large .herohorselordframe { background: url('/units/set2/heroes.png') -762px -130px; width: 150px; height: 150px; }
.hero-offer-portrait-large .herobarbarianframe { background: url('/units/set2/heroes.png') -458px -130px; width: 150px; height: 150px; }
.hero-offer-portrait-large .heroassassinframe { background: url('/units/set2/heroes.png') -610px -130px; width: 150px; height: 150px; }
.hero-offer-portrait-large .herorangerframe { background: url('/units/set2/heroes.png') -0px -280px; width: 150px; height: 150px; }
.hero-offer-portrait-large .herodwarfframe { background: url('/units/set2/heroes.png') -153px -280px; width: 150px; height: 150px; }
.hero-offer-portrait-large .herosorceressframe { background: url('/units/set2/heroes.png') -458px -280px; width: 150px; height: 150px; }
.hero-offer-portrait-large .heronecromancerframe { background: url('/units/set2/heroes.png') -307px -280px; width: 150px; height: 150px; }

/* Scroll section with arrows and hero frames */
.hero-offer-scroll-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 280px;
}

.hero-offer-scroll-up,
.hero-offer-scroll-down {
  width: 98px;
  height: 32px;
  cursor: pointer;
  background-repeat: no-repeat;
}

.hero-offer-scroll-up {
  background: url('/interface4/updown.png') 0px -162px;
}

.hero-offer-scroll-down {
  background: url('/interface4/updown.png') 0px 0px;
}

.hero-offer-scroll-up:hover,
.hero-offer-scroll-down:hover {
  filter: brightness(1.2);
}

.hero-offer-scroll-viewport {
  width: 170px;
  height: 230px;
  overflow: hidden;
}

.hero-offer-scroll-content {
  width: 170px;
  transition: top 0.4s ease;
  position: relative;
  top: 0;
}

/* Hero frames side by side in rows (2 per row) - 75px each with 4px total margin = 79px x 2 = 158px per row */
.hero-offer-scroll-content > div {
  box-shadow: 1px 1px 2px #000;
  cursor: pointer;
  margin: 2px;
  float: left !important;
  display: block;
}

.hero-offer-scroll-content > div:hover {
  filter: brightness(1.1);
  box-shadow: 2px 2px 6px #000;
}

/* Title above the face selector. */
.hero-offer-select-title {
  font-size: 16px;
  font-weight: bold;
  color: #3d2815;
  text-shadow: 0px 1px 1px #faf2e1;
  margin-bottom: 8px;
  text-align: center;
}

/* Full-height face selector (replaces the paged scroller + up/down arrows).
   Faces float two per row; all 10 fit vertically now that the large portrait
   moved to the info column, so no paging is needed. */
.hero-offer-faces {
  width: 170px;
  overflow: hidden; /* contain the floated faces */
}

.hero-offer-faces > div {
  box-shadow: 1px 1px 2px #000;
  cursor: pointer;
  margin: 2px;
  float: left;
  display: block;
}

.hero-offer-faces > div:hover {
  filter: brightness(1.1);
  box-shadow: 2px 2px 6px #000;
}

/* Right section: Hero info */
.hero-offer-info-section {
  flex: 1;
  padding-left: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #5f3b1a;
  text-shadow: 0px 1px 1px #faf2e1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-content: start;
}

.hero-offer-instruction {
  font-size: 16px;
  margin-bottom: 15px;
  grid-column: 1 / -1;
}

.hero-offer-hero-name {
  font-size: 20px;
  margin-bottom: 10px;
  color: #3d2815;
  grid-column: 1;
  grid-row: 1;
}

.hero-offer-name-input {
  margin-bottom: 15px;
  grid-column: 1;
  grid-row: 2;
}

.hero-offer-name-input label {
  display: inline-block;
  width: 50px;
}

.hero-offer-name-input input {
  width: 110px;
  padding: 4px 8px;
  font-size: 14px;
  border: 1px solid #5a3d2b;
  background: #faf2e1;
  color: #3d2815;
}

.hero-offer-stats-desc {
  grid-column: 2;
  align-self: start;
  font-weight: normal;
  line-height: 1.35;
  padding-top: 6px;
}

.hero-offer-cost-row,
.hero-offer-level-row {
  margin-bottom: 5px;
  display: flex;
  gap: 10px;
  align-items: center;
  grid-column: 1;
}

.hero-offer-cost-row { grid-row: 3; }
.hero-offer-level-row { grid-row: 4; }

.hero-offer-stats {
  grid-column: 1;
  grid-row: 5;
  display: grid;
  grid-template-columns: 85px 85px;
  column-gap: 8px;
  row-gap: 4px;
  justify-content: start;
  /* Pack the icon rows at the top. Without this, a tall column-2 description
     (e.g. the Necromancer) stretches shared grid row 5, and this nested grid
     would spread its icon rows to fill it — leaving big vertical gaps. */
  align-content: start;
  margin-top: 4px;
  margin-bottom: 10px;
}

.hero-offer-stats > div {
  float: none !important;
  margin: 0 !important;
}

.hero-offer-cost-value {
  background: url('/icons/icons.png') no-repeat 1px -243px;
  width: 66px;
  height: 26px;
  display: inline-block;
  text-align: right;
  padding-right: 5px;
  font-size: 14px;
  font-weight: bold;
  line-height: 28px;
  color: #5f3b1a;
}

.hero-offer-allies-section {
  grid-column: 1 / -1;
  grid-row: 6;
  margin-top: 6px;
}

.hero-offer-allies-label {
  margin-bottom: 10px;
}

.hero-offer-allies-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.hero-offer-allies-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-top: 10px;
}

.hero-offer-allies-checkbox input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Footer with OK/Cancel buttons */
.hero-offer-footer {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  width: 371px;
  height: 49px;
  background: url('/interface4/basepopup.png') -292px -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.hero-offer-btn {
  background: url('/interface4/basepopup.png') -130px -48px;
  background-color: #dab676;
  width: 151px;
  height: 36px;
  border: none;
  cursor: pointer;
  color: #5f3b1a;
  font-weight: bold;
  font-size: 18px;
  font-family: sans-serif;
  line-height: 28px;
  margin-top: 6px;
}

.hero-offer-btn:active {
  background: url('/interface4/basepopup.png') -130px -4px;
  background-color: #dab676;
}

.hero-offer-btn.disabled {
  background: url('/interface4/basepopup.png') -130px -90px;
  background-color: #dab676;
  cursor: not-allowed;
}

.hero-offer-btn.disabled:active {
  background: url('/interface4/basepopup.png') -130px -90px;
}

/* OK/Cancel buttons */
button.ok1 {
  background: url('/interface4/basepopup.png') 0px -56px;
  width: 80px;
  height: 35px;
  border: none;
  cursor: pointer;
  color: #3d310a;
  font-weight: bold;
  font-size: 14px;
}

button.ok1:hover {
  background: url('/interface4/basepopup.png') 0px -91px;
}

/* Red "can't afford" variant of the .ok3 button. Matches legacy sprite
   position (-130px -90px on basepopup.png) so the disabled state keeps the
   same shape/dimensions as .ok3 and just swaps to the red graphic the
   layout already uses elsewhere. */
button.notok {
  background: url('/interface4/basepopup.png') -130px -90px;
  background-color: #dab676;
  width: 151px;
  height: 36px;
  border: 0;
  margin-top: 6px;
  margin-left: 0;
  cursor: not-allowed;
  color: #3d310a;
  font-weight: bold;
  font-size: 14px;
}

/* Hero offer popup styles */
.hero_content1 { width: 160px; height: 460px; }
.hero_content2 { width: 160px; height: 300px; }
.hero_content3 { width: 160px; height: 230px; overflow: hidden; }
.hero_scroller { width: 170px; height: 540px; transition: transform 0.3s ease; }
.hero_herodata { margin-left: 5px; width: 435px; height: 450px; }
.hero_fontsize { font-size: 14px; line-height: 1.4; }
.hero_bank { width: 130px; padding-top: 3px; font-size: 14px; }
.hero_lineheight { line-height: 24px; }

/* Up/down arrows for hero scroller */
.uparrow {
  width: 75px;
  height: 30px;
  background: url('/interface4/miscpanels.png') -0px -0px;
  cursor: pointer;
  float: left;
  margin-left: 2px;
}

.downarrow {
  width: 75px;
  height: 30px;
  background: url('/interface4/miscpanels.png') -75px -0px;
  cursor: pointer;
  float: left;
  margin-left: 2px;
}

/* City info in popup - center column */
.cty_info2 { width: 312px; height: 450px; padding: 5px; float: left; }
.cty_info3 { margin-bottom: 5px; border: solid 0px; }
div.popup_minimap { width: 300px; height: 300px; box-sizing: content-box; border: solid black 1px; background-color: #000000; float: left; margin-bottom: 5px; }
div.popup_minimap canvas { width: 300px; height: 300px; display: block; }

/* Vectoring toggle button */
div.vectortogg1 { width: 67px; height: 35px; background: url('/interface4/miscpanels.png') -448px 0px; float: left; margin: 0px 0px 10px 0px; cursor: pointer; }
div.vectortogg2 { width: 67px; height: 35px; background: url('/interface4/miscpanels.png') -448px -35px; float: left; margin: 0px 0px 10px 0px; cursor: pointer; }
div.vectortogg1:hover, div.vectortogg2:hover { filter: brightness(1.2); }

/* Gold cost icon */
.mbaseicon.cost {
  background: url('/interface4/mainpanels.png') -0px -287px;
  width: 70px;
  height: 30px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  color: #5f3b1a;
}

/* Treasury display - defined in icons.css, do not duplicate */
/* .tresury is in icons.css using icons.png sprite */
.tresury-large {
  background: url('/interface4/mainpanels.png') -0px -287px;
  width: 70px;
  height: 30px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  color: #5f3b1a;
}

/* Battle table structure (legacy) */
.battletable { width: 940px; height: 440px; }
.battletd1 { width: 124px; }
.battletd2 { width: 610px; height: 350px; }
.battletd3 { width: 180px; }

/* Battle margin classes (original) */
.battlemargin1 { float: left; margin: 0px 0px 5px 10px; }
.battlemargin2 { float: left; margin-left: 10px; }
.battlemargin7 { margin-left: 10px; margin-top: 20px; }
.battlemargin8 { float: left; margin-left: 10px; margin-bottom: 42px; }
.battlemargin9 { float: left; margin: 10px 0px 0px 10px; }
.battlemargin10 { text-align: left; width: 150px; margin: 0px 0px 0px 10px; }
.battlemargin11 { height: 206px; }

/* Battle list (player info) */
ul.battlelist { list-style: none; margin-left: -38px; width: 126px; padding: 0; color: #5f3b1a; }
ul.battlelist li { margin-bottom: 4px; color: #5f3b1a; font-family: arial; font-size: 12px; }

/* Unit display rows */
div.battleselectrow { width: 616px; }
div.battleselectrowstats { height: 12px; width: 616px; font-size: 10px; font-family: arial; float: left; color: #5f3b1a; }

div.selectrowunit { float: left; width: 77px; }
div.selectrowhp { float: left; width: 77px; font-size: 10px; color: #5f3b1a; font-family: arial; }

/* Group movement-bonus icons (shown above the group/ungroup button when
   the group's combined movespecials beat Standard on a given terrain).
   Sprite positions match the legacy interface4/miscpanels.png offsets. */
.symbol_De    { width: 16px; height: 12px; background: url('/interface4/miscpanels.png') -450px -74px no-repeat; float: left; }
.symbol_Flyer { width: 16px; height: 12px; background: url('/interface4/miscpanels.png') -467px -74px no-repeat; float: left; }
.symbol_Fo    { width: 16px; height: 12px; background: url('/interface4/miscpanels.png') -485px -74px no-repeat; float: left; }
.symbol_Hi    { width: 16px; height: 12px; background: url('/interface4/miscpanels.png') -502px -74px no-repeat; float: left; }
.symbol_Ic    { width: 16px; height: 12px; background: url('/interface4/miscpanels.png') -519px -74px no-repeat; float: left; }
.symbol_Sw    { width: 16px; height: 12px; background: url('/interface4/miscpanels.png') -536px -74px no-repeat; float: left; }
.symbol_Water { width: 16px; height: 12px; background: url('/interface4/miscpanels.png') -553px -74px no-repeat; float: left; }

/* Blood splash effect */
.symbol_blood {
  background: url('/interface4/miscpanels.png') -384px -64px;
  width: 64px;
  height: 64px;
  z-index: 6;
  display: none;
  position: absolute;
  top: 0;
  left: 7px;
  pointer-events: none;
  opacity: 0;
}

/* Toggled by JS when a unit takes damage. The animation is self-cleaning:
   starts at full opacity, fades out, and the element stays at opacity 0
   until the next round recreates the DOM. */
.symbol_blood.blood-show {
  display: block;
  animation: blood-splash 380ms ease-out forwards;
}

@keyframes blood-splash {
  0%   { opacity: 1; transform: scale(0.25); }
  21%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}

/* Unit that died this round. We avoid `filter` on the parent because it
   cascades to the blood splash inside and can't be undone by the child,
   making the splash look grey/dark. Instead dim only the unit sprite via
   a ::before overlay so the blood on top stays full-colour. */
.selectrowunit.unit-killed > div {
  position: relative;
}
.selectrowunit.unit-killed > div::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(40, 20, 20, 0.45);
  z-index: 5; /* below .symbol_blood (z-index:6) */
  pointer-events: none;
}

/* Ensure unit container is positioned for blood splash overlay */
div.selectrowunit > div {
  position: relative;
}

/* Shield icons (player colors) */
.shield_0 { background: url('/css/interface/transparent.png') no-repeat -230px -89px; width: 25px; height: 34px; float: left; }
.shield_1 { background: url('/css/interface/transparent.png') no-repeat -53px -89px; width: 25px; height: 34px; float: left; }
.shield_2 { background: url('/css/interface/transparent.png') no-repeat -153px -89px; width: 25px; height: 34px; float: left; }
.shield_3 { background: url('/css/interface/transparent.png') no-repeat -77px -89px; width: 25px; height: 34px; float: left; }
.shield_4 { background: url('/css/interface/transparent.png') no-repeat -205px -89px; width: 25px; height: 34px; float: left; }
.shield_5 { background: url('/css/interface/transparent.png') no-repeat -27px -89px; width: 25px; height: 34px; float: left; }
.shield_6 { background: url('/css/interface/transparent.png') no-repeat -2px -89px; width: 25px; height: 34px; float: left; }
.shield_7 { background: url('/css/interface/transparent.png') no-repeat -179px -89px; width: 25px; height: 34px; float: left; }
.shield_8 { background: url('/css/interface/transparent.png') no-repeat -102px -89px; width: 25px; height: 34px; float: left; }

/* Tiny shield icons for battle list */
.shield_tiny0 { background: url('/interface4/mainpanels.png') -159px -80px; float: left; height: 22px; width: 15px; }
.shield_tiny1 { background: url('/interface4/mainpanels.png') -175px -56px; float: left; height: 22px; width: 15px; }
.shield_tiny2 { background: url('/interface4/mainpanels.png') -191px -56px; float: left; height: 22px; width: 15px; }
.shield_tiny3 { background: url('/interface4/mainpanels.png') -192px -80px; float: left; height: 22px; width: 15px; }
.shield_tiny4 { background: url('/interface4/mainpanels.png') -159px -103px; float: left; height: 22px; width: 15px; }
.shield_tiny5 { background: url('/interface4/mainpanels.png') -176px -102px; float: left; height: 22px; width: 15px; }
.shield_tiny6 { background: url('/interface4/mainpanels.png') -193px -103px; float: left; height: 22px; width: 15px; }
.shield_tiny7 { background: url('/interface4/mainpanels.png') -159px -128px; float: left; height: 22px; width: 15px; }
.shield_tiny8 { background: url('/interface4/mainpanels.png') -156px -56px; float: left; height: 22px; width: 15px; }

/* Battle action (info panel) */
.battleaction {
  width: 180px;
  height: 420px;
  overflow-y: scroll;
  margin-top: 0px;
  text-align: left;
  position: absolute;
  border: solid 1px;
  display: none;
  margin-left: -20px;
  background-color: #f2d596;
}

/* Battle list (for viewing past battles) */
.battlelist {
  width: 475px;
  max-height: 460px;
  overflow-y: auto;
  text-align: left;
}

.battlebar1 {
  background: url('/interface4/miscpanels.png') -0px -132px;
  color: #5f3b1a;
  float: left;
  width: 455px;
  padding:1px;
  margin-bottom: 3px;
  cursor: pointer;
}


.battlebar2 {
  background: url('/interface4/miscpanels.png') -0px -170px;
  color: #5f3b1a;
  float: left;
  width: 455px;
  padding: 3px 10px;
  margin-bottom: 3px;
}

/* Toggle button container */
.battlelist_button_container {
  float: left;
  width: 90px;
  margin-left: 5px;
}

/* My battles button */
div.mybattles1 { width: 68px; height: 36px; background: url('/interface4/mainpanels.png') -416px -250px; float: left; margin-bottom: 5px; cursor: pointer; }
div.mybattles2 { width: 68px; height: 36px; background: url('/interface4/mainpanels.png') -484px -250px; float: left; margin-bottom: 5px; cursor: pointer; }

/* Team battles button */
div.teambattles1 { width: 68px; height: 36px; background: url('/interface4/mainpanels.png') -416px -215px; float: left; cursor: pointer; }
div.teambattles2 { width: 68px; height: 36px; background: url('/interface4/mainpanels.png') -484px -215px; float: left; cursor: pointer; }

/* Mini battle marker on minimap */
div.minibattle {
  background: url('/interface4/minimap-icons.png') -75px -0px;
  width: 9px;
  height: 9px;
  position: absolute;
  z-index: 25;
}

/* Battle sword icons */
.battlesword { background: url('/interface4/miscpanels.png') -333px -5px; width: 15px; height: 18px; float: left; margin-left: 3px; }
.defendsword { background: url('/interface4/miscpanels.png') -354px -2px; width: 18px; height: 22px; float: left; }

/* Battle buttons */
.ok3 {
  background: url('/interface4/basepopup.png') -130px -48px;
  width: 151px;
  height: 36px;
  border: 0px;
  background-color: #f1d28f;
  margin-top: 6px;
  margin-left: 0px;
  cursor: pointer;
}
.ok3:hover { background: url('/interface4/basepopup.png') -130px -4px; }
.ok3:focus { outline: none; box-shadow: none; }
.ok4 { background: url('/interface4/basepopup.png') -130px -4px; width: 151px; height: 36px; border: 0px; background-color: #f1d28f; margin-top: 6px; margin-left: 0px; }

.buttontext {
  width: 100%;
  height: 24px;
  font-family: sans-serif;
  font-size: 18px;
  font-style: normal;
  color: #5f3b1a;
  font-weight: bold;
  cursor: default;
  line-height: 28px;
}

/* Battle speed controls */
.battlespeed { width: 35px; height: 14px; float: left; margin: 10px; }
.battlespeeddrag { width: 150px; float: left; margin: 0px 0px 20px 10px; }
.battlespeeddrag input[type="range"] { width: 100%; }

/* Close button style */
.chatwin_close {
  width: 21px;
  height: 22px;
  float: right;
  margin-right: 5px;
  margin-top: 2px;
  background: url('/interface4/basepopup.png') -666px -31px;
  cursor: pointer;
}
.chatwin_close:hover { background: url('/interface4/basepopup.png') -666px -7px; }

/* .info_close — defined in city.css */

/* Info button */
.info1 {
  width: 58px;
  height: 41px;
  background: url(/interface4/miscpanels.png) 183px -70px;
  cursor: pointer;
}

.info1:hover { background: url(/interface4/miscpanels.png) 124px -70px;}

.sidewiki1 {
  background: url('/interface4/mainpanels.png') -282px -73px;
  width: 68px;
  height: 36px;
  cursor: pointer;
}

.sidewiki2 {
  background: url('/interface4/mainpanels.png') -282px -109px;
  width: 68px;
  height: 36px;
  cursor: pointer;
}


/* Round header text */
.roundhead { font-family: arial; color: #5f3b1a; font-weight: bold; font-size: 16px; }

/* Battle modifier icons (clearbaseicon style) */
.clearbaseicon {
  width: 56px;
  height: 26px;
  margin: 2px 4px 2px 2px;
  text-align: right;
  float: left;
  font-size: 14px;
  font-weight: bold;
  line-height: 28px;
  padding: 0px;
  clear: both;
}

/* Modifier icon backgrounds */
.wall { background: url('/icons/icons.png') no-repeat 1px -1269px; }
.siege { background: url('/icons/icons.png') no-repeat 1px -81px; }
.morale { background: url('/icons/icons.png') no-repeat 1px -1215px; }
.fear { background: url('/icons/icons.png') no-repeat 1px -837px; }
.g_ambush { background: url('/icons/icons.png') no-repeat 1px -675px; }
.ward { background: url('/icons/icons.png') no-repeat 1px -1162px; }
.leadership { background: url('/icons/icons.png') no-repeat 1px -1026px; }
.chaos { background: url('/icons/icons.png') no-repeat 1px -648px; }

/* Environment terrain icons */
.env_bridge { width: 150px; height: 150px; background: url('/enviroment/bridge.png'); background-size: 150px 150px; border: solid 1px; }
.env_catacomb { width: 150px; height: 150px; background: url('/enviroment/catacomb.png'); background-size: 150px 150px; border: solid 1px; }
.env_city { width: 150px; height: 150px; background: url('/enviroment/city.png'); background-size: 150px 150px; border: solid 1px; }
.env_desert { width: 150px; height: 150px; background: url('/enviroment/desert.png'); background-size: 150px 150px; border: solid 1px; }
.env_forest { width: 150px; height: 150px; background: url('/enviroment/forest.png'); background-size: 150px 150px; border: solid 1px; }
.env_hill { width: 150px; height: 150px; background: url('/enviroment/hill.png'); background-size: 150px 150px; border: solid 1px; }
.env_mountain { width: 150px; height: 150px; background: url('/enviroment/mountain.png'); background-size: 150px 150px; border: solid 1px; }
.env_ocean { width: 150px; height: 150px; background: url('/enviroment/ocean.png'); background-size: 150px 150px; border: solid 1px; }
.env_open { width: 150px; height: 150px; background: url('/enviroment/open.png'); background-size: 150px 150px; border: solid 1px; }
.env_razed { width: 150px; height: 150px; background: url('/enviroment/razed.png'); background-size: 150px 150px; border: solid 1px; }
.env_river { width: 150px; height: 150px; background: url('/enviroment/river.png'); background-size: 150px 150px; border: solid 1px; }
.env_ruin { width: 150px; height: 150px; background: url('/enviroment/ruin.png'); background-size: 150px 150px; border: solid 1px; }
.env_shore { width: 150px; height: 150px; background: url('/enviroment/shore.png'); background-size: 150px 150px; border: solid 1px; }
.env_snow { width: 150px; height: 150px; background: url('/enviroment/snow.png'); background-size: 150px 150px; border: solid 1px; }
.env_swamp { width: 150px; height: 150px; background: url('/enviroment/swamp.png'); background-size: 150px 150px; border: solid 1px; }
.env_temple { width: 150px; height: 150px; background: url('/enviroment/temple.png'); background-size: 150px 150px; border: solid 1px; }
.env_volcan { width: 150px; height: 150px; background: url('/enviroment/volcan.png'); background-size: 150px 150px; border: solid 1px; }
.env_water { width: 150px; height: 150px; background: url('/enviroment/water.png'); background-size: 150px 150px; border: solid 1px; }

/* Mini icons for battle list */
.micon { width: 28px; height: 26px; float: left; }
.micon.viewradius { background: url('/icons/icons.png') no-repeat 1px -1242px; }
.micon.undeadlore { background: url('/icons/icons.png') no-repeat 1px -1080px; }
.micon.city { background: url('/icons/icons.png') no-repeat 1px -27px; }
.micon.open { background: url('/icons/icons.png') no-repeat 1px -270px; }
.micon.forest { background: url('/icons/icons.png') no-repeat 1px -459px; }
.micon.hill { background: url('/icons/icons.png') no-repeat 1px 1px; }
.micon.desert { background: url('/icons/icons.png') no-repeat 1px -162px; }
.micon.swamp { background: url('/icons/icons.png') no-repeat 1px -810px; }
.micon.snow { background: url('/icons/icons.png') no-repeat 1px -621px; }
.micon.shore { background: url('/icons/icons.png') no-repeat 1px -135px; }
.micon.ocean { background: url('/icons/icons.png') no-repeat 1px -135px; }
.micon.mountain { background: url('/icons/icons.png') no-repeat 1px -135px; }

/* Hover effect for battle list table */
table.hover tr:hover { background-color: rgba(255, 255, 255, 0.1); }

/* Player color indicators */
.player-color-1 { color: #4a90d9; } /* Blue */
.player-color-2 { color: #e74c3c; } /* Red */
.player-color-3 { color: #2ecc71; } /* Green */
.player-color-4 { color: #f39c12; } /* Orange */
.player-color-5 { color: #9b59b6; } /* Purple */
.player-color-6 { color: #1abc9c; } /* Teal */
.player-color-7 { color: #e91e63; } /* Pink */
.player-color-8 { color: #795548; } /* Brown */
.player-color-0 { color: #888888; } /* Neutral */

/* ============================================
   BATTLE POPUP DIV-BASED LAYOUT STYLES
   ============================================ */

/* Battle list layout with minimap */
.battle-list-layout {
  display: flex;
  flex-direction: row;
  padding: 10px 10px 10px 10px;
  height: calc(100% - 50px);
  gap: 5px;
}

/* Minimap container in battle list - fixed 300x300 */
.battle-list-minimap-container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 2px solid #5f3b1a;
  background: #000000;
  overflow: hidden;
  flex-shrink: 0;
}

#battle-minimap-canvas {
  display: block;
  /* Size set dynamically by JS to maintain aspect ratio */
}


/* Battle list items */
.battle-list-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 4px 4px 4px;
  line-height: 26px;
  width: 100%;
}
.battle-list-row:hover { background-color: rgba(239, 234, 178, 0.3); }

.battle-list-row .battlesword {
  margin-right: 4px;
}

.battle-list-row .micon {
  float: none;
  flex-shrink: 0;
}

.battle-list-row .micon:first-of-type {
  margin-left: auto;
}

.battle-player-text {
  color: #5f3b1a;
  font-family: arial;
  font-size: 12px;
  min-width: 90px;
}

.battle-list-empty {
  color: #5f3b1a;
  font-family: arial;
  font-size: 14px;
  text-align: center;
  padding: 40px;
}

/* Main battle viewer layout (3-column) */
.battle-main-layout {
  display: flex;
  flex-direction: row;

  height: calc(100% - 35px);
  gap: 9px;
}

/* Battle viewer columns */
.battle-col-left {
  width: 140px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.battle-col-middle {
  width: 616px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.battle-col-right {
  width: 154px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Defender section at top, attacker at bottom. `overflow: hidden` creates a
   block formatting context so the float:left children (battleselectrowstats)
   are contained — without this, siblings like the tension/ambush bars can
   flow alongside the last defender row instead of below it. */
.battle-defender-section {
  height: 310px;
  overflow: hidden;
}

.battle-attacker-section {
  overflow: hidden;
}

.battle-defender-info {
  height: 300px;
}

.battle-attacker-info {
}

/* Player info in battle viewer */
.battle-player-info {
  margin-bottom: 10px;
}

.battlelist-info {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 126px;
}

.battlelist-info li {
  margin-bottom: 4px;
  color: #5f3b1a;
  font-family: arial;
  font-size: 12px;
}

.battle-role-label {
  color: #5f3b1a;
  font-weight: bold;
  font-size: 14px;
  margin-right: 4px;
}

.battle-player-name-text {
  color: #5f3b1a;
  font-weight: bold;
}

/* Unit separator between attacker and defender (legacy, still referenced elsewhere) */
.battle-unit-separator {
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, #5f3b1a, transparent);
  margin: 15px 0;
}

/* Critical-strike (ambush) bar — always visible above the main tension bar.
   Black shell by default; fills with green zones and shows the darts when the
   current round had an ambush phase. Same 0-100 scale. Green zone on the
   left = attacker's ambush chance (after defender's ward). Green zone on the
   right = defender's chance (mirrored). */
.battle-ambush-bar {
  width: 100%;
  flex-shrink: 0;
  clear: both;
  margin: 10px 0 0 0;
  pointer-events: none;
}

.battle-ambush-label {
  font-size: 11px;
  font-weight: bold;
  color: #f5e7b8;
  text-align: center;
  margin-bottom: 2px;
  letter-spacing: 0.5px;
}

.battle-ambush-bar.hit .battle-ambush-label {
  color: #ffd85a;
  animation: ambush-label-pulse 500ms ease-out;
}

@keyframes ambush-label-pulse {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 6px #ffd85a; }
}

.battle-ambush-bar-inner {
  position: relative;
  width: 100%;
  height: 12px;
  border: 1px solid #5f3b1a;
  border-radius: 6px;
  background: #2a1a0a;
  overflow: visible;
}

.battle-ambush-zone-att,
.battle-ambush-zone-def {
  position: absolute;
  top: 0;
  height: 100%;
  background: linear-gradient(to right, #1fa84c, #2ed167);
  transition: width 200ms ease-out;
}
.battle-ambush-zone-att { left: 0;  border-radius: 5px 0 0 5px; }
.battle-ambush-zone-def { right: 0; border-radius: 0 5px 5px 0; background: linear-gradient(to left, #1fa84c, #2ed167); }

.battle-ambush-dart {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  transform: translateY(-50%);
  transition: left 250ms cubic-bezier(0.22, 1, 0.36, 1), right 250ms cubic-bezier(0.22, 1, 0.36, 1), opacity 120ms ease;
  pointer-events: none;
}
.battle-ambush-dart.visible { opacity: 1; }

.battle-ambush-dart::before {
  content: '';
  position: absolute;
  top: -7px;
  left: -6px;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #2a1a0a;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.battle-ambush-dart.hit::before {
  background: #ffd85a;
  border-color: #7a4c00;
  animation: ambush-dart-hit 600ms ease-out;
}

@keyframes ambush-dart-hit {
  0%   { box-shadow: 0 0 0 0 rgba(255, 216, 90, 0.9), 0 1px 3px rgba(0,0,0,0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 216, 90, 0), 0 1px 3px rgba(0,0,0,0.6); }
  100% { box-shadow: 0 0 0 0 rgba(255, 216, 90, 0), 0 1px 3px rgba(0,0,0,0.6); }
}

.battle-ambush-pct {
  position: absolute;
  top: -14px;
  font-size: 10px;
  font-weight: bold;
  color: #9fe8b3;
  pointer-events: none;
}
.battle-ambush-pct-att { left: 0;  }
.battle-ambush-pct-def { right: 0; }

.battle-ambush-result {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 13px;
  font-weight: 900;
  color: #ffd85a;
  opacity: 0;
  pointer-events: none;
  letter-spacing: 1px;
}
.battle-ambush-result.visible {
  opacity: 1;
  animation: ambush-result-pop 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes ambush-result-pop {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  60%  { transform: translate(-50%, -120%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
}

/* Tension bar between attacker and defender. Shows the 0-100 roll result
   relative to the win-chance threshold so the player can see how close each
   round was. Built from a few stacked divs; the dart slides horizontally via
   CSS transition. */
.battle-tension-bar {
  position: relative;
  width: 100%;
  height: 14px;
  flex-shrink: 0;
  clear: both;
  margin: 20px 0 12px 0;
  border: 1px solid #5f3b1a;
  border-radius: 7px;
  background: #2a1a0a;
  overflow: visible;
}

.battle-tension-fill-def,
.battle-tension-fill-att {
  position: absolute;
  top: 0;
  height: 100%;
  transition: width 180ms ease-out;
}

.battle-tension-fill-def {
  left: 0;
  background: linear-gradient(to right, #1f3d7a, #3a6bd6);
  border-radius: 7px 0 0 7px;
}

.battle-tension-fill-att {
  right: 0;
  background: linear-gradient(to right, #c03030, #801414);
  border-radius: 0 7px 7px 0;
}

.battle-tension-threshold {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: #f5e7b8;
  transform: translateX(-1px);
  transition: left 180ms ease-out;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.battle-tension-dart {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: left 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 120ms ease;
  pointer-events: none;
}

.battle-tension-dart.visible {
  opacity: 1;
}

.battle-tension-dart::before {
  content: '';
  position: absolute;
  top: -9px;
  left: -7px;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid #2a1a0a;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.battle-tension-dart.att::before { background: #ffdede; border-color: #5a0a0a; }
.battle-tension-dart.def::before { background: #dee8ff; border-color: #0a1a5a; }

.battle-tension-dart.close::before {
  animation: tension-close-pulse 700ms ease-out 1;
}

@keyframes tension-close-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 231, 184, 0.9); }
  70%  { box-shadow: 0 0 0 10px rgba(245, 231, 184, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 231, 184, 0); }
}

.battle-tension-dart-roll {
  position: absolute;
  top: 10px;
  left: 0;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: bold;
  color: #f5e7b8;
  white-space: nowrap;
}

/* 0 / 100 labels at the bar endpoints */
.battle-tension-end {
  position: absolute;
  top: -14px;
  font-size: 10px;
  font-weight: bold;
  color: #f5e7b8;
  pointer-events: none;
}
.battle-tension-end-left  { left: 0;  }
.battle-tension-end-right { right: 0; }

/* Threshold percentage label — centred on the white threshold line */
.battle-tension-threshold-label {
  position: absolute;
  top: -14px;
  left: 1px;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: bold;
  color: #f5e7b8;
  white-space: nowrap;
  pointer-events: none;
}

/* Floating damage number that pops on a unit when it takes HP damage. Attached
   to the unit's sprite div (which is already position: relative) so it is
   completely decoupled from surrounding layout — the HP row below never moves.
   Starts at the centre of the unit and floats upward. Crisp outline via
   -webkit-text-stroke instead of a blurry text-shadow. */
.battle-damage-number {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 24px;
  font-weight: 900;
  color: #ff4848;
  -webkit-text-stroke: 1px #000;
  pointer-events: none;
  z-index: 12;
  animation: battle-dmg-float 750ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes battle-dmg-float {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  15%  { opacity: 1; transform: translate(-50%, -65%) scale(1.25); }
  35%  { opacity: 1; transform: translate(-50%, -90%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -170%) scale(0.95); }
}

/* Battle info button area */
.battle-info-btn {
  margin-bottom: 10px;
}

/* Battle buttons area */
.battle-buttons {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

/* Battle speed controls */
.battle-speed-area {
  margin-top: 10px;
  color: #5f3b1a;
  font-family: arial;
  font-size: 12px;
}

.battle-speed-label {
  color: #5f3b1a;
  font-weight: bold;
}

.battle-speed-value {
  color: #5f3b1a;
  margin-left: 5px;
}

.battle-speed-area input[type="range"] {
  width: 100%;
  margin-top: 5px;
}

/* Battle probability area */
.battle-prob-area {
  margin-top: 10px;
  color: #5f3b1a;
  font-family: arial;
  font-size: 12px;
}

.battle-prob-text {
  color: #5f3b1a;
  margin-bottom: 2px;
}

/* Battle environment/terrain display */
.battle-env-area,
.battle-terrain-area {
  margin-top: 10px;
}

.battle-terrain-label {
  color: #5f3b1a;
  font-family: arial;
  font-size: 12px;
  margin-bottom: 5px;
}

/* Battle round text and info */
.battle-round-header {
  color: #5f3b1a;
  font-family: arial;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  margin-bottom: 10px;
}

.battle-totals-display {
  display: flex;
  justify-content: space-between;
  color: #5f3b1a;
  font-family: arial;
  font-size: 12px;
  margin-top: 5px;
  padding: 0 50px;
}

/* Override default white text in popup - enforce dark brown */
.pop-content,
.pop-content * {
  color: #5f3b1a;
}

/* Fix specific elements that need different colors */
.pop-content .symbol_blood,
.pop-content .shield_0, .pop-content .shield_1, .pop-content .shield_2,
.pop-content .shield_3, .pop-content .shield_4, .pop-content .shield_5,
.pop-content .shield_6, .pop-content .shield_7, .pop-content .shield_8,
.pop-content .shield_tiny0, .pop-content .shield_tiny1, .pop-content .shield_tiny2,
.pop-content .shield_tiny3, .pop-content .shield_tiny4, .pop-content .shield_tiny5,
.pop-content .shield_tiny6, .pop-content .shield_tiny7, .pop-content .shield_tiny8 {
  color: transparent;
}

/* ========================================
   GAME LOBBY SCENE
   ======================================== */

.game-lobby {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--spacing-lg);
  max-width: 1200px;
  min-width:1024px;
  margin: 0 auto;
}

.game-lobby-map-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-gold);
}

.game-lobby-title {
  font-size: 1.2rem;
  color: var(--accent-gold);
}

.game-lobby-type {
  background: var(--bg-light);
  padding: 2px var(--spacing-xs);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.game-lobby-content {
  display: grid;
  margin:5px;
  grid-template-columns: auto 1fr auto;
  gap: var(--spacing-lg);
  flex: 1;
  overflow: hidden;
}

.section-title {
  font-size: 1.1rem;
  color: var(--accent-gold-light);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-color);
}

/* Map Selection */
.game-lobby-map-section {
  display: flex;
  flex-direction: column;
  margin:5px;
}

.map-preview-container {
  width: 260px;
  height: 260px;
  background: #c4a46a;
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--transition-fast);
  overflow: hidden;
}

.map-preview-container:hover {
  border-color: var(--accent-gold);
}

.map-preview-placeholder {
  color: var(--text-muted);
  text-align: center;
}

.map-preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.map-info {
  margin-top: var(--spacing-md);
}

.map-info-row {
  display: flex;
  justify-content: start;
  padding: 2px 0;
  font-size: 12px;
}

.map-info-label {
  color: var(--text-muted);
}

.map-info-value {
  color: var(--text-primary);
  font-weight: 600;
}

/* Player Slots */
.game-lobby-players-section {
  margin:5px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.player-slots {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player-slot {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--bg-panel);
  padding: 3px var(--spacing-sm);
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.player-slot.my-slot {
  border-color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.1);
}

.player-slot-color {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.player-slot-info {
  flex: 1;
  min-width: 0;
}

.secret-name-section {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(138,118,73,0.3);
}

.secret-name-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.player-slot-secret {
  width: 100%;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-light);
  color: var(--text-primary);
  box-sizing: border-box;
}

.player-slot-secret::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.player-slot-color-name {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.player-slot-name {
  color: var(--accent-gold);
  font-weight: 500;
}

.player-slot-select {
  width: 100%;
  max-width: 120px;
  font-size: 0.85rem;
  padding: 4px 8px;
}

.player-slot-actions {
  flex-shrink: 0;
}

.player-slot-actions .btn-small {
  padding: 4px 12px;
  font-size: 0.8rem;
}

.player-slot-team {
  background: var(--bg-light);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Joiner slot styles */
.player-slot-status {
  font-size: 0.9rem;
  padding: 2px 8px;
  border-radius: 4px;
}

.player-slot-status.slot-open {
  color: var(--accent-green);
}

.player-slot-status.slot-ai {
  color: var(--accent-blue);
  background: rgba(74, 144, 217, 0.2);
}

.player-slot-status.slot-closed {
  color: var(--text-muted);
  background: rgba(102, 102, 102, 0.2);
}

.player-slot-name.slot-taken {
  color: var(--accent-gold);
}

/* Joiner mode readonly elements */
.game-lobby.joiner-mode .map-preview-container.readonly {
  cursor: default;
}

.game-lobby.joiner-mode .map-preview-container.readonly:hover {
  border-color: var(--border-color);
}

.settings-readonly {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.setting-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
}

.setting-label {
  color: var(--text-secondary);
}

.setting-value {
  color: var(--text-primary);
  font-weight: 500;
}

/* Settings Section */
.game-lobby-settings-section {
  margin:5px;
  display: flex;
  flex-direction: column;
}

.settings-tabs {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--spacing-sm);
}

.settings-tab {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: var(--spacing-xs) var(--spacing-md);
  cursor: pointer;
  font-size: 0.9rem;
  border-radius: 4px;
  transition: all var(--transition-fast);
}

.settings-tab:hover {
  color: var(--text-primary);
  background: var(--bg-light);
}

.settings-tab.active {
  color: var(--accent-gold);
  background: var(--bg-light);
}

.settings-content {
  display: none;
}

.settings-content.active {
  display: block;
}

.settings-content .form-group {
  margin-bottom: var(--spacing-md);
}

.settings-content label {
  display: block;
  margin-bottom: var(--spacing-xs);
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.checkbox-group label {
  display: inline;
  margin-bottom: 0;
  cursor: pointer;
}

.checkbox-group.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox-group.disabled label {
  cursor: not-allowed;
}

.settings-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: var(--spacing-md) 0;
}

/* Action Buttons */
.game-lobby-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

/* Map Selector Modal */
.map-selector-search {
  margin-bottom: var(--spacing-md);
}

.map-selector-list {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.map-selector-item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--bg-light);
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.map-selector-item:hover {
  background: var(--bg-medium);
}

.map-selector-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--bg-panel);
}

.map-selector-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.map-selector-name {
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.map-selector-details {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Team header in player slots */
.team-header {
  font-weight: bold;
  color: var(--accent-gold-light);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-color);
}

.team-header:first-child {
  margin-top: 0;
}

.team-alliance-lock {
  font-size: 11px;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
}

/* Setup selection styling */
.setup-selection {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

/* ========================================
   MAP SELECTOR MODAL - ENHANCED
   ======================================== */

.map-selector-modal {
  width: 100%;
}

/* Override modal-content max-width when showing map selector */
#modal-content:has(.map-selector-modal) {
  max-width: 1200px;
  width: 95vw;
}

.map-selector-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.map-selector-filters #map-search {
  width: 180px;
}

.map-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.map-filter-btn {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.map-filter-btn:hover {
  background: var(--bg-medium);
  color: var(--text-primary);
}

.map-filter-btn.active {
  background: var(--accent-gold);
  color: var(--bg-dark);
  border-color: var(--accent-gold);
}

/* 3-column grid layout for map list */
.map-selector-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
  min-height: 500px;
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Map item styling */
.map-selector-item {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--bg-light);
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition-fast);
  border: 1px solid transparent;
}

.map-selector-item:hover {
  background: var(--bg-medium);
  border-color: var(--accent-gold);
}

.map-selector-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--bg-panel);
  flex-shrink: 0;
}

.map-selector-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
}

.map-selector-name {
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-selector-details {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.map-selector-meta {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-player-filters {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.map-player-filters label {
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

.map-player-filters input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* Responsive: single column on smaller screens */
@media (max-width: 700px) {
  .map-selector-modal {
    width: 100%;
  }

  .map-selector-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .map-selector-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Isometric/2D Render Toggle Button */
.btn-toggle-render {
  width: 40px;
  height: 20px;
  background: none;
  border: 1px solid #8a7649;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: var(--text-primary);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  transition: all var(--transition-fast);
}

.btn-toggle-render:hover {
  background-color: rgba(138, 118, 73, 0.3);
}

.btn-toggle-render:active {
  transform: translateY(0);
}

/* ===============================================
   Fight Order Popup
   =============================================== */

/* Fight order overlay - now handled by Popup component (popup.css) */
/* Legacy ID-based styles removed to avoid conflicts with .wb-popup-overlay */

/* Content area styling */
.fightorder-pop-content {
  background-image: url('/interface4/dropdownbg.png');
}

.fightorder-layout {
  padding: 10px;
  min-height: 450px;
  display: flex;
  gap: 10px;
}

/* Left column for tabs and unit stats */
.armylistbox {
  float: left;
  margin-bottom: 5px;
  padding: 2px;
  width: 130px;
  height: 446px;
}

.lefttab {
  cursor: pointer;
  border-top: solid 1px #8a6f32;
  border-left: solid 1px #8a6f32;
  border-bottom: solid 1px #8a6f32;
  border-right: solid 1px #8a6f32;

  margin-bottom: 5px;
  padding: 4px;
  width: 139px;
  float: left;
  font-size: 12px;
  font-weight: bold;
  color: #8a6f32;
  background: rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
  text-align: center;
  position:relative
}

.lefttab:hover {
  border-top: solid 1px #FFFFFF;
  border-left: solid 1px #FFFFFF;
  border-bottom: solid 1px #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
}

.lefttabactive {
  cursor: pointer;
  border-top: solid 1px #8a6f32;
  border-left: solid 1px #8a6f32;
  border-bottom: solid 1px #8a6f32;
  border-right: solid 1px #f3d493;
  position: relative;
  z-index: 2;
  margin-bottom: 5px;
  padding: 4px;
  width: 139px;
  float: left;
  font-size: 12px;
  font-weight: bold;

  background: rgba(240, 210, 144, 0.0);
  text-align: center;
  position: relative;
}

/* Right column: scrollable unit list */
.fightorderbox {
  width: 798px;
  height: 450px;
  overflow-y: auto;
  float: left;
  border: solid 1px #8a6f32;
  padding: 2px 0;
}

.fightorderlist {
  width: 124px;
  height: 64px;
  float: left;
  margin-left: 3px;
  margin-bottom: 3px;
  cursor: grab;
  background: url('/interface4/miscpanels.png') -3px -67px;
  padding: 0px;
  border: 2px solid transparent;
  user-select: none;
}

.fightorderlist:active {
  cursor: grabbing;
}

.fightorderlist:hover {
  padding: 1px 0px 0px 1px;
}

/* Drag clone - the element that follows the mouse */
.fightorderlist.drag-clone {
  opacity: 1 !important;
  cursor: grabbing;
}

/* Placeholder - shows where item will be dropped */
.fightorderlist.drag-placeholder {
  background: rgba(240, 210, 144, 0.3) !important;
  border: 2px dashed #f0d290 !important;
}

/* Original item while dragging - hidden */
.fightorderlist.dragging {
  display: none;
}

/* Mini fight order (quick reorder for selected group) */
.fightorderlistmini {
  width: 36px;
  height: 36px;
  margin: 4px;
  border: solid 1px #aa9d85;
  background: #f3ca75;
  float: left;
  cursor: move;
  padding: 2px;
  user-select: none;
  overflow: hidden;
}

.fightorderlistmini:hover {
  border-color: #8a7649;
  background: #f8d88a;
}

.fightorderlistmini.drag-clone {
  opacity: 1 !important;
  cursor: grabbing;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

.fightorderlistmini.drag-placeholder {
  background: rgba(240, 210, 144, 0.3) !important;
  border: 2px dashed #f0d290 !important;
}


/* Unit stats preview within armylistbox */
#fightorder-unitstats {

  overflow-y: auto;
}

#fightorder-unitstats .stats-placeholder {
  color: #8a7a6a;
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  font-style: italic;
}

#fightorder-unitstats .unit-detail {
  color: #d4c4a0;
  font-size: 12px;
}

#fightorder-unitstats .unit-detail-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #6f6143;
}

#fightorder-unitstats .unit-detail-name {
  font-weight: bold;
  font-size: 13px;
  text-align: center;
}

#fightorder-unitstats .unit-stats-grid {
  display: flex;
  flex-direction: inherit;
  gap: 5px;
}

#fightorder-unitstats .stat-row {
  display: flex;
  gap: 4px;
  justify-content: left;
  flex-wrap: wrap;
}

/* Footer - standard popup footer with OK/Cancel */
.fightorder-footer {
  clear: both;
}

/* ========================
   Popup Queue System
   ======================== */

/* Darkbox overlay for modal popups */
.popup-darkbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9998;
}

.popup-darkbox.hidden {
  display: none;
}

/* Popup window base styles */
.popup-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
  border: 2px solid var(--border-gold, #c9a84c);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  z-index: 9999;
  min-width: 350px;
  max-width: 600px;
}

.popup-window.hidden {
  display: none;
}

.popup-window-header {
  background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-gold, #c9a84c);
  border-radius: 6px 6px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popup-window-header span {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--accent-gold, #c9a84c);
}

.popup-close-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #888);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.popup-close-btn:hover {
  color: var(--text-primary, #fff);
}

.popup-window-body {
  padding: 20px;
  color: var(--text-primary, #ddd);
}

.popup-icon {
  width: 64px;
  height: 64px;
  float: left;
  margin-right: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.popup-text {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.popup-text strong {
  color: var(--accent-gold, #c9a84c);
}

.popup-window-footer {
  padding: 12px 20px 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* City Conquest Popup (uses small Popup component) */
.conquest-info {
  text-align: center;
  margin-bottom: 8px;
  color: #3f320c;
  font-size: 14px;
  font-weight: bold;
}

.conquest-info p {
  margin: 4px 0;
}

.conquest-gold-info {
  color: #5f3b1a;
  font-size: 13px;
}

.conquest-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.conquest-option {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background-color: #e8d4a0;
  border: 1px solid #8a7649;
  cursor: pointer;
}

.conquest-option:hover {
  background-color: #fffce7;
}

.conquest-option-text {
  flex: 1;
  color: #3f320c;
  font-size: 13px;
}

.conquest-option-text strong {
  font-size: 14px;
  display: block;
  margin-bottom: 2px;
}

.conquest-option-text p {
  margin: 0;
  font-weight: normal;
  color: #5f3b1a;
  font-size: 12px;
}

/* Hero Level Up Icon */
.hero-icon {
  width: 64px;
  height: 64px;
  border: 2px solid var(--border-gold, #c9a84c);
  border-radius: 4px;
}

/* City Lost Icon */
.city-lost-icon {
  background-color: #c0392b;
  border-radius: 4px;
}

/* City Conquest Popup - uses standard big popup (990x550) */

.city-conquest-popup .conquest-btn {
  cursor: pointer;
}

/* ================================
   CHAT POPUP STYLES
   Matching old version exactly
   ================================ */

/* Chat popup - uses standard big popup (990x550) */

.chat-popup .wb-popup-content {
  padding: 0;
}

.chat-popup .wb-popup-body-inner {
  padding: 0;
  height: 100%;
}

/* Legacy chat popup styles - kept for backwards compatibility */
.chatpopup {
  z-index: 900;
  top: 50%;
  margin-top: -275px;
  left: 50%;
  margin-left: -495px;
  text-align: left;
  position: absolute;
  width: 990px;
  height: 550px;
  padding: 0px;
  display: none;
}

#chat-popup-overlay.chatpopup {
  display: block;
}

/* Chat window content container */
#chatwin {
  width: 100%;
  height: 100%;
}

/* Player list boxes for send/show filters - exact match to old CSS */
.chatwin_plist {
  height: 250px;
  width: 160px;
  float: left;
  border: 1px solid;
  margin: 25px 0px 10px 10px;
  font-family: arial;
  line-height: 22px;
  background: #ffffff;
  padding: 5px;
  font-size: 12px;
  color: #000000;
  overflow-y: auto;
  text-shadow: none;
}

.chatwin_plist * {
  text-shadow: none;
}

.chatwin_plist label {
  display: block;
  cursor: pointer;
}

.chatwin_plist input[type="checkbox"] {
  margin-right: 5px;
  vertical-align: middle;
}

.chatwin_plist input[type="submit"] {
  margin-top: 10px;
  cursor: pointer;
}

/* Chat message display area - exact match to old CSS */
.chatwin_chat {
  height: 430px;
  width: 538px;
  float: left;
  border: 1px solid;
  margin: 25px 10px 10px 10px;
  padding: 5px;
  line-height: 18px;
  background: #ffffff;
  min-height: 80px;
  font-size: 12px;
  font-family: arial;
  color: #000000;
  text-align: left;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Text entry area - exact match to old CSS */
.chatwin_entrydiv {
  margin: 0px 0px 10px 10px;
  width: 352px;
  height: 126px;
  float: left;
  border: 1px solid;
}

.chatwin_entry {
  width: 346px;
  height: 120px;
  background-color: #FFFFFF;
  float: left;
  border: none;
  padding: 3px;
  font-family: arial;
  font-size: 12px;
  resize: none;
}

.chatwin_entry:focus {
  outline: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ==============================
   Map Browser Scene
   ============================== */
#scene-map-browser {
  overflow-y: auto;
}

.map-browser-container {
  padding: var(--spacing-md);
}

.map-browser-container > .panel {
  display: flex;
  flex-direction: column;
}

.map-browser-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.map-filter-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.map-filter-label {
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.map-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;
}

.map-filter-checkbox input[type="checkbox"] {
  accent-color: var(--accent-gold);
}

.map-browser-count {
  padding: var(--spacing-xs) var(--spacing-md);
  color: var(--text-muted);
  font-size: 0.85rem;
}

.map-browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}

.map-browser-card {
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  display: flex;
  flex-direction: column;
}

.map-browser-card:hover {
  border-color: var(--accent-gold);
  transform: translateY(-2px);
}

.map-browser-thumb {
  width: 100%;
  height: 240px;
  flex-shrink: 0;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.map-browser-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.map-browser-thumb.no-thumb {
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-light) 100%);
}

.map-browser-thumb.no-thumb::after {
  content: 'No Preview';
  color: var(--text-muted);
  font-size: 0.85rem;
}

.map-browser-card-body {
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.map-browser-card-name {
  font-weight: bold;
  color: var(--text-primary);
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-browser-card-meta {
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.map-browser-card-creator {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.map-browser-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.map-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
}

.map-tag-ladder {
  background: rgba(201, 162, 39, 0.2);
  color: var(--accent-gold-light);
  border: 1px solid var(--accent-gold);
}

.map-tag-scenario {
  background: rgba(74, 144, 217, 0.2);
  color: var(--accent-blue);
  border: 1px solid var(--accent-blue);
}

.map-tag-submitted {
  background: rgba(76, 175, 80, 0.2);
  color: var(--accent-green);
  border: 1px solid var(--accent-green);
}

.map-browser-card-stats {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.map-browser-card-actions {
  margin-top: auto;
  padding-top: var(--spacing-xs);
}

.map-browser-card-actions .btn {
  width: 100%;
}

/* ===================
   REPLAY VIEWER
   =================== */

.replay-viewer {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--text-primary);
}

.replay-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 16px;
  background: url('/interface4/contentback.png');
  border-bottom: 2px solid var(--border-gold);
  min-height: 40px;
}

.replay-back-btn {
  background: var(--bg-light);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
}

.replay-back-btn:hover {
  background: var(--accent-gold);
  color: var(--bg-dark);
}

.replay-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--accent-gold);
  flex: 1;
}

.replay-turn-inline {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-primary);
}

.replay-map-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  cursor: grab;
  background: #111;
}

.replay-map-container:active {
  cursor: grabbing;
}

.replay-map-inner {
  position: absolute;
  top: 0;
  left: 0;
}

.replay-controls {
  padding: 6px 16px;
  background: url('/interface4/contentback.png');
  border-top: 2px solid var(--border-gold);
  flex-shrink: 0;
}

.replay-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Sprite buttons from replaybuttons.png */
.replay-sprite-btn {
  cursor: pointer;
  float: left;
}
.btn_play1   { background: url('/interface4/replaybuttons.png') 0px -35px; width: 66px; height: 34px; }
.btn_play2   { background: url('/interface4/replaybuttons.png') -68px -35px; width: 66px; height: 34px; }
.btn_pause1  { background: url('/interface4/replaybuttons.png') 0px -105px; width: 66px; height: 34px; }
.btn_pause2  { background: url('/interface4/replaybuttons.png') -68px -105px; width: 66px; height: 34px; }
.btn_speedup1 { background: url('/interface4/replaybuttons.png') 0px -70px; width: 66px; height: 34px; }
.btn_speedup2 { background: url('/interface4/replaybuttons.png') -68px -70px; width: 66px; height: 34px; }
.btn_break1  { background: url('/interface4/replaybuttons.png') 0px -210px; width: 66px; height: 34px; }
.btn_break2  { background: url('/interface4/replaybuttons.png') -68px -210px; width: 66px; height: 34px; }
.btn_stepforward1 { background: url('/interface4/replaybuttons.png') 0px -140px; width: 66px; height: 34px; }
.btn_stepforward2 { background: url('/interface4/replaybuttons.png') -68px -140px; width: 66px; height: 34px; }
.btn_stepback1 { background: url('/interface4/replaybuttons.png') 0px -175px; width: 66px; height: 34px; }
.btn_stepback2 { background: url('/interface4/replaybuttons.png') -68px -175px; width: 66px; height: 34px; }
.btn_stop1   { background: url('/interface4/replaybuttons.png') 0px 0px; width: 66px; height: 34px; }
.btn_stop2   { background: url('/interface4/replaybuttons.png') -68px 0px; width: 66px; height: 34px; }

/* Text button (Perspective) - game style */
.replay-btn {
  background: var(--bg-light);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 4px 14px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  min-width: 40px;
  text-align: center;
}

.replay-btn:hover {
  background: var(--accent-gold);
  color: var(--bg-dark);
}

.replay-slider-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.replay-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  background: var(--border-color);
  border-radius: 3px;
  outline: none;
}

.replay-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent-gold);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.replay-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--accent-gold);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.replay-speed {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 100px;
  text-align: right;
}

.replay-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.replay-player-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-color);
  min-width: 140px;
}

.replay-player-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.replay-player-stat strong {
  font-size: 13px;
  color: var(--text-primary);
}

.replay-fog-overlay {
  background: rgba(0, 0, 0, 0.7);
  z-index: 190;
  pointer-events: none;
}

.replay-player-stat span {
  color: var(--text-secondary);
}

/* Ruin search result toast */
.replay-ruin-toast {
  position: absolute;
  opacity: 0;
  transform: translateY(10px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px;
  background-image: url('/interface4/dropdownbg.png');
  background-color: #f6dca4;
  border-top: solid 2px #f6e1a6;
  border-left: solid 2px #f6e1a6;
  border-right: solid 2px #8a7649;
  border-bottom: solid 2px #8a7649;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  border-radius: 4px;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}

.replay-ruin-toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.replay-ruin-toast-fade {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Player-elimination flash — centered banner near the top of the replay view */
.replay-death-toast {
  /* Panel look (background/border/text colour) comes from misc_gpopstyle so
     this matches the in-game elimination notice; only layout + position here. */
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%, -12px);
  opacity: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: #3a1e00;
  font-size: 16px;
  font-weight: bold;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.replay-death-toast-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.replay-death-toast-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.5);
  flex: 0 0 auto;
}

.replay-ruin-toast-title {
  font-size: 18px;
  font-weight: bold;
  color: #3a1e00;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  text-align: center;
}

.replay-ruin-toast-detail {
  font-size: 14px;
  font-weight: bold;
  color: #5a3e10;
  text-align: center;
}

.replay-ruin-toast-rewards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 2px;
}

.replay-ruin-reward {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: bold;
  color: #3a1e00;
}

.replay-ruin-reward-gold-icon {
  display: inline-block;
  width: 26px;
  height: 26px;
  background: url('/icons/icons.png') no-repeat 1px -243px;
  flex-shrink: 0;
}

.replay-ruin-reward-unit {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: auto;
  background-repeat: no-repeat;
  flex-shrink: 0;
  transform: scale(0.5);
  transform-origin: center center;
  margin: -8px;
}

/* ═══════════════════════════════════════════════════════════
   Home Page
   ═══════════════════════════════════════════════════════════ */

.home-page {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  max-width: 1400px;
  margin: 0 auto;
}


/* Left Sidebar */
.home-left-sidebar {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.sidebar-player-card {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-username {
  font-size: 16px;
  font-weight: bold;
  color: var(--accent-gold);
}

.sidebar-alliance {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.sidebar-membership {
  font-size: 11px;
  color: var(--accent-gold-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition-fast);
  text-decoration: none;
}

.sidebar-nav-item:hover {
  background: rgba(138, 108, 47, 0.12);
  color: var(--text-primary);
}

.sidebar-nav-icon {
  width: 16px;
  text-align: center;
  font-size: 14px;
}

/* Blinks when there are unread items. Animation lives on the parent
   `.sidebar-nav-item`; opacity cascades to children so envelope icon
   and "Messages" text fade together in one animation. No background
   flash — that was too aggressive. */
.sidebar-nav-item.has-unread {
  animation: sidebarUnreadBlink 0.9s ease-in-out infinite;
}
@keyframes sidebarUnreadBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.sidebar-badge {
  margin-left: auto;
  background: var(--bg-light);
  color: var(--text-secondary);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
}

.sidebar-credits {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 4px;
}

.sidebar-credits .tresury {
  width: 26px;
  height: 22px;
  float: none;
  margin: 0;
}

.sidebar-teams {
  padding: 4px 12px 8px;
  border-top: 1px solid var(--border-color);
}

.sidebar-team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
}

.sidebar-team-item:hover {
  color: var(--text-primary);
}

.sidebar-team-rating {
  color: var(--text-muted);
  font-size: 12px;
}

/* Sidebar Stats */
.sidebar-stats-section {
  padding: 8px 12px;
}

.sidebar-stats-section + .sidebar-stats-section {
  border-top: 1px solid var(--border-color);
}

.sidebar-stats-header {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.sidebar-stat-row {
  display: flex;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}

.sidebar-stat-label {
  color: var(--text-secondary);
  width: 40px;
}

.sidebar-stat-value {
  color: var(--accent-gold);
  font-weight: bold;
  width: 45px;
  text-align: right;
}

.sidebar-stat-wl {
  color: var(--text-muted);
  margin-left: auto;
  font-size: 11px;
}

/* Sidebar News */
.sidebar-news {
  padding: 8px 12px;
}

.sidebar-news-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 6px 0;
  border-bottom: 1px solid rgba(138, 118, 73, 0.15);
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
}

.sidebar-news-item:hover {
  color: var(--text-primary);
}

.sidebar-news-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-news-meta {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.sidebar-news-item:last-child {
  border-bottom: none;
}

.home-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.home-sidebar {
  width: 270px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Home Games Section */
.home-games-section {
  padding-bottom: var(--spacing-sm);
}

/* Welcome / empty states — give the panels real width and height when a
   freshly registered user has no active games or wall activity yet, so
   the home layout doesn't visibly collapse into narrow strips. */
.home-empty-games {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: var(--spacing-md) var(--spacing-sm);
  min-height: 120px;
}

.home-empty-icon {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
}

.home-empty-text {
  flex: 1;
  min-width: 0;
}

.home-empty-title {
  font-weight: bold;
  margin: 0 0 6px;
}

.home-empty-buttons {
  display: flex;
  gap: 8px;
  margin-top: var(--spacing-md);
  flex-wrap: wrap;
}

.wall-welcome .wall-post-body {
  opacity: 0.95;
}

.home-games-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--spacing-sm);
}

/* Game Row - horizontal card layout */
.game-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(138, 118, 73, 0.4);
  transition: background var(--transition-fast);
}
.game-row:last-child {
  border-bottom: none;
}

/* Map thumbnail link wrapper */
.game-row-thumb-link {
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.game-row-thumb-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background 0.15s;
  border-radius: 4px;
}
.game-row-thumb-link:hover::after {
  background: rgba(255, 255, 255, 0.25);
}
.game-row-thumb {
  width: 75px;
  height: 75px;
  border-radius: 4px;
  border: 1px solid #8a7649;
  display: block;
  object-fit: cover;
  background: #c4a46a;
}

/* Clickable shields hover */
.shield-clickable {
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}
.shield-clickable:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Play button in game row */
.game-row-play-btn {
  margin-top: 4px;
  font-size: 11px;
  padding: 2px 10px;
}

/* Delete button for finished games */
.game-row-delete-btn {
  margin-top: 4px;
  font-size: 11px;
  padding: 2px 10px;
  color: #ff4444;
  border-color: #ff4444;
  background: transparent;
}
.game-row-delete-btn:hover {
  background: #ff4444;
  color: #fff;
}

/* Clickable info/right areas */
.game-row-play {
  cursor: pointer;
}

/* Replay list rows — entire row is clickable */
.replay-row {
  cursor: pointer;
}
.replay-row:hover {
  background: rgba(138, 118, 73, 0.15);
}
.replay-player-chip {
  display: inline-block;
  margin-right: 6px;
  font-size: 0.85em;
}

/* Game info area */
.game-row-info {
  flex: 1;
  min-width: 0;
}
.game-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.game-row-name {
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-row-map {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Center shields box */
.game-row-shields {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px 8px;
}

.game-row-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Icons for ladder/simultaneous */
.game-row-icons {
  display: flex;
  gap: 4px;
  font-size: 14px;
  flex-shrink: 0;
  align-items: center;
}

/* Blinking unread-chat indicator in the my-games / home game list.
   Reuses the compose/chat sprite from the interface atlas (same glyph
   as the old game's icon_compose) so it matches the rest of the UI.
   Pulsed via a CSS animation since the sprite itself is static. */
.mygames-unread-chat {
  display: inline-block;
  width: 23px;
  height: 20px;
  background: url('/css/interface/transparent.png') no-repeat -126px -18px;
  animation: mygamesUnreadChatBlink 1s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes mygamesUnreadChatBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Right side: timer */
.game-row-right {
  text-align: right;
  flex-shrink: 0;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.game-row-status {
  margin-bottom: 2px;
}
.game-row-countdown {
  font-weight: bold;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.game-row-countdown .cd-line {
  display: block;
}
.game-row-countdown.urgent {
  color: var(--accent-red);
}
.game-row-countdown.expired {
  color: var(--accent-red);
  font-weight: bold;
}
.game-row-turn {
  font-size: 11px;
  color: var(--text-muted);
}

/* Shield wrapper: sprite shield + per-player life bar stacked vertically */
.shield-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Override float:left from sprite classes inside game rows */
.shield-wrap .shield-sprite {
  float: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Per-shield life bar (credit extensions) */
.shield-lifebar {
  width: 25px;
  height: 3px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  overflow: hidden;
}
.shield-lifebar-fill {
  height: 100%;
  background: var(--accent-green);
  border-radius: 2px;
}
.shield-lifebar-fill.low {
  background: #e67e22;
}
.shield-lifebar-fill.critical {
  background: var(--accent-red);
}

/* Eliminated shield (greyed out) */
.shield-eliminated {
  opacity: 0.4;
  filter: grayscale(1);
}

/* Override playerMe/playerActive sizes for large shields in game rows */
.shield-wrap .playerMe {
  width: 27px;
  height: 34px;
}
.shield-wrap .playerActive {
  width: 27px;
  height: 34px;
}

/* Shield timeout number overlay */
.shield-timeout {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 0 4px rgba(154, 42, 26, 0.8);
  line-height: 1;
}

/* Hourglass icon — shown when a player has away mode toggled on.
   Uses the icon_timeglass sprite from the old PHP app (transparent.png at -169px -2px). */
.shield-hourglass {
  position: absolute;
  bottom: 1px;
  right: 0px;
  width: 14px;
  height: 14px;
  background: url('/css/interface/transparent.png') no-repeat -169px -2px;
  pointer-events: none;
}

/* ============================================= */
/* Battle Calculator (Army Simulator)            */
/* ============================================= */

.calc-layout {
  display: flex;
  gap: 8px;
  min-height: 360px;
}

/* Left palette — all units in small 32px sprites */
.calc-left {
  width: 180px;
  flex-shrink: 0;
  border-right: 1px solid #8a7649;
  padding-right: 6px;
}
.calc-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  overflow-y: auto;
  max-height: 400px;
}
.calc-drag-unit {
  width: 32px;
  height: 32px;
  overflow: hidden;
  cursor: grab;
  border: 1px solid transparent;
  border-radius: 2px;
}
.calc-drag-unit:hover {
  border-color: #cba84a;
  background: rgba(203, 168, 74, 0.15);
}

/* Center — attacker/defender drop zones */
.calc-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calc-army-section {
  border: 1px solid #8a7649;
  border-radius: 4px;
  padding: 4px;
  transition: background 0.15s;
}
.calc-army-section.calc-drag-over {
  background: rgba(74, 144, 217, 0.08);
  border-color: #4a90d9;
}
/* Defender: 4 rows of 8 = 32 units max */
#calc-def-zone {
  min-height: 340px;
}
/* Attacker: 1 row of 8 */
#calc-atk-zone {
  min-height: 100px;
}
.calc-army-label {
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 2px;
  color: #5f3b1a;
}
.calc-army-area {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-content: flex-start;
}
.calc-empty-hint {
  color: #999;
  font-size: 11px;
  text-align: center;
  padding: 16px 0;
  width: 100%;
}
.calc-placed-unit {
  width: 64px;
  height: 78px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.calc-placed-unit:hover {
  outline: 2px solid #c20000;
  outline-offset: -1px;
}
.calc-unit-stats {
  font-size: 11px;
  font-weight: bold;
  color: #3a1e00;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}

/* Right — settings with terrain/wall icons */
.calc-right {
  width: 160px;
  flex-shrink: 0;
  border-left: 1px solid #8a7649;
  padding-left: 8px;
}
.calc-terrain-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.calc-terrain-btn {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 3px;
  padding: 1px;
}
.calc-terrain-btn:hover {
  border-color: #cba84a;
}
.calc-terrain-btn.calc-active {
  border-color: #4a90d9;
  background: rgba(74, 144, 217, 0.15);
}
.calc-wall-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.calc-wall-grid {
  display: flex;
  gap: 3px;
}
.calc-wall-btn {
  cursor: pointer;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  font-size: 11px;
  font-weight: bold;
  border: 2px solid transparent;
  border-radius: 3px;
  color: #5f3b1a;
}
.calc-wall-btn:hover {
  border-color: #cba84a;
}
.calc-wall-btn.calc-active {
  border-color: #4a90d9;
  background: rgba(74, 144, 217, 0.15);
}

/* Dismiss button for finished games */
.game-row-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 3px;
  flex-shrink: 0;
}
.game-row-dismiss:hover {
  color: var(--accent-red);
  background: rgba(255, 255, 255, 0.1);
}

/* Finished game row */
.game-row.finished {
  opacity: 0.75;
}
.game-item-status.finished-victory {
  background: var(--accent-green);
  color: white;
}
.game-item-status.finished-defeat {
  background: var(--accent-red);
  color: white;
}
.game-item-status.finished-completed {
  background: var(--bg-light);
  color: var(--text-muted);
}

.view-all-link {
  color: #2e5fa1;
  text-decoration: none;
  font-size: 12px;
}

.view-all-link:hover {
  text-decoration: underline;
}

/* Activity Wall */
.home-wall-section {
  /* Leave a small bottom gutter so the last wall-post (real event or the
     welcome tip on a fresh account) doesn't sit on top of the panel's
     border-image frame. The .panel frame visually extends inward at the
     bottom, so a flat `padding-bottom: 0` clipped the last entry. */
  padding-bottom: var(--spacing-sm);
}

.wall-post {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(138, 118, 73, 0.3);
}

.wall-post:last-child {
  border-bottom: none;
}

.wall-post-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.wall-event-icon {
  flex-shrink: 0;
  width: 104px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.wall-event-icon img {
  max-width: 54px;
  max-height: 54px;
  image-rendering: pixelated;
}

/* Medal icons from transparent.png sprite */
.icon_medal {
  background: url('/css/interface/transparent.png') no-repeat -72px -129px;
  width: 48px;
  height: 54px;
}
.icon_medaldead {
  background: url('/css/interface/transparent.png') no-repeat -3px -132px;
  width: 66px;
  height: 52px;
}

/* Elf/Devil sprites scaled for wall */
.wall-event-icon div.elf,
.wall-event-icon div.devil {
  transform: scale(0.75);
  transform-origin: center center;
}

.wall-post-content {
  flex: 1;
  min-width: 0;
}

.wall-post-header {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 2px;
}

.wall-post-header .wall-type-label {
  color: #f6e1a6;
}

.wall-post-header .wall-type-label.wall-label-won {
  color: #139813;
}

.wall-post-header .wall-type-label.wall-label-lost {
  color: #ae2f2f;
}

.wall-post-header .wall-type-label.wall-label-weekly {
  color: #042d6d;
}

.wall-post-header .wall-time {
  font-weight: normal;
}

.wall-post-body {
  font-size: 13px;
  line-height: 1.5;
}

.wall-post-detail {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.wall-post-detail a {
  color: #327aaa;
  text-decoration: none;
}

.wall-post-detail a:hover {
  text-decoration: underline;
}

.wall-post-players {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.wall-post-minimap {
  flex-shrink: 0;
  align-self: center;
}

.wall-post-minimap img {
  width: 75px;
  height: auto;
  border-radius: 3px;
  border: 1px solid #8a7649;
  image-rendering: pixelated;
}

.wall-post-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 2px;
}

.wall-time {
  font-size: 11px;
  color: var(--text-muted);
}

.wall-gamename {
  color: #2e5fa1;
  font-weight: bold;
}

.wall-post-users {
  font-size: 12px;
  color: var(--text-secondary);
}

.wall-username {
  color: var(--text-primary);
  font-weight: 600;
}

a.wall-username,
a.wall-user-link {
  color: #327aaa;
  text-decoration: none;
  font-weight: 600;
}

a.wall-username:hover,
a.wall-user-link:hover {
  text-decoration: underline;
  color: #7ec8e3;
}

.wall-alliance-tag {
  font-size: 11px;
  font-weight: bold;
  opacity: 0.85;
}

.wall-post-footer {
  display: flex;
  gap: var(--spacing-md);
}

.btn-link {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}

.btn-link:hover {
  color: var(--accent-blue);
}

/* Wall Comments */
/* Game Stats Slide-down Panel */
.wall-gamestats {
  margin-top: var(--spacing-sm);
  padding: 8px 0;
  border-top: 1px solid rgba(138, 118, 73, 0.3);
}

.gamestats-panel {
  font-size: 13px;
}

.gamestats-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.gamestats-left {
  flex-shrink: 0;
  width: 200px;
}

.gamestats-map img {
  width: 200px;
  height: auto;
  border: 2px solid #8a7649;
  border-radius: 4px;
  image-rendering: pixelated;
}

.gamestats-info {
  margin-top: 6px;
  font-size: 11px;
  color: #4a3f2a;
  line-height: 1.4;
}

.gamestats-info b {
  color: #2a2010;
}

.gamestats-right {
  flex: 1;
  min-width: 0;
}

/* Player color legend */
.gamestats-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: bold;
  color: #2a2010;
}

.gamestats-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gamestats-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.3);
}

/* 2-column grid for stat categories */
.gamestats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

.gamestats-category {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gamestats-cat-label {
  font-size: 10px;
  font-weight: bold;
  color: #5a4a30;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 1px;
}

.gamestats-bar-row {
  display: flex;
  align-items: center;
}

.gamestats-bar-track {
  flex: 1;
  height: 14px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  overflow: hidden;
}

.gamestats-bar-fill {
  height: 100%;
  min-width: 1px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  padding-left: 3px;
  transition: width 0.3s ease;
}

.gamestats-bar-value {
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

.wall-comments {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  margin-left: 112px;
}

.wall-comment {
  padding: var(--spacing-sm);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.5);
  margin-top:4px;

}

.wall-comment-username {
  font-weight: bold;
  margin-right: var(--spacing-xs);
}

.wall-comment-text {
  color: var(--text-primary);
}

.wall-comment-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: var(--spacing-xs);
}

.wall-view-all-comments {
  display: block;
  font-size: 12px;
  color: #5dade2;
  margin-bottom: 4px;
  cursor: pointer;
}

.wall-view-all-comments:hover {
  text-decoration: underline;
}

.wall-comment-form {
  display: flex;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}

.wall-comment-input {
  flex: 1;
  font-size: 12px;
}

/* Online Users List */
.online-users-list {
  max-height: 250px;
  overflow-y: auto;
  padding: var(--spacing-xs);
}

.online-user-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--spacing-sm);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.online-user-item:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Highlight when this user has sent us an unread direct message */
.online-user-item.has-unread {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  animation: online-user-pulse 1.2s ease-in-out infinite;
}

.online-user-item.has-unread .online-user-name {
  font-weight: bold;
  color: #2a1a00;
}

@keyframes online-user-pulse {
  0%, 100% { background: rgba(255, 255, 255, 0.75); }
  50%      { background: rgba(255, 255, 255, 1); }
}

/* Popup menu when clicking an online user */
.online-user-menu {
  min-width: 160px;
  background: #f6dca4;
  border: 1px solid #8a7649;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  padding: 4px;
}

.online-user-menu-header {
  font-weight: bold;
  font-size: 12px;
  color: #3a1e00;
  padding: 4px 8px 6px;
  border-bottom: 1px solid rgba(90, 74, 58, 0.35);
  margin-bottom: 4px;
}

.online-user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border: none;
  background: transparent;
  font-size: 12px;
  color: #3a1e00;
  cursor: pointer;
  border-radius: 2px;
}

.online-user-menu-item:hover:not(:disabled) {
  background: rgba(255, 220, 120, 0.55);
}

.online-user-menu-item:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Floating direct-chat window — lives on <body>, survives scene changes */
.direct-chat-window {
  position: fixed;
  width: 340px;
  height: 360px;
  background: #f6dca4;
  border: 1px solid #8a7649;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  user-select: none;
}

.direct-chat-header {
  background: linear-gradient(to bottom, #c4a46a, #8a7649);
  color: #fff;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  font-size: 12px;
}

.direct-chat-title {
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.direct-chat-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.direct-chat-close,
.direct-chat-min {
  background: transparent;
  color: #fff;
  border: none;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

.direct-chat-min {
  font-size: 20px;
  font-weight: bold;
}

.direct-chat-close:hover,
.direct-chat-min:hover { color: #ffdca0; }

/* Minimised tab on the right edge */
.direct-chat-tab {
  position: fixed;
  right: 0;
  bottom: 80px;
  background: linear-gradient(to bottom, #c4a46a, #8a7649);
  color: #fff;
  border: 1px solid #8a7649;
  border-right: none;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  padding: 8px 12px 8px 14px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.direct-chat-tab:hover {
  background: linear-gradient(to bottom, #d4b47a, #9a8659);
}

.direct-chat-tab-badge {
  background: #c0392b;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  border-radius: 10px;
  padding: 1px 6px;
  min-width: 16px;
  text-align: center;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.direct-chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px;
  min-height: 0;
  user-select: text;
}

.direct-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(90, 74, 58, 0.3);
  border-radius: 2px;
  min-height: 0;
}

.direct-chat-placeholder {
  text-align: center;
  color: #7a5a2a;
  padding: 12px;
  font-size: 12px;
}

.direct-chat-msg {
  margin: 3px 0;
  padding: 3px 5px;
  border-radius: 3px;
}

.direct-chat-msg.own {
  background: rgba(255, 220, 120, 0.35);
}

.direct-chat-msg-meta {
  font-size: 10px;
  color: #5a3a1a;
  margin-bottom: 1px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.direct-chat-msg-name { font-weight: bold; }

.direct-chat-msg-body {
  font-size: 12px;
  color: #2a1a08;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.3;
  font-weight: 400;
}

.direct-chat-msg-meta { font-weight: 400; }
.direct-chat-msg-name { font-weight: 400; }
.direct-chat-input { font-weight: 400; }

.direct-chat-input-row {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-shrink: 0;
}

.direct-chat-input {
  flex: 1;
  padding: 4px 6px;
  border: 1px solid #8a7649;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  color: #2a1a08;
}

.direct-chat-send {
  padding: 4px 10px;
  border: 1px solid #8a7649;
  background: #c4a46a;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  border-radius: 2px;
}

.direct-chat-send:hover { background: #a08450; }

/* Inline in-game volume panel (lives in the right action-button column) */
.ingame-volume-panel {
  margin-top: 14px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(138, 118, 73, 0.4);
  border-radius: 3px;
  width: 160px;
}

.ingame-volume-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
  font-size: 10px;
  color: #f6dca4;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.ingame-volume-row label {
  width: 48px;
  flex-shrink: 0;
  font-weight: 400;
}

.ingame-volume-row input[type="range"] {
  flex: 1;
  height: 14px;
  min-width: 0;
}

.ingame-volume-val {
  width: 28px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.online-friend-star {
  color: var(--accent-gold);
  font-size: 11px;
  width: 12px;
  text-align: center;
  flex-shrink: 0;
}

.online-friend-star-placeholder {
  width: 12px;
  flex-shrink: 0;
}

.online-flag {
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}

.online-flag-placeholder {
  width: 16px;
  flex-shrink: 0;
}

.online-ally-tag {
  font-size: 11px;
  font-weight: bold;
  flex-shrink: 0;
  min-width: 28px;
}

.online-user-name {
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-user-rating {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
}

/* Home Chat */
.home-chat {
  display: flex;
  flex-direction: column;
}

.home-chat-messages {
  height: 250px;
  overflow-y: auto;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 12px;
}

.home-chat-msg {
  padding: 2px 0;
  line-height: 1.4;
}

.home-chat-msg.own .home-chat-user {
  color: #6b4510;
}

.home-chat-user {
  font-weight: bold;
  margin-right: var(--spacing-xs);
  color: #2e5fa1;
}

.home-chat-text {
  color: var(--text-primary);
  word-break: break-word;
}

.home-chat-input {
  display: flex;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  border-top: 1px solid rgba(138, 118, 73, 0.4);
}

.home-chat-input .form-input {
  flex: 1;
  font-size: 12px;
}

/* Responsive: Stack columns on narrow screens */
@media (max-width: 900px) {
  .home-page {
    flex-direction: column;
  }

  .home-sidebar {
    width: 100%;
  }

  .game-row {
    gap: 8px;
    padding: 6px 8px;
  }
  .game-row-thumb {
    width: 50px;
    height: 50px;
  }
  .game-row-shields {
    padding: 2px 4px;
  }
  .game-row-right {
    min-width: 70px;
  }
}

/* ================================
   User Profile Page
   ================================ */

.user-profile-page {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.user-profile-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.sidebar-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.user-profile-header {
  padding: 20px;
}

.up-header-content {
  text-align: center;
}

.up-username {
  font-size: 24px;
  font-weight: bold;
  color: var(--accent-gold);
}

.up-alliance {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.up-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.up-membership {
  color: var(--accent-gold);
  font-weight: 600;
}

.up-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  padding: 12px;
}

.up-stat-block {
  text-align: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}

.up-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.up-stat-rating {
  font-size: 28px;
  font-weight: bold;
  color: var(--accent-gold);
}

.up-stat-detail {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ================================
   Forum Styles
   ================================ */

.forum-page {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  max-width: 1160px;
  margin: 0 auto;
}

.forum-container {
  width: 850px;
  flex-shrink: 0;
}

.forum-right-sidebar {
  width: 270px;
  flex-shrink: 0;
}

.forum-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.forum-header h2 {
  font-size: 18px;
  color: var(--text-primary);
}

.forum-back-btn {
  background: none;
  border: none;
  color: var(--accent-gold);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 1px 1px 1px #f1e4c8;
  padding: 4px 0;
}

.forum-back-btn:hover {
  color: var(--accent-gold-light);
  text-decoration: underline;
}

/* Section headers grouping multiple categories */
.forum-section-header {
  margin-top: 16px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(138, 108, 47, 0.25), rgba(138, 108, 47, 0.10));
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.forum-section-block {
  /* container for grouped categories — uses default flow */
}
.forum-section-block:first-child .forum-section-header,
.forum-section-block + .forum-section-header {
  margin-top: 0;
}

/* Category rows */
.forum-category {
  display: flex;
  padding: 12px;
  border-top: 1px solid #fbf2d3;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.forum-category:hover {
  background: rgba(138, 108, 47, 0.12);
}

.forum-category-info {
  flex: 1;
}

.forum-category-name {
  font-weight: bold;
  font-size: 14px;
  color: var(--text-primary);
}

.forum-category-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.forum-category-stats {
  text-align: right;
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 160px;
}

.forum-category-lastpost {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Thread rows */
.forum-thread {
  display: flex;
  padding: 10px 12px;
  border-top: 1px solid #fbf2d3;
  border-bottom: 1px solid rgba(138, 118, 73, 0.3);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.forum-thread:hover {
  background: rgba(138, 108, 47, 0.12);
}

.forum-thread.sticky {
  background: rgba(138, 108, 47, 0.08);
}

.forum-thread-info {
  flex: 1;
}

.forum-thread-title {
  font-weight: 600;
  color: var(--text-primary);
}

.forum-thread-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.forum-thread-stats {
  text-align: right;
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 140px;
}

.forum-sticky-badge {
  font-size: 11px;
  color: var(--accent-gold);
  font-weight: bold;
  margin-right: 4px;
}

.forum-locked-badge {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 6px;
}

/* Post blocks */
.forum-post {
  padding: 16px;
  border-bottom: 1px solid #d4bc88;
  border-top: 1px solid #f5f0da;
  background: rgba(255, 255, 255, 0.40);
  border-radius: 5px;
  margin-bottom: 5px;
}

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

.forum-post-author {
  font-weight: bold;
  color: var(--accent-gold);
}

.forum-post-date {
  font-size: 12px;
  color: var(--text-muted);
}

.forum-post-content {
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-weight: 400;
  font-size: 14px;
}

.forum-post-content a {
  color: var(--accent-gold);
  text-decoration: underline;
}

.forum-post-content a:hover {
  color: var(--accent-gold-light);
}

.forum-post-content blockquote {
  border-left: 3px solid var(--accent-gold);
  margin: 8px 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 0 4px 4px 0;
  font-style: italic;
  color: var(--text-secondary);
}

.forum-post-content blockquote b {
  font-style: normal;
  color: var(--accent-gold);
  font-size: 12px;
}

.forum-post-content pre {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 12px;
  margin: 8px 0;
  font-family: monospace;
  font-size: 12px;
  overflow-x: auto;
}

.forum-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 4px 0;
}

.forum-post-content ul, .forum-post-content ol {
  margin: 8px 0;
  padding-left: 24px;
}

.forum-post-content li {
  margin-bottom: 4px;
}

.forum-post-edited {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 6px;
}

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

.forum-post-actions button {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 3px;
  font-weight: 600;
  text-shadow: 1px 1px 1px #f1e4c8;
}

.forum-post-actions button:hover {
  background: rgba(138, 108, 47, 0.15);
  color: var(--text-primary);
}

/* Formatting toolbar */
.forum-toolbar {
  display: flex;
  gap: 4px;
  padding: 6px 0;
}

.forum-tb-btn {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
  border-radius: 3px;
  line-height: 1.4;
}

.forum-tb-btn:hover {
  background: rgba(138, 108, 47, 0.2);
  color: var(--text-primary);
  border-color: var(--accent-gold);
}

/* Reply / New thread form */
.forum-form {
  padding: 12px;
  border: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.05);
  margin-top: var(--spacing-md);
}

.forum-form-title {
  font-weight: bold;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.forum-form input[type="text"],
.forum-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-light);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 1px 1px 1px #f1e4c8;
  resize: vertical;
}

.forum-form textarea {
  min-height: 100px;
}

.forum-form input[type="text"] {
  margin-bottom: var(--spacing-sm);
}

.forum-form-buttons {
  margin-top: var(--spacing-sm);
  display: flex;
  gap: 8px;
}

/* Pagination */
.forum-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 12px;
}

.forum-page-btn {
  min-width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  background: var(--bg-light);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 1px 1px 1px #f1e4c8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.forum-page-btn:hover {
  background: var(--bg-medium);
}

.forum-page-btn.active {
  background: var(--accent-gold);
  color: var(--bg-light);
  border-color: var(--accent-gold);
  text-shadow: none;
}

.forum-page-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Edit form inline */
.forum-edit-form textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-light);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 1px 1px 1px #f1e4c8;
  resize: vertical;
}

.forum-edit-form .forum-form-buttons {
  margin-top: var(--spacing-sm);
}

.forum-empty {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--text-muted);
}

/* ================================
   Admin Panel Styles
   ================================ */

.admin-container {
  display: flex;
  gap: var(--spacing-md);
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--spacing-md);
  box-sizing: border-box;
}

.admin-sidebar {
  width: 200px;
  flex-shrink: 0;
}

.admin-content {
  flex: 1;
  min-width: 0;
  min-height: 400px;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-nav-btn {
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 1px 1px 1px #f1e4c8;
}

.admin-nav-btn:hover {
  background: rgba(138, 108, 47, 0.12);
}

.admin-nav-btn.active {
  background: rgba(138, 108, 47, 0.2);
  color: var(--accent-gold);
}

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

.admin-table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid var(--border-color);
  font-size: 12px;
  color: var(--text-muted);
}

.admin-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(138, 118, 73, 0.3);
}

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

/* Dashboard grid */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.admin-card {
  padding: 12px;
  border: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.04);
}

.admin-card-title {
  font-weight: bold;
  font-size: 13px;
  color: var(--accent-gold);
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 4px;
}

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

.admin-chart {
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.04);
}

.admin-chart-empty {
  padding: 14px 10px;
  border: 1px dashed var(--border-color);
  background: rgba(0, 0, 0, 0.02);
  text-align: center;
}

.admin-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}

.admin-chart-label {
  font-size: 11px;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-chart-value {
  font-size: 14px;
  font-weight: bold;
  color: var(--accent-gold);
}

.admin-chart-range {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted, #888);
  margin-top: 2px;
}

.admin-card-danger {
  border-color: var(--accent-red);
  background: rgba(154, 42, 26, 0.08);
}

.admin-card-danger .admin-card-title {
  color: var(--accent-red);
}

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

.admin-progress {
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  margin: 4px 0 6px;
  border-radius: 3px;
  overflow: hidden;
}

.admin-progress-bar {
  height: 100%;
  background: var(--accent-green);
  transition: width 0.3s ease;
}

.admin-progress-bar.danger {
  background: var(--accent-red);
}

.admin-online-list {
  font-size: 12px;
  line-height: 1.6;
}

.admin-online-user {
  color: var(--accent-gold);
}

.admin-status-free {
  color: var(--accent-green);
}

.admin-status-busy {
  color: var(--accent-gold);
  font-weight: bold;
}

.admin-row-danger {
  background: rgba(154, 42, 26, 0.1);
}

/* ═══════════════════════════════════════════════════════
   Country Flags Sprite
   ═══════════════════════════════════════════════════════ */

.flag {
  display: inline-block;
  width: 16px;
  height: 11px;
  background: url(/images/flags.png) no-repeat;
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
}

.flag.flag-ad {background-position: -16px 0}
.flag.flag-ae {background-position: -32px 0}
.flag.flag-af {background-position: -48px 0}
.flag.flag-ag {background-position: -64px 0}
.flag.flag-ai {background-position: -80px 0}
.flag.flag-al {background-position: -96px 0}
.flag.flag-am {background-position: -112px 0}
.flag.flag-an {background-position: -128px 0}
.flag.flag-ao {background-position: -144px 0}
.flag.flag-ar {background-position: -160px 0}
.flag.flag-as {background-position: -176px 0}
.flag.flag-at {background-position: -192px 0}
.flag.flag-au {background-position: -208px 0}
.flag.flag-aw {background-position: -224px 0}
.flag.flag-az {background-position: -240px 0}
.flag.flag-ba {background-position: 0 -11px}
.flag.flag-bb {background-position: -16px -11px}
.flag.flag-bd {background-position: -32px -11px}
.flag.flag-be {background-position: -48px -11px}
.flag.flag-bf {background-position: -64px -11px}
.flag.flag-bg {background-position: -80px -11px}
.flag.flag-bh {background-position: -96px -11px}
.flag.flag-bi {background-position: -112px -11px}
.flag.flag-bj {background-position: -128px -11px}
.flag.flag-bm {background-position: -144px -11px}
.flag.flag-bn {background-position: -160px -11px}
.flag.flag-bo {background-position: -176px -11px}
.flag.flag-br {background-position: -192px -11px}
.flag.flag-bs {background-position: -208px -11px}
.flag.flag-bt {background-position: -224px -11px}
.flag.flag-bv {background-position: -240px -11px}
.flag.flag-bw {background-position: 0 -22px}
.flag.flag-by {background-position: -16px -22px}
.flag.flag-bz {background-position: -32px -22px}
.flag.flag-ca {background-position: -48px -22px}
.flag.flag-catalonia {background-position: -64px -22px}
.flag.flag-cd {background-position: -80px -22px}
.flag.flag-cf {background-position: -96px -22px}
.flag.flag-cg {background-position: -112px -22px}
.flag.flag-ch {background-position: -128px -22px}
.flag.flag-ci {background-position: -144px -22px}
.flag.flag-ck {background-position: -160px -22px}
.flag.flag-cl {background-position: -176px -22px}
.flag.flag-cm {background-position: -192px -22px}
.flag.flag-cn {background-position: -208px -22px}
.flag.flag-co {background-position: -224px -22px}
.flag.flag-cr {background-position: -240px -22px}
.flag.flag-cu {background-position: 0 -33px}
.flag.flag-cv {background-position: -16px -33px}
.flag.flag-cy {background-position: -32px -33px}
.flag.flag-cz {background-position: -48px -33px}
.flag.flag-de {background-position: -64px -33px}
.flag.flag-dj {background-position: -80px -33px}
.flag.flag-dk {background-position: -96px -33px}
.flag.flag-dm {background-position: -112px -33px}
.flag.flag-do {background-position: -128px -33px}
.flag.flag-dz {background-position: -144px -33px}
.flag.flag-ec {background-position: -160px -33px}
.flag.flag-ee {background-position: -176px -33px}
.flag.flag-eg {background-position: -192px -33px}
.flag.flag-eh {background-position: -208px -33px}
.flag.flag-england {background-position: -224px -33px}
.flag.flag-er {background-position: -240px -33px}
.flag.flag-es {background-position: 0 -44px}
.flag.flag-et {background-position: -16px -44px}
.flag.flag-eu {background-position: -32px -44px}
.flag.flag-fi {background-position: -48px -44px}
.flag.flag-fj {background-position: -64px -44px}
.flag.flag-fk {background-position: -80px -44px}
.flag.flag-fm {background-position: -96px -44px}
.flag.flag-fo {background-position: -112px -44px}
.flag.flag-fr {background-position: -128px -44px}
.flag.flag-ga {background-position: -144px -44px}
.flag.flag-gb {background-position: -160px -44px}
.flag.flag-gd {background-position: -176px -44px}
.flag.flag-ge {background-position: -192px -44px}
.flag.flag-gf {background-position: -208px -44px}
.flag.flag-gh {background-position: -224px -44px}
.flag.flag-gi {background-position: -240px -44px}
.flag.flag-gl {background-position: 0 -55px}
.flag.flag-gm {background-position: -16px -55px}
.flag.flag-gn {background-position: -32px -55px}
.flag.flag-gp {background-position: -48px -55px}
.flag.flag-gq {background-position: -64px -55px}
.flag.flag-gr {background-position: -80px -55px}
.flag.flag-gs {background-position: -96px -55px}
.flag.flag-gt {background-position: -112px -55px}
.flag.flag-gu {background-position: -128px -55px}
.flag.flag-gw {background-position: -144px -55px}
.flag.flag-gy {background-position: -160px -55px}
.flag.flag-hk {background-position: -176px -55px}
.flag.flag-hm {background-position: -192px -55px}
.flag.flag-hn {background-position: -208px -55px}
.flag.flag-hr {background-position: -224px -55px}
.flag.flag-ht {background-position: -240px -55px}
.flag.flag-hu {background-position: 0 -66px}
.flag.flag-id {background-position: -16px -66px}
.flag.flag-ie {background-position: -32px -66px}
.flag.flag-il {background-position: -48px -66px}
.flag.flag-in {background-position: -64px -66px}
.flag.flag-io {background-position: -80px -66px}
.flag.flag-iq {background-position: -96px -66px}
.flag.flag-ir {background-position: -112px -66px}
.flag.flag-is {background-position: -128px -66px}
.flag.flag-it {background-position: -144px -66px}
.flag.flag-jm {background-position: -160px -66px}
.flag.flag-jo {background-position: -176px -66px}
.flag.flag-jp {background-position: -192px -66px}
.flag.flag-ke {background-position: -208px -66px}
.flag.flag-kg {background-position: -224px -66px}
.flag.flag-kh {background-position: -240px -66px}
.flag.flag-ki {background-position: 0 -77px}
.flag.flag-km {background-position: -16px -77px}
.flag.flag-kn {background-position: -32px -77px}
.flag.flag-kp {background-position: -48px -77px}
.flag.flag-kr {background-position: -64px -77px}
.flag.flag-kw {background-position: -80px -77px}
.flag.flag-ky {background-position: -96px -77px}
.flag.flag-kz {background-position: -112px -77px}
.flag.flag-la {background-position: -128px -77px}
.flag.flag-lb {background-position: -144px -77px}
.flag.flag-lc {background-position: -160px -77px}
.flag.flag-li {background-position: -176px -77px}
.flag.flag-lk {background-position: -192px -77px}
.flag.flag-lr {background-position: -208px -77px}
.flag.flag-ls {background-position: -224px -77px}
.flag.flag-lt {background-position: -240px -77px}
.flag.flag-lu {background-position: 0 -88px}
.flag.flag-lv {background-position: -16px -88px}
.flag.flag-ly {background-position: -32px -88px}
.flag.flag-ma {background-position: -48px -88px}
.flag.flag-mc {background-position: -64px -88px}
.flag.flag-md {background-position: -80px -88px}
.flag.flag-me {background-position: -96px -88px}
.flag.flag-mg {background-position: -112px -88px}
.flag.flag-mh {background-position: -128px -88px}
.flag.flag-mk {background-position: -144px -88px}
.flag.flag-ml {background-position: -160px -88px}
.flag.flag-mm {background-position: -176px -88px}
.flag.flag-mn {background-position: -192px -88px}
.flag.flag-mo {background-position: -208px -88px}
.flag.flag-mp {background-position: -224px -88px}
.flag.flag-mq {background-position: -240px -88px}
.flag.flag-mr {background-position: 0 -99px}
.flag.flag-ms {background-position: -16px -99px}
.flag.flag-mt {background-position: -32px -99px}
.flag.flag-mu {background-position: -48px -99px}
.flag.flag-mv {background-position: -64px -99px}
.flag.flag-mw {background-position: -80px -99px}
.flag.flag-mx {background-position: -96px -99px}
.flag.flag-my {background-position: -112px -99px}
.flag.flag-mz {background-position: -128px -99px}
.flag.flag-na {background-position: -144px -99px}
.flag.flag-nc {background-position: -160px -99px}
.flag.flag-ne {background-position: -176px -99px}
.flag.flag-nf {background-position: -192px -99px}
.flag.flag-ng {background-position: -208px -99px}
.flag.flag-ni {background-position: -224px -99px}
.flag.flag-nl {background-position: -240px -99px}
.flag.flag-no {background-position: 0 -110px}
.flag.flag-np {background-position: -16px -110px}
.flag.flag-nr {background-position: -32px -110px}
.flag.flag-nu {background-position: -48px -110px}
.flag.flag-nz {background-position: -64px -110px}
.flag.flag-om {background-position: -80px -110px}
.flag.flag-pa {background-position: -96px -110px}
.flag.flag-pe {background-position: -112px -110px}
.flag.flag-pf {background-position: -128px -110px}
.flag.flag-pg {background-position: -144px -110px}
.flag.flag-ph {background-position: -160px -110px}
.flag.flag-pk {background-position: -176px -110px}
.flag.flag-pl {background-position: -192px -110px}
.flag.flag-pm {background-position: -208px -110px}
.flag.flag-pn {background-position: -224px -110px}
.flag.flag-pr {background-position: -240px -110px}
.flag.flag-ps {background-position: 0 -121px}
.flag.flag-pt {background-position: -16px -121px}
.flag.flag-pw {background-position: -32px -121px}
.flag.flag-py {background-position: -48px -121px}
.flag.flag-qa {background-position: -64px -121px}
.flag.flag-re {background-position: -80px -121px}
.flag.flag-ro {background-position: -96px -121px}
.flag.flag-rs {background-position: -112px -121px}
.flag.flag-ru {background-position: -128px -121px}
.flag.flag-rw {background-position: -144px -121px}
.flag.flag-sa {background-position: -160px -121px}
.flag.flag-sb {background-position: -176px -121px}
.flag.flag-sc {background-position: -192px -121px}
.flag.flag-scotland {background-position: -208px -121px}
.flag.flag-sd {background-position: -224px -121px}
.flag.flag-se {background-position: -240px -121px}
.flag.flag-sg {background-position: 0 -132px}
.flag.flag-sh {background-position: -16px -132px}
.flag.flag-si {background-position: -32px -132px}
.flag.flag-sk {background-position: -48px -132px}
.flag.flag-sl {background-position: -64px -132px}
.flag.flag-sm {background-position: -80px -132px}
.flag.flag-sn {background-position: -96px -132px}
.flag.flag-so {background-position: -112px -132px}
.flag.flag-sr {background-position: -128px -132px}
.flag.flag-ss {background-position: -144px -132px}
.flag.flag-st {background-position: -160px -132px}
.flag.flag-sv {background-position: -176px -132px}
.flag.flag-sy {background-position: -192px -132px}
.flag.flag-sz {background-position: -208px -132px}
.flag.flag-tc {background-position: -224px -132px}
.flag.flag-td {background-position: -240px -132px}
.flag.flag-tf {background-position: 0 -143px}
.flag.flag-tg {background-position: -16px -143px}
.flag.flag-th {background-position: -32px -143px}
.flag.flag-tj {background-position: -48px -143px}
.flag.flag-tk {background-position: -64px -143px}
.flag.flag-tl {background-position: -80px -143px}
.flag.flag-tm {background-position: -96px -143px}
.flag.flag-tn {background-position: -112px -143px}
.flag.flag-to {background-position: -128px -143px}
.flag.flag-tr {background-position: -144px -143px}
.flag.flag-tt {background-position: -160px -143px}
.flag.flag-tv {background-position: -176px -143px}
.flag.flag-tw {background-position: -192px -143px}
.flag.flag-tz {background-position: -208px -143px}
.flag.flag-ua {background-position: -224px -143px}
.flag.flag-ug {background-position: -240px -143px}
.flag.flag-um {background-position: 0 -154px}
.flag.flag-us {background-position: -16px -154px}
.flag.flag-uy {background-position: -32px -154px}
.flag.flag-uz {background-position: -48px -154px}
.flag.flag-va {background-position: -64px -154px}
.flag.flag-vc {background-position: -80px -154px}
.flag.flag-ve {background-position: -96px -154px}
.flag.flag-vg {background-position: -112px -154px}
.flag.flag-vi {background-position: -128px -154px}
.flag.flag-vn {background-position: -144px -154px}
.flag.flag-vu {background-position: -160px -154px}
.flag.flag-wales {background-position: -176px -154px}
.flag.flag-wf {background-position: -192px -154px}
.flag.flag-ws {background-position: -208px -154px}
.flag.flag-ye {background-position: -224px -154px}
.flag.flag-yt {background-position: -240px -154px}
.flag.flag-za {background-position: 0 -165px}
.flag.flag-zm {background-position: -16px -165px}
.flag.flag-zw {background-position: -32px -165px}

/* Chat alliance tag */
.chat-ally-tag {
  font-size: 11px;
  font-weight: bold;
  margin-right: 3px;
}

/* Forum post alliance tag */
.forum-post-ally {
  font-size: 11px;
  font-weight: bold;
  margin-right: 3px;
}

/* Tournament Create Form */
.tournament-create-form { max-width: 700px; margin: 0 auto; }
.tournament-form-section { margin-bottom: var(--spacing-lg); }
.tournament-form-section-title { font-weight: bold; margin-bottom: var(--spacing-sm); border-bottom: 1px solid rgba(0,0,0,0.15); padding-bottom: 4px; }
.tournament-map-slot { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.tournament-map-slot img { width: 50px; height: 50px; image-rendering: pixelated; border-radius: 3px; }
.tournament-map-slot .map-name { flex: 1; }
.form-row { display: flex; gap: var(--spacing-md); }
.form-row .form-group { flex: 1; }
.text-error { color: #c0392b; font-size: 0.9rem; }

/* Tournament Join View */
.tournament-join-layout {
  display: grid;
  grid-template-columns: 320px 1fr 230px;
  gap: var(--spacing-md);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.tournament-join-info h3,
.tournament-join-center h3,
.tournament-join-players h3 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 1rem;
}
.tournament-info-table {
  width: 100%;
  font-size: 0.9rem;
  border-collapse: collapse;
}
.tournament-info-table td {
  padding: 3px 8px 3px 0;
  vertical-align: top;
}
.tournament-info-table td:first-child {
  color: var(--text-secondary);
  white-space: nowrap;
  width: 120px;
}
.tournament-join-maps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}
.tournament-join-map {
  display: flex;
  flex-direction: column;
  width: 100px;
}
.tournament-join-map img {
  width: 100px;
  height: 100px;
  image-rendering: pixelated;
  border: 1px solid var(--border-color);
  border-radius: 3px;
}
.tournament-join-map-round {
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.tournament-join-map-name {
  font-weight: bold;
  font-size: 0.85rem;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tournament-join-section h3 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 0.95rem;
}
.tournament-join-section p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
}
.tournament-join-player {
  padding: 2px 0;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 3px;
}
.tournament-join-player a {
  color: var(--text-primary);
  text-decoration: none;
}
.tournament-join-player a:hover {
  text-decoration: underline;
}

.clickable-minimap {
  cursor: pointer;
  transition: opacity 0.15s;
}
.clickable-minimap:hover {
  opacity: 0.8;
}

.team-select-modal {
  min-width: 420px;
  max-width: 500px;
  padding: var(--spacing-lg);
}
/* Apply panel frame styling to modal when team-select-modal is inside */
#modal-content:has(.team-select-modal) {
  background: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}
.team-select-modal th {
  padding: 4px 8px 4px 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}
.team-select-action .btn-disabled {
  opacity: 0.5;
  cursor: default;
}
#team-alliance-select {
  width: 100%;
}

@media (max-width: 900px) {
  .tournament-join-layout {
    grid-template-columns: 1fr;
  }
}

/* ============================================= */
/* News Popup                                    */
/* ============================================= */

.news-popup-layout {
  display: flex;
  gap: 12px;
  padding: 8px;
}

/* Shared popup minimap container - 300x300 black box, canvas centered at natural size */
.popup-minimap {
  width: 300px;
  height: 300px;
  border: 1px solid #5a3d2b;
  background: #000;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-minimap canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
}

.news-popup-text {
  flex: 1;
  font-size: 13px;
  font-weight: bold;
  color: #3a1e00;
  overflow-y: auto;
  max-height: 300px;
  line-height: 1.5;
}

.news-popup-text .news-line {
  padding: 1px 0;
}

.news-event-line {
  cursor: pointer;
}

.news-event-line:hover {
  color: #8a2a2a;
  text-decoration: underline;
}

/* Vision/eye icon at the start of an event line that has a map coordinate.
   Uses the canonical .micon.viewradius sprite (icons.png at native y=-1242,
   28×26 px, no background scaling) so it matches the rest of the game's
   iconography at full size. The line itself already has a hover handler
   that blinks the minimap marker; the icon gives the player a visual cue
   that the line is interactive. */
.news-event-marker {
  display: inline-block;
  width: 28px;
  height: 26px;
  margin-right: 6px;
  vertical-align: middle;
  background: url('/icons/icons.png') no-repeat 1px -1242px;
  opacity: 0.85;
  pointer-events: none;
}
.news-event-line:hover .news-event-marker {
  opacity: 1;
}

/* ============================================= */
/* History Popup                                  */
/* ============================================= */

.history-popup-layout {
  display: flex;
  flex-direction: column;
  padding: 50px 14px 14px;
  width: 920px;
  height: 510px;
  font-size: 13px;
  color: #3a1e00;
  box-sizing: border-box;
}

.history-tabs {
  display: flex;
  border-bottom: 2px solid #5a3d2b;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.history-tab {
  flex: 1;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: #5f3b1a;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 0px 1px 1px #faf2e1;
  outline: none;
  font-family: inherit;
}

.history-tab:hover {
  background: rgba(201, 162, 39, 0.2);
}

.history-tab.active {
  background: rgba(201, 162, 39, 0.3);
  border-bottom: 3px solid #c9a227;
  margin-bottom: -2px;
}

.history-tab-pane {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.history-tab-pane.active {
  display: flex;
}

/* Events tab: minimap left, event list right */
.history-tab-pane[data-pane="events"] {
  gap: 12px;
}

.history-minimap-wrap {
  width: 300px;
  height: 300px;
  border: 1px solid #5a3d2b;
  background: #000;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.history-minimap-wrap canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
}

.history-event-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
  font-weight: bold;
  line-height: 1.4;
}

.history-turn-header {
  border-bottom: 1px solid #8a6a3a;
  margin: 8px 0 4px 0;
  padding-bottom: 2px;
  color: #5f3b1a;
}

.history-event {
  margin: 4px 0 8px;
}

.history-event-receiver {
  font-style: italic;
  color: #6a4a2a;
  font-size: 11px;
  margin-bottom: 2px;
}

.history-event-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.history-event-marker {
  display: inline-block;
  width: 28px;
  height: 26px;
  flex-shrink: 0;
  background: url('/icons/icons.png') no-repeat 1px -1242px;
  opacity: 0.85;
  cursor: pointer;
}

.history-event-marker:hover { opacity: 1; }

.history-shield {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid #2a1a05;
  flex-shrink: 0;
}

.history-event-text { flex: 1; }

.history-empty {
  padding: 20px;
  text-align: center;
  color: #6a4a2a;
  font-style: italic;
}

/* Graph tabs */
.history-tab-pane[data-pane="army"],
.history-tab-pane[data-pane="city"],
.history-tab-pane[data-pane="gold"] {
  flex-direction: column;
}

.history-graph {
  width: 100%;
  flex: 1;
  min-height: 320px;
  background: #fdf6e3;
  border: 1px solid #8a6a3a;
}

.history-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 6px 4px 0;
  font-size: 12px;
  flex-shrink: 0;
}

.history-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.history-legend-swatch {
  width: 14px;
  height: 4px;
  display: inline-block;
}

/* Transactions tab */
.history-tab-pane[data-pane="transactions"] {
  flex-direction: column;
}

.history-trans-list {
  flex: 1;
  overflow-y: auto;
  font-weight: bold;
  padding-right: 6px;
}

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

.history-trans-table th {
  border-bottom: 2px solid #5a3d2b;
  padding: 4px 6px;
  text-align: left;
  background: rgba(201, 162, 39, 0.2);
  color: #5f3b1a;
}

.history-trans-table th.num,
.history-trans-table td.num {
  text-align: right;
  white-space: nowrap;
}

.history-trans-table td {
  padding: 3px 6px;
  vertical-align: top;
  border-bottom: 1px dotted #c2a578;
}

.history-trans-table tr.history-turn-header-row td {
  border-bottom: 1px solid #8a6a3a;
  background: rgba(201, 162, 39, 0.15);
  padding-top: 8px;
}

/* Temple blessing popup */
div.selectrowmove { float: left; width: 78px; }
div.unitintemple { height: 66px; width: 580px; margin-left: 15px; font-size: 10px; font-family: arial; overflow: hidden; }
div.statsintemple { height: 28px; width: 580px; margin-left: 15px; font-size: 10px; font-family: arial; overflow: hidden; }

/* Quick bless flash popup */
.quickbless-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.quickbless-box {
  background-image: url('/interface4/dropdownbg.png');
  border: 1px solid #5a3a1a;
  padding: 10px 15px;
  min-width: 200px;
  max-width: 700px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.quickbless-box.visible { opacity: 1; }

/* === Challenge live score widget ============================================
   Floats top-right over the map. Uses the same parchment panel style as
   the small in-game popups (misc_gpopstyle): dropdownbg.png background,
   #f6e1a6/#8a7649 bevel borders, dark-brown text (#3a1e00). Compact mode
   shows total + rank; hover reveals the breakdown.
============================================================================ */
.wb-challenge-score {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 50;
  width: 200px;
  padding: 8px 10px;
  background-image: url('/interface4/dropdownbg.png');
  border-top: solid 1px #f6e1a6;
  border-left: solid 1px #f6e1a6;
  border-right: solid 1px #8a7649;
  border-bottom: solid 1px #8a7649;
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.35);
  color: #3a1e00;
  font-family: arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  cursor: default;
  user-select: none;
}
.wb-challenge-score-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: #3a1e00;
}
.wb-challenge-score-total .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wb-challenge-score-total .val { font-size: 18px; }
.wb-challenge-score-rank {
  margin-top: 2px;
  font-size: 11px;
  color: #3a1e00;
  opacity: 0.85;
}
.wb-challenge-score-breakdown {
  margin-top: 6px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
  font-size: 11px;
  line-height: 1.5;
  color: #3a1e00;
  border-top: 1px solid transparent;
}
.wb-challenge-score:hover .wb-challenge-score-breakdown,
.wb-challenge-score.expanded .wb-challenge-score-breakdown {
  max-height: 280px;
  border-top: 1px solid #8a7649;
  padding-top: 4px;
}
.wb-challenge-score-row {
  display: flex;
  justify-content: space-between;
  color: #3a1e00;
}
.wb-challenge-score-row .pts { font-weight: bold; }
.wb-challenge-score-row.neg .pts { color: #8a0000; }
.wb-challenge-score-row.wb-me { font-weight: bold; }
.wb-challenge-score-divider {
  margin: 6px 0 4px 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #3a1e00;
  opacity: 0.75;
  border-top: 1px solid #8a7649;
  padding-top: 3px;
}
.wb-sb-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* shield_tiny* sprites elsewhere use float:left — inline-flex keeps them
     aligned with the name when used in the scoreboard row. */
}
.wb-sb-name .shield_tiny0, .wb-sb-name .shield_tiny1, .wb-sb-name .shield_tiny2,
.wb-sb-name .shield_tiny3, .wb-sb-name .shield_tiny4, .wb-sb-name .shield_tiny5,
.wb-sb-name .shield_tiny6, .wb-sb-name .shield_tiny7, .wb-sb-name .shield_tiny8 {
  float: none;
  margin-right: 2px;
}

/* === Challenge slot color swatches =========================================
   Tiny color pip next to the slot name in the admin challenge form. */
.wb-slot-swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border: 1px solid #5a3a1a;
  vertical-align: middle;
  margin-right: 4px;
}
.wb-slot-swatch-grey   { background: #888; }
.wb-slot-swatch-white  { background: #f4f4f4; }
.wb-slot-swatch-yellow { background: #f0d050; }
.wb-slot-swatch-red    { background: #c33030; }
.wb-slot-swatch-green  { background: #3c8c40; }
.wb-slot-swatch-blue   { background: #3060c0; }
.wb-slot-swatch-orange { background: #e08030; }
.wb-slot-swatch-teal   { background: #20a0a0; }
.wb-slot-swatch-black  { background: #202020; }

/* === Weekly Challenges admin =============================================
   Dark-brown text throughout so it reads on the parchment background.
   Layout values stay simple: spacing in pixels, borders in #b39e71. */
.ch-page { padding: 12px; color: var(--text-primary); }
.ch-page-title { margin-bottom: 12px; color: var(--text-primary); }
.ch-section-title { margin: 8px 0; color: var(--text-primary); }
.ch-empty { color: var(--text-primary); opacity: 0.7; padding: 6px 0; }
.ch-active-block {
  background: rgba(201, 162, 39, 0.10);
  border: 1px solid #b39e71;
  padding: 10px;
  margin-bottom: 16px;
}
.ch-active-label {
  font-size: 11px;
  color: var(--text-primary);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ch-form-host { margin-top: 16px; }
.ch-locked-badge {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.ch-card {
  padding: 10px 12px;
  border: 1px solid #b39e71;
  background: rgba(255, 255, 255, 0.18);
  margin-bottom: 8px;
  color: var(--text-primary);
}
.ch-card-header {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--text-primary);
}
.ch-card-meta { margin-top: 4px; color: var(--text-primary); font-size: 12px; }
.ch-card-desc { margin-top: 6px; color: var(--text-primary); font-size: 12px; opacity: 0.85; }
.ch-card code { color: var(--text-primary); background: rgba(0, 0, 0, 0.06); padding: 0 4px; border-radius: 2px; }

.ch-slot-empty {
  padding: 10px 12px;
  border: 1px dashed #b39e71;
  margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text-primary);
}

/* Form */
.ch-form {
  border: 1px solid #b39e71;
  padding: 14px;
  background: rgba(255, 255, 255, 0.20);
  color: var(--text-primary);
}
.ch-form-title { margin-bottom: 10px; color: var(--text-primary); }
.ch-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 12px;
  align-items: center;
  color: var(--text-primary);
}
.ch-grid label { color: var(--text-primary); font-weight: 600; }
.ch-grid input[type="text"],
.ch-grid input[type="date"],
.ch-grid input[type="number"],
.ch-grid textarea,
.ch-grid select {
  color: var(--text-primary);
}
.ch-hint { color: var(--text-primary); font-size: 11px; margin-top: 2px; opacity: 0.85; }
.ch-actions { margin-top: 14px; display: flex; gap: 8px; align-items: center; }
.ch-error { color: #8a0000; font-size: 12px; margin-left: 12px; font-weight: bold; }
.ch-error-inline { color: #8a0000; font-weight: bold; }
.ch-dim { color: var(--text-primary); opacity: 0.7; }

/* Map pick row (selected-map card or "Choose…" button) */
.ch-map-row { display: flex; align-items: center; }
.ch-map-card {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border: 1px solid #b39e71;
  background: rgba(255, 255, 255, 0.25);
  color: var(--text-primary);
  flex: 1;
}
.ch-map-card-thumb { width: 64px; height: 64px; object-fit: cover; border: 1px solid #b39e71; }
.ch-map-card-info { flex: 1; }
.ch-map-card-name { font-weight: bold; color: var(--text-primary); }
.ch-map-card-meta { font-size: 12px; color: var(--text-primary); opacity: 0.85; }

/* Slot config */
.ch-slots-title { margin: 14px 0 6px 0; color: var(--text-primary); }
.ch-slot-host { color: var(--text-primary); font-size: 13px; }
.ch-slot-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  color: var(--text-primary);
}
.ch-slot-table th {
  text-align: left; padding: 4px 8px;
  background: rgba(201, 162, 39, 0.12);
  color: var(--text-primary);
  border-bottom: 1px solid #b39e71;
}
.ch-slot-table td { padding: 4px 8px; color: var(--text-primary); }
.ch-slot-color { white-space: nowrap; }
.ch-slot-table select { color: var(--text-primary); }
.ch-dash { color: var(--text-primary); opacity: 0.5; }
.ch-slot-footnote {
  margin-top: 6px; color: var(--text-primary); font-size: 11px;
}

/* === Weekly Challenge widget on Home =====================================
   Day pills laid out as a 7-column row. Each pill shows day-of-week + an
   icon reflecting status, plus a small score/state line below. Colours
   come from the standard palette (dark-brown text against parchment). */
.home-challenge-section .wc-header { margin-bottom: 8px; }
.home-challenge-section .wc-title {
  font-size: 16px; font-weight: bold; color: var(--text-primary);
}
.home-challenge-section .wc-meta {
  font-size: 12px; color: var(--text-primary); opacity: 0.85;
}
.home-challenge-section .wc-description {
  font-size: 12px; color: var(--text-primary); opacity: 0.85;
  margin: 4px 0 10px 0;
}
.wc-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.wc-day {
  text-align: center;
  padding: 8px 4px;
  border: 1px solid #b39e71;
  background: rgba(255, 255, 255, 0.20);
  color: var(--text-primary);
  font-size: 11px;
  min-height: 60px;
}
.wc-day-label { font-weight: bold; font-size: 11px; }
.wc-day-icon { font-size: 18px; line-height: 22px; margin: 2px 0; }
.wc-day-score { font-size: 10px; opacity: 0.8; }

/* Status-specific colouring */
.wc-day.wc-completed { background: rgba(60, 140, 64, 0.18); border-color: #3c8c40; }
.wc-day.wc-in_progress { background: rgba(255, 200, 80, 0.25); border-color: #c9a227; }
.wc-day.wc-open { background: rgba(255, 255, 255, 0.35); border-color: #8a6a3a; }
.wc-day.wc-expired { background: rgba(0, 0, 0, 0.08); opacity: 0.6; }
.wc-day.wc-future { background: rgba(0, 0, 0, 0.05); opacity: 0.5; }

.wc-day[style*="cursor:pointer"]:hover {
  background: rgba(255, 230, 150, 0.40);
}

/* === Challenge end-of-game score tally =====================================
   Sits inside a small popup. Rows fade in one by one and count up. Final
   total shows in larger text below. */
.wb-tally { padding: 4px 14px; color: #3a1e00; font-family: arial, sans-serif; }
.wb-tally-header { text-align: center; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #8a7649; }
.wb-tally-result { font-size: 20px; font-weight: bold; color: #6b4510; }
.wb-tally-subline { font-size: 12px; opacity: 0.85; margin-top: 2px; }

.wb-tally-body { margin-bottom: 4px; }
.wb-tally-row {
  display: flex; justify-content: space-between;
  font-size: 13px; padding: 0;
  line-height: 1.35;
}
.wb-tally-label { color: #3a1e00; }
.wb-tally-points { font-weight: bold; color: #6b4510; font-variant-numeric: tabular-nums; }

.wb-tally-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 4px; border-top: 1px solid #8a7649; margin-top: 4px;
}
.wb-tally-total-label { font-size: 14px; font-weight: bold; color: #3a1e00; }
.wb-tally-total {
  font-size: 20px; font-weight: bold; color: #6b4510;
  font-variant-numeric: tabular-nums;
}

.wb-tally-extra-row { padding: 2px 12px !important; font-size: 13px; }
.wb-tally-extra-label { color: #3a1e00; }
.wb-tally-extra-value { font-weight: bold; color: #6b4510; }

.wb-tally-actions { text-align: center; margin-top: 6px; }

/* ── AI Tester Mode ──────────────────────────────────────────────────────── */
.tester-mode-btn {
  display: inline-block;
  vertical-align: middle;
  padding: 1px 6px;
  margin-left: 8px;
  font-size: 10px;
  font-weight: bold;
  line-height: 16px;
  color: #fff;
  background: #444;
  border: 1px solid #888;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}
.tester-mode-btn:hover { background: #555; }
.tester-mode-btn.tester-mode-active {
  background: #c00;
  border-color: #f44;
  color: #fff;
}

.tester-panel {
  position: absolute;
  top: 280px;
  left: 5px;
  z-index: 900;
  background: rgba(0,0,0,0.80);
  border: 1px solid #c00;
  border-radius: 4px;
  padding: 6px 10px;
  min-width: 160px;
  font-size: 12px;
  color: #fff;
  pointer-events: none;
}
.tester-panel-title {
  font-weight: bold;
  color: #f66;
  margin-bottom: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tester-panel-player {
  padding: 3px 6px;
  margin-bottom: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.05);
}
.tester-player-name {
  display: block;
  font-weight: bold;
  margin-bottom: 1px;
}
.tester-player-stat {
  display: inline-block;
  margin-right: 8px;
  color: #ccc;
  font-size: 11px;
}