/* =========================================================
   Valestris MODERN DARK MEDIEVAL CSS - IMPROVED
   ========================================================= */

/* ------------------ RESET & VARIABLES ------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Hide scrollbars globally while preserving scroll */
* {
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge */
}
*::-webkit-scrollbar {
  display: none;                   /* Chrome, Safari, Opera */
}

:root {
  /* Core Colors */
  --color-bg: #0d0b09;
  --color-surface: rgba(34, 28, 23, 0.9);
  --color-border: #3c2f25;
  --color-accent: #b89b5e;
  --color-accent-hover: #d1aa5b;
  --color-section-border: #6b5a46;
  --color-text: #d2c3a3;
  --color-text-muted: #8b7a62;
  --color-error: #a75a3a;
  
  /* Layout */
  --radius: 8px; /* Default is 12px*/
  --shadow: 0 0 25px rgba(0, 0, 0, 0.7);
  --transition: 0.3s ease;
  --bar-width: 600px;
  --bar-height: 50px;
  --sidebar-width: 550px;
  --selector-width: 80px;/*was 120*/
  
  /* Bar Border Pattern */
  --bar-border-pattern: url('/assets/patterns/darkherd.png');
  --bar-border-width: 0px;
  --bar-border-line: #2c2723;
  --bar-border-line-width: 0px;
  --bar-border-total: calc(var(--bar-border-width) + 2 * var(--bar-border-line-width));
  
  /* Typography */
  --fs-base: 20px;
  --fs-heading: 1.6rem;
  --fs-subheading: 1.2rem;
  --fs-small: 0.9rem;
}

/* ------------------ FONTS ------------------ */
@font-face {
  font-family: "Valestris";
  src: url("/assets/fonts/theo.ttf") format("truetype");/*was msb or bn.ttf*/
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ValestrisMes";
  src: url("/assets/fonts/theo.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Medieval Drop Cap Font */
@font-face {
  font-family: "Lohen";
  src: url("/assets/fonts/msb.ttf") format("truetype"); /*was lohen*/
  font-weight: normal;
  font-style: normal;
}

/* Drop Cap Styling for Message First Letters */
.message-drop-cap {
  font-family: 'Lohen', 'ValestrisMes', serif;
  font-size: 2.2em;
  line-height: 1;
  float: left;
  margin-right: 4px;
  margin-bottom: 2px;
  color: var(--color-accent);
  background: rgba(20, 16, 12, 0.6);
  border: 1px solid var(--color-border);
  padding: 3px 7px 5px 7px;
  border-radius: 3px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  /* Shape-outside creates space for text to flow around */
  shape-outside: margin-box;
}

/* Container for text after drop cap - aligns with bottom of drop cap */
.message-text-body {
  display: block;
  padding-top: 1.4em; /* Push text down to align with bottom of drop cap */
  margin-top: -1.4em; /* Compensate so overall layout isn't affected */
}

body {
  font-family: "Valestris", serif;
  font-size: var(--fs-base);
  color: var(--color-text);
  overflow: hidden;
  background-color: var(--color-bg);
  height: 100vh;
  width: 100vw;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/login.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
}

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

.link {
  cursor: pointer;
  text-decoration: underline;
  color: var(--color-accent);
  transition: color var(--transition);
}

.link:hover {
  color: var(--color-accent-hover);
}

/* ------------------ LOGIN / REGISTER ------------------ */
#login-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  z-index: 10;
  animation: fadeIn 0.8s ease-out;
}

#login-section,
#register-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem 2rem;
  width: 340px;
  text-align: center;
  overflow: hidden;
}

#login-section::before,
#register-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/auth-bg.jpg');  /* swap path to your image */
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--radius);
}

#login-section > *,
#register-section > * {
  position: relative;
  z-index: 1;
}

#login-section h2,
#register-section h2 {
  font-size: var(--fs-heading);
  color: var(--color-accent);
  margin-bottom: 1rem;
}

#login-section h3,
#register-section h3 {
  font-size: var(--fs-subheading);
  margin-bottom: 1.5rem;
  color: var(--color-text);
}

#login-section input,
#register-section input {
  display: block;
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #2a241d;
  background: #1a1411;
  color: var(--color-text);
  font-size: 1rem;
  font-family: "Valestris", serif;
  transition: border var(--transition), background var(--transition);
}

#login-section input::placeholder,
#register-section input::placeholder {
  color: var(--color-text-muted);
}

#login-section input:focus,
#register-section input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: #221b16;
}

#login-section button,
#register-section button {
  width: 100%;
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--color-accent);
  border: none;
  border-radius: 8px;
  color: #1a1411;
  font-weight: bold;
  font-family: "Valestris", serif;
  cursor: pointer;
  transition: background var(--transition), transform 0.1s ease;
}

#login-section button:hover,
#register-section button:hover {
  background: var(--color-accent-hover);
  transform: scale(1.02);
}

#login-section p,
#register-section p {
  margin-top: 1rem;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* ------------------ LOGIN SHOWCASE CAROUSEL ------------------ */
#login-showcase {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem 2rem;
  width: 340px;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

#login-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/auth-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--radius);
}

#login-showcase > * {
  position: relative;
  z-index: 1;
}

#login-showcase h2 {
  font-size: var(--fs-heading);
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}

#login-showcase-carousel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  min-height: 120px;
  flex: 1;
}

#login-showcase-page {
  flex: 1;
  min-height: 100px;
}

#login-showcase-title {
  font-size: var(--fs-subheading);
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

#login-showcase-text {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: 1.5;
}

#login-showcase-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

#login-showcase-dots .welcome-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background var(--transition);
}

#login-showcase-dots .welcome-dot.active {
  background: var(--color-accent);
}

/* ------------------ WELCOME OVERLAY ------------------ */
#welcome-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: welcomeFadeIn 0.6s ease-out;
}

#welcome-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/login.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  pointer-events: none;
}

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

#welcome-content {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem 2rem;
  width: 480px;
  max-width: 90vw;
  text-align: center;
  position: relative;
  z-index: 1;
}

#welcome-content h2 {
  font-size: var(--fs-heading);
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}

/* Carousel */
#welcome-carousel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  min-height: 120px;
}

#welcome-page {
  flex: 1;
  min-height: 100px;
}

#welcome-page-title {
  font-size: var(--fs-subheading);
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

#welcome-page-text {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.welcome-arrow {
  background: rgba(20, 16, 12, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  font-family: "Valestris", serif;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition);
  flex-shrink: 0;
}

.welcome-arrow:hover:not(:disabled) {
  background: rgba(40, 32, 24, 0.9);
  border-color: var(--color-accent);
}

.welcome-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Dot indicators */
#welcome-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 1.5rem;
}

.welcome-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background var(--transition);
}

.welcome-dot.active {
  background: var(--color-accent);
}

/* Spawn controls */
#welcome-spawn-controls {
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
  margin-top: 0.5rem;
}

#welcome-spawn-row {
  margin-bottom: 1rem;
}

#welcome-spawn-btn {
  width: 100%;
  padding: 0.85rem;
  background: var(--color-accent);
  border: none;
  border-radius: 8px;
  color: #1a1411;
  font-weight: bold;
  font-family: "Valestris", serif;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition), transform 0.1s ease;
}

#welcome-spawn-btn:hover:not(:disabled) {
  background: var(--color-accent-hover);
  transform: scale(1.02);
}

#welcome-spawn-btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

/* Friend request section */
#friend-request-section {
  border-top: 1px solid rgba(60, 47, 37, 0.5);
  padding-top: 1rem;
}

#friend-request-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

#friend-username-input {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #2a241d;
  background: #1a1411;
  color: var(--color-text);
  font-size: 0.85rem;
  font-family: "Valestris", serif;
  transition: border var(--transition), background var(--transition);
}

#friend-username-input::placeholder {
  color: var(--color-text-muted);
}

#friend-username-input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: #221b16;
}

#friend-username-input:disabled {
  opacity: 0.6;
}

#friend-request-btn,
#friend-cancel-btn {
  padding: 0.55rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: "Valestris", serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  white-space: nowrap;
}

#friend-request-btn {
  background: rgba(20, 16, 12, 0.8);
  color: var(--color-accent);
}

#friend-request-btn:hover:not(:disabled) {
  background: rgba(40, 32, 24, 0.9);
  border-color: var(--color-accent);
}

#friend-request-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

#friend-cancel-btn {
  background: rgba(50, 20, 15, 0.6);
  color: var(--color-error);
  border-color: var(--color-error);
}

#friend-cancel-btn:hover {
  background: rgba(70, 30, 20, 0.7);
}

#friend-request-status {
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  min-height: 1.2em;
  text-align: left;
}

#welcome-spawn-status {
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  color: var(--color-error);
  min-height: 1.2em;
}

/* In-game spawn request notification bar */
#spawn-request-notif {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8000;
  background: rgba(34, 28, 23, 0.95);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: welcomeFadeIn 0.4s ease-out;
}

#spawn-request-notif.hidden {
  display: none;
}

.spawn-notif-msg {
  color: var(--color-text);
  font-size: 0.9rem;
  white-space: nowrap;
}

.spawn-notif-buttons {
  display: flex;
  gap: 0.5rem;
}

.spawn-notif-accept,
.spawn-notif-decline {
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  border: none;
  font-family: "Valestris", serif;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--transition);
}

.spawn-notif-accept {
  background: var(--color-accent);
  color: #1a1411;
  font-weight: bold;
}

.spawn-notif-accept:hover {
  background: var(--color-accent-hover);
}

.spawn-notif-decline {
  background: rgba(60, 47, 37, 0.8);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.spawn-notif-decline:hover {
  background: rgba(80, 60, 45, 0.8);
  color: var(--color-text);
}

/* ------------------ FADE ANIMATION ------------------ */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes welcomeFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ------------------ TOOLTIPS ------------------ */
#tile-tooltip {
  position: fixed;
  pointer-events: none;
  max-width: 400px;
  max-height: 350px;
  background: linear-gradient(180deg, rgba(35, 28, 23, 0.95) 0%, rgba(25, 20, 17, 0.95) 100%);
  border: 1px solid rgba(107, 87, 63, 0.5);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  font-family: 'Theo', serif;
  font-size: 0.8rem;
  line-height: 1.5;
  display: none;
  z-index: 2000;
  overflow: hidden;
}

/* Tile info section at top of combined tooltip.
   Visual hierarchy: name is slightly larger; everything else uses one
   uniform size with weight + color carrying the rest of the emphasis. */
.tile-tooltip-info {
  padding: 0.4rem 0.55rem;
  color: var(--color-text);
  font-size: 0.78rem;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tile-tooltip-name {
  font-family: 'ValestrisMes', serif;
  font-size: 0.92rem;
  font-weight: bold;
  color: var(--color-accent);
}

/* Owner row: optional profile picture next to "Ruled by: <n>" + clan */
.tile-tooltip-owner-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.tile-tooltip-owner-pic {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #2a1f18;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

.tile-tooltip-owner-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.tile-tooltip-ruler {
  font-size: 0.78rem;
}

.tile-tooltip-ruler-name {
  color: var(--color-text);
  font-weight: bold;
}

.tile-tooltip-kingdom {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.tile-tooltip-troops {
  font-size: 0.78rem;
  color: var(--color-text);
}

/* Terrain row at the bottom: text line + small color bar underneath */
.tile-tooltip-terrain {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.1rem;
}

.tile-tooltip-terrain-text {
  font-family: 'ValestrisMes', serif;
  font-size: 0.78rem;
  font-weight: bold;
  color: #f0e6d2;
  letter-spacing: 0.3px;
}

.tile-tooltip-terrain-bar {
  width: 60px;
  height: 3px;
  border-radius: 2px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

.tile-tooltip-coords {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: normal;
  font-family: 'Theo', serif;
  letter-spacing: 0;
}

.tile-tooltip-coords-only {
  font-size: 0.78rem;
  color: var(--color-text);
  font-weight: bold;
  font-family: 'ValestrisMes', serif;
}

/* Legacy class - kept for any remaining call sites that may use it */
.tile-tooltip-meta {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

/* Old army hover tooltip - permanently hidden, merged into tile-tooltip */
#army-hover-tooltip {
  display: none !important;
}

/* ------------------ TOGGLE SWITCH ------------------ */
.switch {
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #141414;
  border-radius: 30px;
  transition: 0.4s;
}

.slider::before {
  content: "";
  position: absolute;
  height: 1.4em;
  width: 1.4em;
  left: 0.3em;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 20px;
  background: linear-gradient(40deg, #505050, #383838 70%);
  transition: 0.4s;
}

input:checked + .slider {
  background: #0f0f0f;
}

input:checked + .slider::before {
  left: calc(100% - 1.7em);
  background: #282829;
}

/* ------------------ TOP & BOTTOM BARS ------------------ */
#top-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/patterns/blackherd.png');
  background-repeat: repeat;
  background-size: 300px auto;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

#top-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /*width: var(--bar-width); /*old*/
  width: 400px;
  height: var(--bar-height);
  background: var(--color-surface);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Valestris', serif;
  box-shadow: var(--shadow);
  z-index: 1102;
  border-radius: 0 0 var(--radius) var(--radius);
  border: 1px solid var(--color-border);
  border-top: none;
}

/* Top Bar - 3-sided pattern border (LEFT, RIGHT, BOTTOM) */
#top-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: calc(-1 * var(--bar-border-total));
  right: calc(-1 * var(--bar-border-total));
  bottom: calc(-1 * var(--bar-border-total));
  background: var(--bar-border-pattern) repeat;
  background-size: var(--bar-border-width) var(--bar-border-width);
  border: var(--bar-border-line-width) solid var(--bar-border-line);
  border-top: none;
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  /* Clip to create 3-sided frame - cuts out center rectangle */
  clip-path: polygon(
    /* Outer shape */
    0% 0%,
    100% 0%,
    100% 100%,
    0% 100%,
    0% 0%,
    /* Inner cutout (creates the hole) */
    var(--bar-border-total) 0%,
    var(--bar-border-total) calc(100% - var(--bar-border-total)),
    calc(100% - var(--bar-border-total)) calc(100% - var(--bar-border-total)),
    calc(100% - var(--bar-border-total)) 0%,
    var(--bar-border-total) 0%
  );
}

#clock {
  font-size: 1.2rem;
  color: var(--color-accent);
  font-weight: bold;
  letter-spacing: 1px;
}

#account-name {
  position: absolute;
  right: 5.5rem;
  font-family: 'ValestrisMes', serif;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

#game-day-timer {
  position: absolute;
  left: 1rem;
  font-size: 0.9rem;
  color: #c75050;
  font-weight: bold;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

#reset-timer-btn {
  position: absolute;
  left: 7.5rem;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 1px solid #c75050;
  border-radius: 4px;
  background: rgba(199, 80, 80, 0.2);
  color: #c75050;
  font-size: 0.7rem;
  font-weight: bold;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, background 0.2s;
}

#reset-timer-btn:hover {
  opacity: 1;
  background: rgba(199, 80, 80, 0.4);
}

#logout-btn {
  position: absolute;
  right: 1rem;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  background: #1a1411;
  color: var(--color-text);
  cursor: pointer;
  font-family: 'Valestris', serif;
  transition: background var(--transition), transform 0.1s ease;
}

#logout-btn:hover {
  background: #2a1f18;
  transform: scale(1.02);
}

#settings-btn {
  position: absolute;
  right: 5.5rem;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: #1a1411;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  transition: all var(--transition);
}

#settings-btn:hover {
  background: #2a1f18;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ============================================================
   SETTINGS MENU
   ============================================================ */
.settings-menu {
  position: fixed;
  z-index: 2000;
  width: 380px;
  max-height: 80vh;
  background: linear-gradient(180deg, rgba(35, 28, 23, 0.98) 0%, rgba(25, 20, 17, 0.99) 100%);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 1px rgba(184, 155, 94, 0.3);
  font-family: 'Valestris', serif;
  overflow: hidden;
}

.settings-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.9rem;
  background: rgba(184, 155, 94, 0.15);
  border-bottom: 1px solid var(--color-border);
  cursor: grab;
  user-select: none;
}

.settings-menu-header:active {
  cursor: grabbing;
}

.settings-menu-title {
  font-family: 'ValestrisMes', serif;
  font-size: 1rem;
  color: var(--color-accent);
  font-weight: bold;
}

.settings-menu-close {
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--color-text-muted);
  transition: color 0.2s;
  line-height: 1;
}

.settings-menu-close:hover {
  color: var(--color-text);
}

.settings-menu-content {
  padding: 0.75rem;
  max-height: calc(80vh - 50px);
  overflow-y: auto;
}

.settings-section {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(60, 47, 37, 0.5);
}

.settings-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.settings-section-title {
  font-size: 0.8rem;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
}

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

.settings-label-hint {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

/* Toggle Switch */
.settings-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: #2a1f18;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.settings-toggle.active {
  background: rgba(184, 155, 94, 0.3);
  border-color: var(--color-accent);
}

.settings-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--color-text-muted);
  border-radius: 50%;
  transition: all 0.3s;
}

.settings-toggle.active::after {
  left: 22px;
  background: var(--color-accent);
}

/* Settings Select Dropdown */
.settings-select {
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  background: rgba(20, 15, 12, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 4px;
  cursor: pointer;
  min-width: 100px;
}

.settings-select:hover {
  border-color: var(--color-accent);
}

.settings-select:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Danger Zone Buttons */
.settings-danger-btn {
  padding: 0.4rem 0.9rem;
  background: rgba(120, 40, 30, 0.4);
  border: 1px solid var(--color-error);
  border-radius: 6px;
  color: var(--color-error);
  font-family: 'Valestris', serif;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
}

.settings-danger-btn:hover:not(:disabled) {
  background: rgba(140, 50, 35, 0.6);
}

.settings-danger-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.settings-cancel-btn {
  padding: 0.4rem 0.9rem;
  background: rgba(20, 16, 12, 0.8);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-muted);
  font-family: 'Valestris', serif;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
}

.settings-cancel-btn:hover {
  background: rgba(40, 32, 24, 0.9);
  color: var(--color-text);
}

/* Settings slider rows */
.settings-slider-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.settings-slider-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.settings-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--color-border, #3c2f25);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent, #b89b5e);
  border: 1px solid rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background 0.15s ease;
}

.settings-slider::-webkit-slider-thumb:hover {
  background: var(--color-accent-hover, #d1aa5b);
}

.settings-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent, #b89b5e);
  border: 1px solid rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.settings-slider-value {
  font-size: 0.72rem;
  color: var(--color-accent, #b89b5e);
  min-width: 1.8rem;
  text-align: center;
  font-family: 'ValestrisMes', Georgia, 'Times New Roman', serif;
}

.settings-apply-btn {
  padding: 0.2rem 0.6rem;
  font-size: 0.68rem;
  font-family: 'ValestrisMes', Georgia, 'Times New Roman', serif;
  background: rgba(140, 100, 60, 0.25);
  border: 1px solid rgba(184, 155, 94, 0.4);
  color: var(--color-accent, #b89b5e);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.settings-apply-btn:hover {
  background: rgba(140, 100, 60, 0.45);
  border-color: var(--color-accent-hover, #d1aa5b);
  color: var(--color-accent-hover, #d1aa5b);
}

/* ============================================================
   MINIMAP TAB (below top bar, centered)
   ============================================================ */
#minimap-tab {
  position: fixed;
  top: var(--bar-height);
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  height: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  color: var(--color-text-muted);
  font-family: 'Valestris', serif;
  font-size: 0.7rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 1101;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
}

#minimap-tab:hover {
  background: rgba(40, 33, 27, 0.95);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

#minimap-tab.active {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ============================================================
   REPORTS WINDOW
   ============================================================ */
.reports-window {
  position: fixed;
  z-index: 2000;
  width: 600px;
  height: 700px;
  background: linear-gradient(180deg, rgba(35, 28, 23, 0.98) 0%, rgba(25, 20, 17, 0.99) 100%);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 1px rgba(184, 155, 94, 0.3);
  font-family: 'ValestrisMes', serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.reports-window-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.9rem;
  background: rgba(184, 155, 94, 0.15);
  border-bottom: 1px solid var(--color-border);
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}

.reports-window-header:active {
  cursor: grabbing;
}

.reports-window-title {
  font-family: 'ValestrisMes', serif;
  font-size: 1rem;
  color: var(--color-accent);
  font-weight: bold;
}

.reports-window-close {
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--color-text-muted);
  transition: color 0.2s;
  line-height: 1;
}

.reports-window-close:hover {
  color: var(--color-text);
}

/* Controls bar (filter, sort, per-page) */
.reports-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(60, 47, 37, 0.5);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.reports-control-group {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.reports-control-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.reports-select {
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  background: rgba(20, 15, 12, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 4px;
  cursor: pointer;
  font-family: 'ValestrisMes', serif;
}

.reports-select:hover {
  border-color: var(--color-accent);
}

.reports-select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.reports-controls-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.reports-delete-all-btn {
  font-size: 0.65rem;
  padding: 0.2rem 0.5rem;
  background: rgba(120, 50, 40, 0.3);
  border: 1px solid rgba(120, 50, 40, 0.5);
  color: var(--color-text-muted);
  border-radius: 3px;
  cursor: pointer;
  font-family: 'ValestrisMes', serif;
  transition: all 0.2s;
}

.reports-delete-all-btn:hover {
  background: rgba(150, 60, 45, 0.4);
  color: var(--color-text);
  border-color: rgba(150, 60, 45, 0.7);
}

/* Report list */
.reports-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  min-height: 0;
}

.reports-list::-webkit-scrollbar {
  width: 6px;
}

.reports-list::-webkit-scrollbar-track {
  background: rgba(20, 15, 10, 0.5);
}

.reports-list::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

/* Individual report entry */
.report-entry {
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.35rem;
  background: rgba(42, 31, 24, 0.3);
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}

.report-entry:hover {
  background: rgba(50, 38, 30, 0.5);
  border-color: rgba(107, 87, 63, 0.3);
}

.report-entry.expanded {
  background: rgba(50, 38, 30, 0.5);
  border-color: rgba(107, 87, 63, 0.4);
}

.report-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.report-entry-type {
  font-size: 0.6rem;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.1rem 0.35rem;
  background: rgba(184, 155, 94, 0.1);
  border: 1px solid rgba(184, 155, 94, 0.2);
  border-radius: 3px;
  flex-shrink: 0;
}

.report-entry-title {
  font-size: 0.85rem;
  color: var(--color-text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-entry-date {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  text-align: right;
  line-height: 1.2;
}

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

.report-entry-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.report-delete-btn {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  transition: all 0.15s;
  background: none;
  border: none;
  font-family: 'ValestrisMes', serif;
}

.report-delete-btn:hover {
  color: var(--color-error);
  background: rgba(120, 50, 40, 0.2);
}

/* Expanded report body */
.report-entry-body {
  display: none;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(60, 47, 37, 0.4);
  font-size: 0.8rem;
  color: var(--color-text);
  line-height: 1.5;
}

.report-entry.expanded .report-entry-body {
  display: block;
}

/* Inventory report specific styles */
.report-inventory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.report-inv-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.4rem;
  background: rgba(20, 15, 12, 0.4);
  border-radius: 3px;
  font-size: 0.7rem;
}

.report-inv-item-name {
  color: var(--color-text-muted);
}

.report-inv-item-amount {
  color: var(--color-text);
  font-weight: bold;
}

.report-inv-item-change {
  font-size: 0.65rem;
  margin-left: 0.25rem;
}

.report-inv-item-change.positive {
  color: #6b9a6b;
}

.report-inv-item-change.negative {
  color: #b05050;
}

.report-inv-item-change.zero {
  color: var(--color-text-muted);
  font-weight: normal;
  opacity: 0.5;
}

.report-time-span {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
  font-style: italic;
}

/* Marketplace report styles */
.report-marketplace-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.3rem;
  font-size: 0.75rem;
}

.report-marketplace-event {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: bold;
  width: fit-content;
}

.report-marketplace-event.marketplace-dispatched {
  background: rgba(184, 155, 94, 0.2);
  color: var(--color-accent);
}

.report-marketplace-event.marketplace-delivered {
  background: rgba(90, 125, 60, 0.25);
  color: #7d9d5c;
}

.report-marketplace-event.marketplace-returned {
  background: rgba(100, 140, 180, 0.2);
  color: #6a9cc0;
}

.report-marketplace-event.marketplace-received {
  background: rgba(90, 125, 60, 0.25);
  color: #7d9d5c;
}

.report-marketplace-event.marketplace-incoming {
  background: rgba(180, 140, 60, 0.2);
  color: #c4a84a;
}

.report-marketplace-route,
.report-marketplace-type,
.report-marketplace-wagons,
.report-marketplace-resources,
.report-marketplace-sender {
  color: var(--color-text);
  font-size: 0.7rem;
}

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

.report-marketplace-ruler {
  color: var(--color-text-muted);
  font-size: 0.65rem;
}

/* Army / Engagement / Battle report styles */
.report-army-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.3rem;
  font-size: 0.75rem;
}

.report-army-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.1rem 0;
}

.report-army-label {
  color: var(--color-text-muted);
  flex-shrink: 0;
  min-width: 90px;
}

.report-army-value {
  color: var(--color-text);
}

.report-side-initiator {
  color: #c47040;
}

.report-side-defender {
  color: #5a8a5a;
}

.report-army-section-label {
  color: var(--color-accent);
  font-size: 0.7rem;
  margin-top: 0.35rem;
  margin-bottom: 0.1rem;
  border-bottom: 1px solid rgba(107, 87, 63, 0.2);
  padding-bottom: 0.15rem;
}

.report-army-unit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.1rem 0.3rem;
  background: rgba(20, 15, 12, 0.3);
  border-radius: 3px;
  font-size: 0.7rem;
}

.report-army-unit-name {
  color: var(--color-text);
}

.report-army-unit-troops {
  color: var(--color-text-muted);
  font-size: 0.65rem;
}

.report-battle-outcome {
  text-align: center;
  font-size: 0.85rem;
  font-weight: bold;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.3rem;
  letter-spacing: 1px;
}

.report-outcome-victory {
  color: #7ab87a;
  background: rgba(70, 120, 70, 0.15);
  border: 1px solid rgba(70, 120, 70, 0.3);
}

.report-outcome-defeat {
  color: #c06060;
  background: rgba(140, 50, 50, 0.15);
  border: 1px solid rgba(140, 50, 50, 0.3);
}

.report-outcome-reengage {
  color: #c4a84e;
  background: rgba(150, 130, 60, 0.15);
  border: 1px solid rgba(150, 130, 60, 0.3);
}

.report-outcome-siege {
  color: #a88050;
  background: rgba(140, 100, 50, 0.15);
  border: 1px solid rgba(140, 100, 50, 0.3);
}

.report-outcome-retreat {
  color: #8a8a6a;
  background: rgba(100, 100, 70, 0.12);
  border: 1px solid rgba(100, 100, 70, 0.25);
}

.report-outcome-enemy-retreat {
  color: #7ab87a;
  background: rgba(70, 120, 70, 0.12);
  border: 1px solid rgba(70, 120, 70, 0.25);
}

.report-outcome-standoff {
  color: #8a8a9a;
  background: rgba(90, 90, 110, 0.15);
  border: 1px solid rgba(90, 90, 110, 0.3);
}

.report-outcome-destroyed {
  color: #c06060;
  background: rgba(140, 50, 50, 0.2);
  border: 1px solid rgba(140, 50, 50, 0.4);
}

.report-battle-troops-section {
  margin-top: 0.2rem;
}

.report-battle-troop-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.15rem 0;
  font-size: 0.7rem;
}

.report-battle-arrow {
  color: var(--color-text-muted);
  font-size: 0.6rem;
}

.report-battle-loss {
  font-size: 0.65rem;
  flex-shrink: 0;
}

.report-battle-loss.negative {
  color: #b05050;
}

.report-battle-loss.zero {
  color: var(--color-text-muted);
  opacity: 0.5;
}

.report-fierce {
  color: #c47040;
  font-weight: bold;
}

/* Empty state */
.reports-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
  min-height: 150px;
}

.reports-empty-hint {
  font-size: 0.7rem;
  margin-top: 0.5rem;
  opacity: 0.6;
}

/* Page Wheel (horizontal scroll bar at bottom) */
.reports-page-wheel {
  display: flex;
  align-items: center;
  height: 36px;
  border-top: 1px solid rgba(60, 47, 37, 0.5);
  flex-shrink: 0;
  user-select: none;
  overflow: hidden;
}

.page-wheel-zone {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  cursor: pointer;
  transition: background 0.15s;
  overflow: hidden;
  padding: 0 0.4rem;
}

.page-wheel-left {
  justify-content: flex-end;
  gap: 0.5rem;
}

.page-wheel-right {
  justify-content: flex-start;
  gap: 0.5rem;
}

.page-wheel-zone:hover:not(.disabled) {
  background: rgba(184, 155, 94, 0.06);
}

.page-wheel-zone.disabled {
  cursor: default;
  opacity: 0.3;
}

.page-wheel-center {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 100%;
  border-left: 1px solid rgba(60, 47, 37, 0.4);
  border-right: 1px solid rgba(60, 47, 37, 0.4);
  background: rgba(184, 155, 94, 0.05);
}

.page-wheel-current {
  font-family: 'ValestrisMes', serif;
  font-size: 0.9rem;
  color: var(--color-accent);
  font-weight: bold;
  min-width: 1.2rem;
  text-align: center;
}

.page-wheel-info {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.page-wheel-num {
  font-family: 'ValestrisMes', serif;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  border-radius: 3px;
  transition: all 0.15s;
}

.page-wheel-num:hover {
  color: var(--color-accent);
  background: rgba(184, 155, 94, 0.15);
}

/* Pages further from current are progressively dimmer */
.page-wheel-num.dist-1 {
  opacity: 0.9;
  font-size: 0.75rem;
}

.page-wheel-num.dist-2 {
  opacity: 0.55;
  font-size: 0.7rem;
}

.page-wheel-num.dist-3 {
  opacity: 0.3;
  font-size: 0.65rem;
}

/* ------------------ ARMY HOVER TOOLTIP ------------------ */
/* Army section divider (between tile info and army list in combined tooltip) */
.army-hover-divider {
  height: 1px;
  background: rgba(107, 87, 63, 0.4);
  margin: 0;
}

.army-hover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background: rgba(184, 155, 94, 0.1);
  border-bottom: 1px solid rgba(107, 87, 63, 0.4);
  font-family: 'ValestrisMes', serif;
  font-size: 0.75rem;
  color: var(--color-accent);
}

.army-hover-list {
  max-height: 220px;
  overflow: hidden;
  position: relative;
  --scroll-distance: 0px;
}

.army-hover-list-inner {
  padding: 0.2rem 0;
}

/* Auto-scroll animation when content overflows */
.army-hover-list.has-overflow .army-hover-list-inner {
  animation: armyHoverScroll 8s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes armyHoverScroll {
  0%, 15% {
    transform: translateY(0);
  }
  42%, 58% {
    transform: translateY(var(--scroll-distance));
  }
  85%, 100% {
    transform: translateY(0);
  }
}

.army-hover-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid rgba(107, 87, 63, 0.15);
}

.army-hover-item:last-child {
  border-bottom: none;
}

.army-hover-item.own-army {
  background: rgba(184, 155, 94, 0.04);
}

.army-hover-item.allied-army {
  background: rgba(160, 143, 255, 0.04);
}

.army-hover-item.enemy-army {
  background: rgba(243, 108, 108, 0.04);
}

.army-hover-name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.army-hover-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.army-hover-indicator.own {
  background: var(--color-accent);
}

.army-hover-indicator.ally {
  background: #a08fff;
}

.army-hover-indicator.enemy {
  background: #f36c6c;
}

.army-hover-numeral {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 18px;
  padding: 0 3px;
  background: rgba(184, 155, 94, 0.12);
  border: 1px solid rgba(184, 155, 94, 0.35);
  border-radius: 3px;
  font-family: 'ValestrisMes', serif;
  font-size: 0.65rem;
  font-weight: bold;
  color: var(--color-accent);
  flex-shrink: 0;
}

.army-hover-item.allied-army .army-hover-numeral {
  background: rgba(160, 143, 255, 0.12);
  border-color: rgba(160, 143, 255, 0.35);
  color: #a08fff;
}

.army-hover-item.enemy-army .army-hover-numeral {
  background: rgba(243, 108, 108, 0.12);
  border-color: rgba(243, 108, 108, 0.35);
  color: #f36c6c;
}

.army-hover-name {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--color-text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.army-hover-orders {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding-left: 0.7rem;
}

.army-hover-order-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.05rem 0.25rem;
  background: rgba(184, 155, 94, 0.08);
  border: 1px solid rgba(184, 155, 94, 0.2);
  border-radius: 3px;
  font-size: 0.55rem;
  color: var(--color-text-muted);
}

.army-hover-order-tag.active {
  background: rgba(184, 155, 94, 0.2);
  border-color: rgba(184, 155, 94, 0.35);
  color: var(--color-accent);
}

.army-hover-order-label {
  font-weight: 600;
}

.army-hover-order-value {
  opacity: 0.85;
}

#bottom-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/patterns/blackherd.png');
  background-repeat: repeat;
  background-size: 300px auto;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}

#bottom-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: var(--bar-height);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  gap: 1rem;
  box-shadow: var(--shadow);
  font-family: 'Valestris', serif;
  z-index: 1001;
  border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid var(--color-border);
  border-bottom: none;
}

/* Bottom Bar - 3-sided pattern border (LEFT, RIGHT, TOP) */
#bottom-bar::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--bar-border-total));
  left: calc(-1 * var(--bar-border-total));
  right: calc(-1 * var(--bar-border-total));
  bottom: 0;
  background: var(--bar-border-pattern) repeat;
  background-size: var(--bar-border-width) var(--bar-border-width);
  border: var(--bar-border-line-width) solid var(--bar-border-line);
  border-bottom: none;
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  /* Clip to create 3-sided frame - cuts out center rectangle */
  clip-path: polygon(
    /* Outer shape */
    0% 0%,
    100% 0%,
    100% 100%,
    0% 100%,
    0% 0%,
    /* Inner cutout (creates the hole) */
    var(--bar-border-total) var(--bar-border-total),
    var(--bar-border-total) 100%,
    calc(100% - var(--bar-border-total)) 100%,
    calc(100% - var(--bar-border-total)) var(--bar-border-total),
    var(--bar-border-total) var(--bar-border-total)
  );
}

#bottom-bar button {
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  background: #1a1411;
  color: var(--color-text);
  cursor: pointer;
  font-family: 'Valestris', serif;
  transition: background var(--transition), transform 0.1s ease;
}

#bottom-bar button:hover {
  background: #2a1f18;
  transform: scale(1.02);
}

#opacity-slider {
  width: 75px;
  accent-color: var(--color-accent);
}

/* ------------------ MAP ------------------ */
/* The cursor: grab on this wrapper is an inherited fallback. Cursor is an
   inherited CSS property, so even if the rule on #canvas fails to apply,
   the canvas inherits cursor: grab from this wrapper. */
#map-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
  cursor: grab;
}

/* Vignette effect - semi-transparent brown shadow around edges */
#map-wrapper::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1000;
  box-shadow: inset 0 0 150px 60px rgba(25, 18, 12, 0.7);
}

/* Phase 2: viewport-sized canvases, siblings of #map inside #map-wrapper.
   They no longer pan/zoom via CSS transform - the drawing context applies the
   transform internally so only the visible region needs canvas memory.
   The cursor/user-select/touch-action properties moved here from #map because
   the canvas now sits on top of #map and is what the user actually interacts
   with. cursor is also set on #map-wrapper as an inherited fallback. */
#canvas {
  cursor: grab;
  user-select: none;
  touch-action: none;
  pointer-events: auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#canvas:active {
  cursor: grabbing;
}

/* REMOVED - night cycle not yet implemented
#night-canvas {
  background-color: #0f0c0b;
  opacity: 0.3;
  transition: opacity 10s ease;
  pointer-events: none;
}
*/

#route-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#highlight-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ------------------ SIDEBARS ------------------ */
.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/patterns/blackherd.png');
  background-repeat: repeat;
  background-size: 300px auto;
  opacity: 0.10; /* Adjust this value */
  pointer-events: none;
  z-index: 0;
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--color-surface);
  color: var(--color-text);
  overflow: visible; /* Changed from hidden to allow pattern border to extend outside */
  box-shadow: var(--shadow);
  padding: 0;
  transform: translateX(-100%);
  transition: transform var(--transition);
  font-family: 'ValestrisMes', serif;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
}

.sidebar.active {
  transform: translateX(0);
  padding-top: 50px; /* Space for the expanded selector */
}

#left-sidebar {
  left: 0;
  border-left: none;
}

#right-sidebar {
  left: auto;
  right: 0;
  transform: translateX(100%);
  border-right: none;
}

#right-sidebar.active {
  transform: translateX(0);
}

/* ------------------ SIDEBAR PATTERN BORDERS ------------------ */
/* Left Sidebar - RIGHT edge border (interior side) */
#left-sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(-1 * var(--bar-border-total));
  width: var(--bar-border-total);
  background: var(--bar-border-pattern) repeat-y center;
  background-size: var(--bar-border-width) auto;
  border-left: var(--bar-border-line-width) solid var(--bar-border-line);
  border-right: var(--bar-border-line-width) solid var(--bar-border-line);
  pointer-events: none;
  z-index: 1001;
  opacity: 1;
}

/* Right Sidebar - LEFT edge border (interior side) */
#right-sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--bar-border-total));
  width: var(--bar-border-total);
  background: var(--bar-border-pattern) repeat-y center;
  background-size: var(--bar-border-width) auto;
  border-left: var(--bar-border-line-width) solid var(--bar-border-line);
  border-right: var(--bar-border-line-width) solid var(--bar-border-line);
  pointer-events: none;
  z-index: 1001;
  opacity: 1;
}

/* Sidebar scrollbar styling */
.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-track {
  background: rgba(20, 15, 10, 0.5);
}

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

.sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* Panel content wrapper */
.panel-content,
#left-panel-content,
#right-panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}

/* When viewing a conversation or composing, disable main panel scroll */
.panel-content.no-scroll,
#left-panel-content.no-scroll,
#right-panel-content.no-scroll {
  overflow-y: hidden;
  padding: 0;
}

.panel-content::-webkit-scrollbar,
#left-panel-content::-webkit-scrollbar,
#right-panel-content::-webkit-scrollbar {
  width: 8px;
}

.panel-content::-webkit-scrollbar-track,
#left-panel-content::-webkit-scrollbar-track,
#right-panel-content::-webkit-scrollbar-track {
  background: rgba(20, 15, 10, 0.5);
}

.panel-content::-webkit-scrollbar-thumb,
#left-panel-content::-webkit-scrollbar-thumb,
#right-panel-content::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  background: rgba(15, 12, 10, 0.8);
}

/* ============================================================
   SIDEBAR SELECTOR BAR
   ============================================================ */

/* Selector container - positioned at screen edge, always visible */
.sidebar-selector {
  position: fixed;
  top: 0;
  width: 110px;
  height: 44px;
  background: linear-gradient(180deg, rgba(15, 12, 10, 0.95) 0%, rgba(26, 20, 17, 0.9) 100%);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  z-index: 1100;
  transition: all var(--transition);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* Left selector - tab on left edge */
#left-selector {
  left: 0;
  border-radius: 0 0 8px 0;
  border-left: none;
  border-top: none;
}

/* Right selector - tab on right edge */
#right-selector {
  right: 0;
  left: auto;
  border-radius: 0 0 0 8px;
  border-right: none;
  border-top: none;
}

.sidebar-selector:hover {
  background: linear-gradient(180deg, rgba(17, 14, 11, 0.95) 0%, rgba(30, 23, 19, 0.9) 100%);
  transition: background 0.6s ease;
}

/* The bar container - holds all panel options */
.selector-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  gap: 0;
}

/* Individual panel option in the bar */
.selector-item {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  font-family: 'Valestris', serif;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  transition: color 0.2s ease, transform 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: none; /* No clicks in closed state - let parent handle */
}

/* In closed state, only show active item */
.selector-item.active {
  display: flex;
  color: var(--color-accent);
  font-weight: bold;
}

/* Panel label */
.selector-label {
  font-size: inherit;
  letter-spacing: 0.5px;
}

/* Sidebar open/close toggle button */
.selector-toggle {
  position: absolute;
  right: 10px;
  width: 28px;
  height: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 15;
}

.selector-toggle:hover {
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ---- EXPANDED STATE (sidebar open) ---- */

/* When sidebar is open, selector expands to full width */
.sidebar-selector.expanded {
  width: var(--sidebar-width);
  height: 50px;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid var(--color-border);
  box-shadow: none;
}

#left-selector.expanded {
  left: 0;
}

#right-selector.expanded {
  right: 0;
}

/* Show the close button when expanded */
.sidebar-selector.expanded .selector-toggle {
  display: flex;
}

/* When expanded, show ALL items in horizontal row */
.sidebar-selector.expanded .selector-bar {
  justify-content: flex-start;
  padding-left: 0.5rem;
  padding-right: 50px; /* Leave space for close button */
  gap: 0.25rem;
}

.sidebar-selector.expanded .selector-item {
  display: flex;
  flex: 1;
  pointer-events: auto;
  text-align: center;
}

/* Non-active items in expanded state */
.sidebar-selector.expanded .selector-item:not(.active) {
  color: var(--color-text-muted);
  font-weight: normal;
}

/* Hover effect - subtle highlight only, no bounce */
.sidebar-selector.expanded .selector-item:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}

/* Active item styling in expanded state */
.sidebar-selector.expanded .selector-item.active {
  color: var(--color-accent);
  font-weight: bold;
  background: rgba(184, 155, 94, 0.1);
  border-bottom: 2px solid var(--color-accent);
  border-radius: 4px 4px 0 0;
  margin-bottom: -2px;
}

/* Click bounce animation */
@keyframes selector-click-bounce {
  0% {
    transform: scale(1) translateY(0);
  }
  30% {
    transform: scale(1.08) translateY(-3px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.selector-item.click-bounce {
  animation: selector-click-bounce 0.3s ease;
}

/* ============================================================
   END SIDEBAR SELECTOR BAR
   ============================================================ */

/* ------------------ BUTTON STYLES (UNIFIED) ------------------ */
.sidebar-buttons button,
.msg-btn {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  background: #1a1411;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  font-family: 'ValestrisMes', serif;
  font-size: 1rem;
  transition: background var(--transition), transform 0.1s ease;
}

.sidebar-buttons button:hover,
.msg-btn:hover {
  background: #2a1f18;
  transform: scale(1.02);
}

/* Specific button variants */
.msg-btn-refresh {
  background: linear-gradient(135deg, #6b5d4f 0%, #5a4d3f 100%);
}

.msg-btn-refresh:hover {
  background: linear-gradient(135deg, #7d6d5f 0%, #6b5d4f 100%);
}

.msg-btn-new {
  background: linear-gradient(135deg, var(--color-accent) 0%, #a08a50 100%);
  color: #1a1411;
  font-weight: bold;
}

.msg-btn-new:hover {
  background: linear-gradient(135deg, var(--color-accent-hover) 0%, var(--color-accent) 100%);
}

.msg-btn-send {
  background: linear-gradient(135deg, #5a7d3c 0%, #4a6b2f 100%);
}

.msg-btn-send:hover {
  background: linear-gradient(135deg, #6b8d4c 0%, #5a7d3c 100%);
}

.msg-btn-back {
  background: linear-gradient(135deg, #6b4423 0%, #4a2f1a 100%);
}

.msg-btn-back:hover {
  background: linear-gradient(135deg, #7d5535 0%, #5c3a22 100%);
}

.msg-btn-update {
  background: linear-gradient(135deg, #6b5d4f 0%, #5a4d3f 100%);
}

.msg-btn-update:hover {
  background: linear-gradient(135deg, #7d6d5f 0%, #6b5d4f 100%);
}

/* Header buttons layout */
.header-buttons,
.sidebar-buttons {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
}

.header-buttons button,
.sidebar-buttons button {
  flex: 1;
  margin-bottom: 5px;
}

/* ------------------ INPUT FIELDS (UNIFIED) ------------------ */
.styled-input,
.reply-textarea {
  width: 100%;
  padding: 8px 12px;
  margin: 6px 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #1a1411;
  color: var(--color-text);
  font-family: 'ValestrisMes', serif;
  font-size: 1rem;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}

.styled-input:focus,
.reply-textarea:focus {
  border-color: var(--color-accent);
  background: #221b16;
}

.styled-input::placeholder,
.reply-textarea::placeholder {
  color: var(--color-text-muted);
}

.reply-textarea {
  min-height: 80px;
  resize: vertical;
  font-size: 1rem;
}

/* ------------------ MESSAGES PANEL WRAPPER ------------------ */
.messages-panel-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.5rem;
}

/* Pinned section (50% when content present) */
.messages-pinned-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

.messages-pinned-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--messages-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.messages-pinned-section > * {
  position: relative;
  z-index: 1;
}

/* Conversations section (always 50%) */
.messages-convos-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

.messages-convos-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--messages-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.messages-convos-section > * {
  position: relative;
  z-index: 1;
}

/* Controls section (bottom, ~10%) */
.messages-controls-section {
  flex: 3;
  display: flex;
  flex-direction: column;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  overflow: hidden;
}

.messages-controls-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--messages-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.messages-controls-section > * {
  position: relative;
  z-index: 1;
}

/* Conversation section (single section wrapping open conversation) */
.messages-conversation-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

.messages-conversation-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--messages-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.messages-conversation-section > * {
  position: relative;
  z-index: 1;
}

/* Compose parchment section (single section wrapping new message form) */
.messages-compose-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

.messages-compose-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--messages-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.messages-compose-section > * {
  position: relative;
  z-index: 1;
}

/* Compose header */
.compose-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}

.compose-header-title {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Compose form fields */
.compose-fields {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}

.compose-input {
  padding: 0.35rem 0.5rem;
  background: rgba(30, 24, 20, 0.8);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-family: 'ValestrisMes', serif;
  font-size: 0.85rem;
}

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

.compose-input:focus {
  border-color: rgba(184, 155, 94, 0.5);
  outline: none;
}

/* Compose textarea - fills remaining space */
.compose-body {
  flex: 1;
  min-height: 80px;
  padding: 0.5rem;
  background: rgba(26, 20, 17, 0.25);
  border: 1px solid rgba(184, 155, 94, 0.15);
  border-radius: 6px;
  color: var(--color-text);
  font-family: 'ValestrisMes', serif;
  font-size: 1rem;
  line-height: 1.5;
  resize: none;
}

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

.compose-body:focus {
  border-color: rgba(184, 155, 94, 0.4);
  outline: none;
}

/* Compose footer */
.compose-footer {
  flex-shrink: 0;
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--color-border);
}

.compose-status {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 0.15rem 0;
  flex-shrink: 0;
}

/* Section header bar - shared across all message sections */
.messages-section-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(184, 155, 94, 0.2);
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}

/* Conversation count badge */
.messages-convo-count {
  background: rgba(184, 155, 94, 0.2);
  color: var(--color-accent);
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  font-size: 0.7rem;
}

/* Header right container with count and new button */
.messages-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* New parchment button in header */
.messages-header-new-btn {
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  background: rgba(90, 125, 60, 0.3);
  border: 1px solid rgba(90, 125, 60, 0.6);
  color: #7da053;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Theo', serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.messages-header-new-btn:hover {
  background: rgba(90, 125, 60, 0.5);
  border-color: #7da053;
}

/* Scrollable message lists inside panel sections only */
.messages-pinned-section .messages-list,
.messages-convos-section .messages-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Empty/loading hint text */
.messages-empty-hint {
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  padding: 0.75rem 0.5rem;
  font-size: 0.85rem;
}

.messages-loading {
  color: var(--color-text-muted);
  text-align: center;
  padding: 1rem;
}

/* Controls row with buttons */
.messages-controls-row {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

/* Panel buttons - matches forces/books pattern */
.messages-panel-btn {
  flex: 1;
  padding: 0.5rem;
  font-size: 0.8rem;
  background: rgba(42, 31, 24, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Theo', serif;
}

.messages-panel-btn:hover {
  background: rgba(184, 155, 94, 0.2);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* New Parchment button - green accent like forces-raise-btn */
.messages-btn-new {
  background: rgba(90, 125, 60, 0.3);
  border: 1px solid rgba(90, 125, 60, 0.6);
  color: #7da053;
}

.messages-btn-new:hover {
  background: rgba(90, 125, 60, 0.5);
  border-color: #7da053;
}

/* Pin/unpin button on conversation items */
.conversation-pin-btn {
  padding: 0.15rem 0.35rem;
  font-size: 0.6rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Theo', serif;
  white-space: nowrap;
  flex-shrink: 0;
}

.conversation-pin-btn:hover {
  background: rgba(184, 155, 94, 0.2);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.conversation-pin-btn.pinned {
  background: rgba(184, 155, 94, 0.15);
  border-color: rgba(184, 155, 94, 0.4);
  color: var(--color-accent);
}

/* Conversation header right side (timestamp + pin btn) */
.conversation-header-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Pinned conversation visual indicator - just adds pin styling, inherits read/unread border */
.conversation-item.conversation-pinned {
  background: rgba(30, 24, 18, 0.7);
}

/* Read conversation - green left border */
.conversation-item.conversation-read {
  border-left-color: #7da053;
}

/* Unread conversation - yellow accent left border */
.conversation-item.conversation-unread {
  border-left-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.08);
}

.conversation-item.conversation-unread .conversation-topic {
  font-weight: 700;
  color: var(--color-accent);
}

/* ------------------ MESSAGES ACTION BAR (legacy, kept for sub-views) ------------------ */
.messages-action-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.messages-action-bar button {
  flex: 1;
  min-width: 80px;
  margin-bottom: 0;
}

/* ------------------ CONVERSATION LIST ------------------ */
#messages-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#messages-container h3 {
  color: var(--color-accent);
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

#messages-container > p {
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  padding: 2rem 1rem;
}

.conversation-item {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(26, 20, 17, 0.6);
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all var(--transition);
}

.conversation-item:hover {
  background: rgba(42, 31, 24, 0.8);
  border-color: var(--color-border);
  transform: translateX(4px);
}

.conversation-item.active {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--color-accent);
  box-shadow: 0 0 8px rgba(184, 155, 94, 0.3);
}

.conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}

.conversation-topic {
  font-weight: bold;
  font-size: 1.05rem;
  color: var(--color-text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-timestamp {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-left: 8px;
  white-space: nowrap;
}

.conversation-recipients {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: 0.4rem;
}

.conversation-preview {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

/* ------------------ CONVERSATION VIEW ------------------ */
.messages-header {
  flex-shrink: 0; /* Don't shrink - always show full header */
  padding: 0.5rem 0.25rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

.messages-header h3 {
  color: var(--color-accent);
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.recipients-line {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-style: italic;
  margin-bottom: 0.75rem;
}

.messages-header .sidebar-buttons {
  margin-top: 0.75rem;
}

/* Conversation wrapper - fills available space in sidebar */
.conversation-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* Important for flex children to shrink */
  overflow: hidden;
}

.conversation-view {
  display: flex;
  flex-direction: column;
  flex: 1; /* Fill available space between header and composer */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  word-break: break-word;
  padding: 0.5rem;
  background: rgba(26, 20, 17, 0.25);
  border: 1px solid rgba(184, 155, 94, 0.15);
  border-radius: 6px;
  scroll-behavior: smooth;
}

.conversation-view::-webkit-scrollbar {
  width: 8px;
}

.conversation-view::-webkit-scrollbar-track {
  background: rgba(20, 15, 10, 0.5);
}

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

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.message-item {
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(42, 31, 24, 0.3);
  margin-bottom: 4px;
  word-wrap: break-word;
}

.message-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.message-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.message-username {
  font-weight: bold;
  font-size: 0.9rem;
  color: var(--color-accent);
}

.message-timestamp {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  opacity: 0.8;
  margin-top: 2px;
}

.message-right {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.5;
}

/* ------------------ REPLY COMPOSER ------------------ */
.reply-composer {
  flex-shrink: 0; /* Don't shrink - always show full composer */
  padding-top: 0.5rem;
  margin-top: 0.4rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reply-composer .reply-textarea {
  margin: 0;
  min-height: 80px; /* Reduced from 120px for better space distribution */
  max-height: 150px; /* Prevent it from growing too large */
  resize: none; /* Disable manual resize since we're using flex */
  font-size: 1.2rem;
}

.reply-composer .sidebar-buttons {
  margin-top: 0;
}

.reply-composer .sidebar-buttons button {
  margin-bottom: 0;
}

/* Hide extra buttons in reply composer */
.reply-composer .sidebar-buttons button:not(.msg-btn-send) {
  display: none;
}

/* When there are specific send buttons, show them */
.send-btn {
  flex-shrink: 0;
}

/* ---------- EMPIRE PANEL - BUILDING ROWS ---------- */
.tile-building-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.tile-buttons {
  display: flex;
  gap: 0.5rem;
}
.msg-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* player info, retrieved from bottom bar for message animation*/
#village-name {
  font-family: 'ValestrisMes', serif;
  font-size: 0.85rem;
  color: var(--color-accent);
  font-weight: bold;
  text-align: center;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  z-index: 1;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1px solid rgba(184, 155, 94, 0.15);
  background: rgba(184, 155, 94, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#village-name:hover {
  background: rgba(184, 155, 94, 0.14);
  border-color: rgba(184, 155, 94, 0.3);
  color: var(--color-accent-hover);
}

#village-name:active {
  background: rgba(184, 155, 94, 0.2);
  border-color: rgba(184, 155, 94, 0.4);
}

.village-nav-btn {
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.8rem;
  background: rgba(26, 20, 17, 0.8);
  color: var(--color-accent);
  cursor: pointer;
  font-family: 'Valestris', serif;
  font-size: 1rem;
  font-weight: bold;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  z-index: 1;
  line-height: 1;
}

.village-nav-btn:hover {
  background: rgba(42, 31, 24, 0.9);
  color: var(--color-text);
}

/*=========================================================
=============Message Fade In & Typing Effect===============
==========================================================*/
/* Base message item - NO animation by default */
.message-item {
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(42, 31, 24, 0.3);
  margin-bottom: 4px;
  word-wrap: break-word;
  /* NO animation here anymore */
}

/* Static messages (from Update button) - visible immediately */
.message-item.static-message {
  opacity: 1;
  animation: none;
}

/* NEW messages only get fade-in animation */
.message-item.new-message {
  opacity: 0;
  animation: msgFadeIn 0.5s ease-out forwards;
}

@keyframes msgFadeIn {
  to { opacity: 1; }
}

.message-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Message text container */
.message-right {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.5;
}

/* The text element that gets typed */
.message-text {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden; /* Contain floated drop cap */
}

/* Rest of message after drop cap */
.message-rest {
  display: inline;
}

/* Clear float after message content */
.message-text::after {
  content: "";
  display: table;
  clear: both;
}

/* Typing cursor only appears during typing */
.typing-text::after {
  content: "|";
  color: var(--color-accent);
  font-weight: bold;
  animation: blink 1s infinite;
  margin-left: 1px;
}

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

/* ============================================================
   PARTICIPANT MANAGEMENT UI STYLES (Standardized)
   ============================================================ */

/* Manage section (single section wrapping manage participants panel) */
.messages-manage-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

.messages-manage-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--messages-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.messages-manage-section > * {
  position: relative;
  z-index: 1;
}

/* Topic subtitle under header */
.manage-topic-line {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 0.25rem 0 0.5rem 0;
  border-bottom: 1px solid rgba(184, 155, 94, 0.15);
  margin-bottom: 0.5rem;
}

/* Scrollable content area */
.manage-content-area {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 0.25rem;
}

/* Subheaders within the panel */
.manage-subheader {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.5rem 0 0.25rem 0;
  border-bottom: 1px solid rgba(184, 155, 94, 0.2);
  margin-top: 0.5rem;
}

.manage-subheader:first-child {
  margin-top: 0;
}

/* Participants list */
.participants-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Individual participant item */
.participant-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  background: rgba(26, 20, 17, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  gap: 0.75rem;
  transition: all var(--transition);
}

.participant-item:hover {
  background: rgba(42, 31, 24, 0.8);
  border-color: var(--color-accent);
}

.participant-item span {
  flex: 1;
  font-size: 0.95rem;
  color: var(--color-text);
}

/* Add participant row */
.manage-add-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.manage-add-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  background: rgba(26, 20, 17, 0.8);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-family: 'Theo', serif;
}

.manage-add-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.manage-add-input::placeholder {
  color: var(--color-text-muted);
}

.manage-add-row .messages-panel-btn {
  flex: 0 0 auto;
  min-width: 60px;
}

/* Status message */
.manage-status {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  min-height: 1.2em;
  padding: 0.25rem 0;
}

.manage-status-success {
  color: #7da053;
}

.manage-status-error {
  color: var(--color-error, #c94a4a);
}

/* Bottom actions bar */
.manage-actions-bar {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(184, 155, 94, 0.15);
  margin-top: auto;
  flex-shrink: 0;
}

.manage-leave-btn {
  flex: 1;
  background: rgba(120, 50, 50, 0.3);
  border-color: rgba(180, 80, 80, 0.5);
  color: #c97a7a;
}

.manage-leave-btn:hover {
  background: rgba(150, 60, 60, 0.5);
  border-color: #c97a7a;
}

/* Remove button (small, inline) */
.msg-btn-remove {
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  background: rgba(100, 60, 40, 0.5);
  border: 1px solid rgba(150, 90, 60, 0.6);
  color: var(--color-text-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Theo', serif;
}

.msg-btn-remove:hover {
  background: rgba(120, 50, 50, 0.6);
  border-color: #c97a7a;
  color: #c97a7a;
}

.msg-btn-remove:hover {
  background: linear-gradient(135deg, #8b5533 0%, #6b4423 100%);
}

/* Leave conversation button (warning/danger style) */
.msg-btn-leave {
  background: linear-gradient(135deg, #a75a3a 0%, #8b4423 100%);
  font-weight: bold;
}

.msg-btn-leave:hover {
  background: linear-gradient(135deg, #c76a4a 0%, #a75a3a 100%);
}

/* System messages (participant changes) */
.message-item.system-message {
  background: rgba(184, 155, 94, 0.1);
  border-left: 3px solid var(--color-accent);
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  display: block;
  grid-template-columns: none;
}

.system-message-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.system-icon {
  font-size: 1rem;
  color: var(--color-accent);
  opacity: 0.8;
}

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

/* ============================================================
   MINIMAP POPUP (expands below top bar tab)
   ============================================================ */
#minimap-container {
  position: fixed;
  top: calc(var(--bar-height) + 22px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  width: 340px;
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#minimap-container.hidden {
  display: none !important;
}

#minimap-canvas {
  width: 100%;
  height: 240px;
  opacity: 0.5;
  cursor: crosshair;
}

#viewport-indicator {
  position: absolute;
  border: 2px solid #b89b5e;
  background: rgba(184, 155, 94, 0.1);
  pointer-events: none;
  opacity: 1;
  box-shadow: 0 0 8px rgba(184, 155, 94, 0.5);
}

/* ============================================================
   REPORTS PANEL (above bottom bar, click to toggle)
   ============================================================ */
#reports-hover-zone {
  position: fixed;
  bottom: var(--bar-height);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--bar-width) - 50px);
  z-index: 1501;
  pointer-events: none;
}

#reports-hover-panel {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(35, 28, 23, 0.98) 0%, rgba(25, 20, 17, 0.99) 100%);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
  font-family: 'ValestrisMes', serif;
  transition: max-height 0.35s ease, opacity 0.35s ease;
  opacity: 0;
  pointer-events: auto;
}

#reports-hover-panel.pinned {
  max-height: 600px;
  opacity: 1;
}

#reports-hover-content {
  display: flex;
  flex-direction: column;
  max-height: 550px;
  overflow: hidden;
}

/* Reports hover panel header */
.reports-hover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.8rem;
  background: rgba(184, 155, 94, 0.15);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.reports-hover-title {
  font-family: 'ValestrisMes', serif;
  font-size: 0.9rem;
  color: var(--color-accent);
  font-weight: bold;
}

/* Close button in reports header */
.reports-close-btn {
  background: none;
  border: 1px solid var(--color-text-muted);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  line-height: 1;
  margin-left: 0.5rem;
  transition: color 0.2s, border-color 0.2s;
}

.reports-close-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

/* Clickable tab strip (narrower) */
#reports-hover-zone::before {
  content: '';
  display: block;
  width: 160px;
  height: 20px;
  margin: 0 auto;
  cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  transition: background 0.2s, border-color 0.2s;
  pointer-events: auto;
}

#reports-hover-zone:hover::before {
  background: rgba(40, 33, 27, 0.95);
  border-color: var(--color-accent);
}

/* Label centered in the tab strip */
#reports-hover-zone::after {
  content: 'Reports';
  position: absolute;
  bottom: calc(100% - 20px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: bold;
  font-family: 'Valestris', serif;
  pointer-events: none;
  line-height: 20px;
  transition: color 0.2s;
}

#reports-hover-zone:hover::after {
  color: var(--color-accent);
}

/* ============================================================
   BUILDING DETAIL PANEL STYLES (consolidated below in tile detail section)
   ============================================================ */

/* ============================================================
   INVENTORY OVERVIEW GRID STYLES
   ============================================================ */
/* Main grid container */
.inventory-grid-container {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0;
}

/* Top row - Gold & Silver (special, full width rectangles) */
.inventory-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}

/* Main 6x5 grid */
.inventory-main-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.2rem;
}

/* Standard inventory cell (square) */
.inventory-cell {
  position: relative;
  aspect-ratio: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(184, 155, 94, 0.2);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.15rem;
  transition: all 0.15s ease;
  overflow: hidden;
  cursor: pointer;
}

.inventory-cell:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(184, 155, 94, 0.5);
}

/* No building constructed - muted red outline */
.inventory-cell.no-building {
  border-color: rgba(180, 100, 100, 0.4);
}

.inventory-cell.no-building:hover {
  background: rgba(60, 25, 25, 0.6);
  border-color: rgba(200, 80, 80, 0.7);
}

.inventory-cell-special.no-building {
  border-color: rgba(180, 100, 100, 0.4);
}

.inventory-cell-special.no-building:hover {
  background: rgba(60, 25, 25, 0.6);
  border-color: rgba(200, 80, 80, 0.7);
}

/* Crafting active indicator bar - narrow green bar at bottom center */
.inventory-crafting-bar {
  position: absolute;
  bottom: 2px;
  left: 25%;
  width: 50%;
  height: 3px;
  background: rgba(74, 177, 71, 0.5);
  border-radius: 1px;
  z-index: 2;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}

/* Special cells for gold & silver (wide rectangles) */
.inventory-cell-special {
  position: relative;
  height: 36px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(184, 155, 94, 0.4);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.6rem;
  transition: all 0.15s ease;
  overflow: hidden;
  cursor: pointer;
}

.inventory-cell-special:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: var(--color-accent);
}

/* Background image placeholder */
.inventory-cell-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.2;
  border-radius: inherit;
  transition: opacity 0.15s ease;
}

/* Dimmer opacity for cells without building */
.inventory-cell.no-building .inventory-cell-bg,
.inventory-cell-special.no-building .inventory-cell-bg {
  opacity: 0.1;
}

.inventory-cell:hover .inventory-cell-bg,
.inventory-cell-special:hover .inventory-cell-bg {
  opacity: 0.3;
}

.inventory-cell.no-building:hover .inventory-cell-bg,
.inventory-cell-special.no-building:hover .inventory-cell-bg {
  opacity: 0.2;
}

/* Item name label */
.inventory-cell .item-name,
.inventory-cell-special .item-name {
  position: relative;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  text-transform: capitalize;
  z-index: 1;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.inventory-cell-special .item-name {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--color-text);
}

/* Quantity label */
.inventory-cell .item-quantity,
.inventory-cell-special .item-quantity {
  position: relative;
  font-size: 0.7rem;
  font-weight: bold;
  z-index: 1;
  line-height: 1.1;
  font-family: 'ValestrisMes', serif;
}

.inventory-cell-special .item-quantity {
  font-size: 1rem;
}

/* Unit type label */
.inventory-cell .item-unit {
  position: relative;
  font-size: 0.55rem;
  color: var(--color-text-muted);
  z-index: 1;
  line-height: 1;
  opacity: 0.7;
}

.inventory-cell-special .item-unit {
  font-size: 0.65rem;
  margin-left: 0.25rem;
}

/* Color for quantities > 0 */
.item-quantity.has-items {
  color: var(--color-accent);
}

/* Color for zero quantities */
.item-quantity.no-items {
  color: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   BOOKS PANEL STYLES
   ============================================================ */

/* Books panel wrapper - matches marketplace-panel-wrapper pattern */
.books-panel-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.5rem;
}

/* Manuscripts is a Profiles tab; the tab-content element already supplies
   padding, so drop the wrapper's own padding to avoid a doubled inset. */
.profiles-tab-content .books-panel-wrapper {
  padding: 0;
}

/* Library section (top, ~80%) - scrollable book list */
.books-library-section {
  flex: 9;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

.books-library-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--books-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.books-library-section > * {
  position: relative;
  z-index: 1;
}

/* Controls section (bottom, ~20%) */
.books-controls-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  overflow: hidden;
}

.books-controls-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--books-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.books-controls-section > * {
  position: relative;
  z-index: 1;
}

/* Section header bar - matches marketplace-section-header */
.books-section-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(184, 155, 94, 0.2);
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}

/* Small action button in section header (e.g. "New Book") */
.books-header-action-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.65rem;
  background: rgba(90, 125, 60, 0.3);
  border: 1px solid rgba(90, 125, 60, 0.6);
  color: #7da053;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Theo', serif;
  text-transform: none;
  font-weight: normal;
}

.books-header-action-btn:hover {
  background: rgba(90, 125, 60, 0.5);
  border-color: #7da053;
}

/* Controls row with buttons */
.books-controls-row {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

/* Panel buttons - matches forces-refresh-btn pattern */
.books-panel-btn {
  flex: 1;
  padding: 0.5rem;
  font-size: 0.8rem;
  background: rgba(42, 31, 24, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Theo', serif;
}

.books-panel-btn:hover {
  background: rgba(184, 155, 94, 0.2);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Scrollable book list inside library section */
.books-library-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.books-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0.5rem;
}

.books-empty {
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  padding: 2rem 1rem;
}

.books-section-header {
  color: var(--color-accent);
  font-size: 1rem;
  margin: 1rem 0 0.5rem 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.book-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(26, 20, 17, 0.6);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition);
}

.book-item:hover {
  background: rgba(42, 31, 24, 0.8);
  border-color: var(--color-border);
  transform: translateX(4px);
}

.book-item.book-draft {
  border-left: 3px solid var(--color-accent);
}

.book-cover-thumb {
  width: 50px;
  height: 65px;
  background-color: rgba(0, 0, 0, 0.3);
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-cover-thumb.book-cover-default {
  font-size: 1.5rem;
}

.book-info {
  flex: 1;
  min-width: 0;
}

.book-title {
  font-weight: bold;
  font-size: 1rem;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

/* Header tab-style button (books panel) - matches marketplace-tab pattern */
.books-header-tab-btn {
  padding: 0.2rem 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-muted);
  font-family: 'Theo', serif;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.2s;
}

.books-header-btn-group {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.books-header-tab-btn:hover {
  background: rgba(184, 155, 94, 0.2);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ============================================================
   BOOK REVIEWS / RATING STYLES
   ============================================================ */

/* Star rating button shown in published book bubble */
.book-rating-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding: 0.2rem 0.5rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.book-rating-btn:hover {
  background: rgba(184, 155, 94, 0.2);
  border-color: var(--color-accent);
}

.book-rating-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Star rows */
.book-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 0;
}

.book-star {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.book-star-empty {
  opacity: 0.25;
  filter: grayscale(1) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

.book-stars-small .book-star { width: 12px; height: 12px; }
.book-stars-large .book-star { width: 22px; height: 22px; }
.book-stars-input .book-star { width: 24px; height: 24px; }

.book-star-clickable { cursor: pointer; }
.book-star-clickable:hover { transform: scale(1.15); }

/* Reviews panel - aggregate at top */
.book-reviews-aggregate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.book-reviews-summary {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Reviews panel - your review form */
.book-my-review-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* use this if you want review ui pinned to top again
.book-my-review-header {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--color-accent);
}*/

.book-review-textarea {
  width: 100%;
  min-height: 60px;
  padding: 0.5rem;
  background: #1a1411;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  box-sizing: border-box;
}

.book-review-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.book-my-review-buttons {
  display: flex;
  gap: 0.5rem;
}

/* Reviews panel - others' reviews list */
.book-reviews-list {
  padding-top: 0.5rem;
}

.book-reviews-list-header {
  color: var(--color-accent);
  font-size: 0.9rem;
  margin: 0.5rem 0;
  padding: 0 0.5rem;
}

.book-review-item {
  padding: 0.6rem 0.75rem;
  background: rgba(26, 20, 17, 0.6);
  border: 1px solid transparent;
  border-radius: 6px;
}

.book-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.book-review-author {
  font-weight: bold;
  color: var(--color-text);
  font-size: 0.9rem;
}

.book-review-date {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

.book-review-comment {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Reviews panel - long title truncates so header buttons stay on one line */
.book-reviews-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 0.5rem;
}

.book-reviews-header-btns {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* Cover + aggregate stars block at top of reviews scroll area */
.book-reviews-cover-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.5rem;
}

/* Fixed-bottom review form section (mirrors books-controls-section visuals) */
.book-review-form-section {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  overflow: hidden;
}

.book-review-form-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--books-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.book-review-form-section > * {
  position: relative;
  z-index: 1;
}
/* Book Editor - Standardized sectioned layout */

/* Reusable editor section (matches marketplace/forces section pattern) */
.book-editor-section {
  display: flex;
  flex-direction: column;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  overflow: hidden;
}

.book-editor-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--book-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.book-editor-section > * {
  position: relative;
  z-index: 1;
}

/* Flex variants for editor sections */
.book-editor-section.book-section-fixed {
  flex-shrink: 0;
}

.book-editor-section.book-section-fill {
  flex: 1;
  min-height: 0;
}

/* Cover preview (used inside the details section) */
.book-cover-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.book-cover-preview {
  width: 90px;
  height: 120px;
  background-color: rgba(0, 0, 0, 0.4);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.book-cover-controls {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
}

/* Content textarea */
.book-content-textarea {
  flex: 1;
  width: 100%;
  min-height: 120px;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: rgba(10, 8, 6, 0.6);
  color: var(--color-text);
  font-family: 'ValestrisMes', serif;
  font-size: 0.95rem;
  line-height: 1.6;
  resize: none;
}

.book-content-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(15, 12, 10, 0.8);
}

.book-char-count {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-align: right;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* Header button group in editor */
.book-editor-header-btns {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

/* Separator bar between back and action buttons */
.book-header-separator {
  color: rgba(184, 155, 94, 0.3);
  font-size: 0.7rem;
  user-select: none;
  padding: 0 0.1rem;
}

/* Save/Publish header buttons - accent/gold tint */
.book-header-btn-accent {
  background: rgba(184, 155, 94, 0.2);
  border-color: rgba(184, 155, 94, 0.5);
  color: var(--color-accent);
}

.book-header-btn-accent:hover {
  background: rgba(184, 155, 94, 0.35);
  border-color: var(--color-accent);
}

/* Delete header button - red tint */
.book-header-btn-delete {
  background: rgba(150, 60, 45, 0.2);
  border-color: rgba(150, 60, 45, 0.5);
  color: rgba(180, 80, 60, 0.9);
}

.book-header-btn-delete:hover {
  background: rgba(150, 60, 45, 0.35);
  border-color: rgba(150, 60, 45, 0.7);
}

.book-status-msg {
  font-size: 0.65rem;
  text-align: right;
  min-height: 1em;
  flex-shrink: 0;
}

/* New Book modal form inside a section */
.book-create-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.book-create-form .styled-input {
  width: 100%;
}

.book-create-buttons {
  display: flex;
  gap: 0.4rem;
}

/* ============================================================
   PUBLISH PANEL (tile selection)
   ============================================================ */

.publish-cost-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(26, 20, 17, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.publish-cost-title {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--color-accent);
}

.publish-cost-row {
  display: flex;
  gap: 1.25rem;
  font-size: 0.9rem;
  color: var(--color-text);
}

.publish-cost-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.publish-tile-bubble .publish-tile-resources {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.publish-tile-resources .has-enough {
  color: var(--color-accent);
}

.publish-tile-resources .not-enough {
  color: var(--color-error);
}

.publish-tile-bubble.publish-tile-insufficient {
  opacity: 0.55;
  cursor: not-allowed;
}

.publish-tile-bubble.publish-tile-insufficient:hover {
  background: rgba(26, 20, 17, 0.6);
  border-color: transparent;
  transform: none;
}

/* Live cost label in editor content header */
.book-cost-label {
  margin-left: auto;
  margin-right: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
}

/* Availability indicator (right side of book bubbles) */
.book-availability {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 90px;
  flex-shrink: 0;
  gap: 0.1rem;
}

.book-availability-count {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--color-accent);
  font-family: 'SylvestrisMes', serif;
}

.book-availability-count.none-available {
  color: var(--color-error);
}

.book-availability-label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-align: right;
  line-height: 1.1;
}

/* Right-side block for My Books published bubbles (scribe btn + availability stacked) */
.my-book-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* Stop Scribe button click from triggering the bubble click */
.my-book-right .books-header-tab-btn {
  pointer-events: auto;
}

/* ============================================================
   BOOK READER OVERLAY
   ============================================================ */

.book-reader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.book-reader-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Valestris', serif;
  transition: all var(--transition);
  z-index: 2001;
}

.book-reader-close:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.book-reader-container {
  display: flex;
  gap: 4px;
  max-width: 900px;
  width: 100%;
  height: 70vh;
  max-height: 600px;
}

.book-reader-container.cover-view {
  justify-content: center;
}

/* Cover Page */
.book-reader-cover {
  width: 400px;
  max-width: 100%;
  height: 100%;
  background-image: url('/assets/book-cover.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px 12px 12px 4px;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.book-reader-cover-image {
  width: 220px;
  height: 290px;
  background-size: cover;
  background-position: center;
  border: 2px solid #5c4a3d;
  border-radius: 3px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.book-reader-cover-title {
  font-family: 'Valestris', serif;
  font-size: 1.1rem;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.book-reader-cover-author {
  font-family: 'ValestrisMes', serif;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* Open Book Pages */
.book-reader-container:not(.cover-view) {
  background-image: url('/assets/book-open.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 2rem;
}

.book-reader-page {
  flex: 1;
  height: 100%;
  background: transparent;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.book-reader-page-left {
  border-radius: 0;
  margin-left: 1rem;
}

.book-reader-page-right {
  border-radius: 0;
  margin-right: 1rem;
}

.book-page-content {
  flex: 1;
  font-family: 'ValestrisMes', serif;
  font-size: 13px;
  line-height: 1.4;
  color: #2a1f15;
  overflow: hidden;
  text-align: left;
  white-space: pre-wrap;
}

.book-page-content.book-page-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a09080;
  font-style: italic;
}

.book-page-number {
  position: absolute;
  bottom: 1rem;
  font-family: 'Valestris', serif;
  font-size: 0.9rem;
  color: #38332f;
}

.book-reader-page-left .book-page-number {
  left: 2rem;
}

.book-reader-page-right .book-page-number {
  right: 2rem;
}

/* Navigation */
.book-reader-nav-info {
  display: none; /* Page numbers shown on book pages instead */
}

.book-reader-nav-btns {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.book-reader-nav-btns .msg-btn {
  min-width: 120px;
}

/*
// ============================================================
// CSS ADDITIONS (new for replacing tiles.id with tiles.name)
// ============================================================
*/

.tile-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
}

.tile-name-display {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--color-accent);
  cursor: pointer;
}

.tile-name-display:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
}

.tile-name-input {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--color-accent);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  width: 180px;
  outline: none;
}

.tile-name-input:focus {
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.3);
}

.army-name-display {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--color-accent);
  cursor: pointer;
  margin: 0;
}

.army-name-display:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* ============================================================
   COMPACT CRAFTING SYSTEM STYLES
   ============================================================ */

.crafting-panel-compact {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  min-height: 0;
  position: relative;
  isolation: isolate;
}

/* Crafting panel background image layer */
.crafting-panel-compact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  background-image: var(--craft-bg, none);
  opacity: 0.2;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}

/* Empty crafting panel placeholder */
.crafting-panel-compact.crafting-panel-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Production overview for non-crafting buildings */
.production-overview {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 80%;
  margin: 0 auto;
}

.production-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.4rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.production-resource {
  text-transform: capitalize;
  color: var(--color-text);
  font-size: 0.8rem;
}

.production-rate {
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: bold;
}

/* --- Redesigned Crafting UI --- */

/* Item title - centered, prominent */
.craft-item-title {
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-accent);
  padding: 0.25rem 0 0.1rem 0;
  margin-bottom: 0.35rem;
  text-transform: capitalize;
  flex-shrink: 0;
}

/* "Craft from" section header */
.craft-section-header {
  text-align: center;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
  flex-shrink: 0;
}

/* Recipe selector buttons - centered, max 4 per row */
.craft-recipe-btn-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin: 0 auto 0.6rem auto;
  flex-shrink: 0;
  width: 80%;
}

.craft-recipe-btn {
  padding: 0.3rem 0.5rem;
  flex: 0 0 calc(25% - 0.2rem);
  font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: 3px;
  cursor: pointer;
  text-transform: capitalize;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.craft-recipe-btn:hover:not(.insufficient) {
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-text);
}

.craft-recipe-btn.active {
  background: rgba(139, 69, 19, 0.45);
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  font-weight: bold;
}

.craft-recipe-btn.insufficient {
  opacity: 0.35;
  cursor: default;
  color: var(--color-text-muted);
}

/* Recipe craft container */
.recipe-craft-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Slider row: slider only, centered */
.craft-slider-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.25rem 0;
}

/* Slider - 50% width, thick track, big thumb */
.craft-slider {
  width: 50%;
  height: 16px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 8px;
  outline: none;
  -webkit-appearance: none;
}

.craft-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  background: var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.craft-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  background: var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.craft-slider::-moz-range-track {
  height: 16px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 8px;
  border: none;
}

/* Preview line - dynamic input/output + time */
.craft-preview-line {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 0.15rem 0;
  min-height: 1.2em;
  flex-shrink: 0;
}

.craft-preview-line.has-value {
  color: var(--color-accent);
  font-style: normal;
}

.craft-preview-line.has-error {
  color: var(--color-error, #cc4444);
  font-style: normal;
}

/* Action row - Max + Order buttons inline */
.craft-action-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.15rem;
  flex-shrink: 0;
}

.craft-max-btn {
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.craft-max-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.5);
}

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

.craft-order-btn {
  padding: 0.35rem 1.5rem;
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s;
}

.craft-order-btn:not(:disabled) {
  background: rgba(139, 69, 19, 0.4);
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: bold;
}

.craft-order-btn:hover:not(:disabled) {
  background: rgba(139, 69, 19, 0.6);
}

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

/* Preview line (legacy - keep for compatibility) */
.recipe-preview-line {
  font-size: 0.7rem;
  text-align: center;
  color: var(--color-text-muted);
  line-height: 1;
  padding-bottom: 1rem;
}
 
/* ============================================================
   FIXED SIDEBAR LAYOUT - Inventory Grid + Building Panel
   ============================================================ */

/* Make sidebar use flexbox for fixed layout */
.sidebar-container.with-tile-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0.75rem;
}

/* Tile header - fixed at top */
.tile-detail-header {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.5rem;
}

/* Inventory grid - gold accent bordered section with header inside */
.inventory-grid-wrapper {
  flex-shrink: 0;
  margin-bottom: 0.5rem;
  background: rgba(20, 15, 12, 0.8);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  position: relative;
  overflow: hidden;
}

/* Background image support for inventory section */
.inventory-grid-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--tile-inventory-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.inventory-grid-wrapper > * {
  position: relative;
  z-index: 1;
}

/* Building panel wrapper - takes remaining space */
.building-panel-wrapper {
  flex: 1;
  min-height: 0;
  margin-bottom: 0.5rem;
}

/* Building panel header - left name, right queue */
.building-panel-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.building-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Building name - smaller */
.building-panel-header .building-title {
  margin: 0;
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: bold;
}

/* Not built indicator */
.building-panel-header .not-built-indicator {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Upgrading status */
.building-panel-header .upgrading-status {
  font-size: 0.75rem;
  color: var(--color-accent);
  font-style: italic;
}

/* Queue badge in header - compact, no height impact */
.header-queue-badge {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: rgba(0, 100, 0, 0.2);
  border: 1px solid rgba(0, 200, 0, 0.3);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  font-size: 0.65rem;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}

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

.header-queue-value {
  color: #7a9f7a;
  font-weight: bold;
  font-size: 0.7rem;
}

.header-queue-item {
  color: var(--color-accent);
  text-transform: capitalize;
}

/* Building header right badges container */
.building-header-right {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

/* Building size badge */
.building-size-badge {
  font-size: 0.6rem;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

.building-size-badge.size-small {
  background: rgba(139, 122, 98, 0.2);
  border: 1px solid rgba(139, 122, 98, 0.4);
  color: var(--color-text-muted);
}

.building-size-badge.size-large {
  background: rgba(184, 155, 94, 0.15);
  border: 1px solid rgba(184, 155, 94, 0.35);
  color: var(--color-accent);
}

.building-size-badge.size-huge {
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #d4af37;
}

.building-size-badge.size-not-constructed {
  background: rgba(100, 100, 100, 0.15);
  border: 1px solid rgba(100, 100, 100, 0.35);
  color: #777;
  font-style: italic;
}

/* Building improving badge */
.building-improving-badge {
  font-size: 0.6rem;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.2;
  background: rgba(90, 130, 80, 0.2);
  border: 1px solid rgba(90, 130, 80, 0.4);
  color: #7a9a6d;
  font-style: italic;
}

/* Crafting hint text when no item selected */
.crafting-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  padding: 1rem;
}

/* Crafting complete animation for inventory cells - quick flash */
.inventory-cell.crafting-complete,
.inventory-cell-special.crafting-complete {
  animation: craftingGlow 0.5s ease-out;
}

@keyframes craftingGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(100, 160, 100, 0.3);
    background-color: rgba(56, 120, 40, 0.2);
  }
  40% {
    box-shadow: 0 0 6px 1px rgba(100, 160, 100, 0.2);
    background-color: rgba(14, 214, 41, 0.37);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(100, 160, 100, 0);
    background-color: transparent;
  }
}

/* Quantity increase animation - quick flash */
.item-quantity.quantity-increase {
  animation: quantityBump 0.5s ease-out;
}

@keyframes quantityBump {
  0% {
    color: #7a9f7a;
    transform: scale(1.1);
    text-shadow: 0 0 3px rgba(100, 160, 100, 0.4);
  }
  40% {
    color: #7a9f7a;
    transform: scale(1.05);
    text-shadow: 0 0 2px rgba(100, 160, 100, 0.2);
  }
  100% {
    color: inherit;
    transform: scale(1);
    text-shadow: none;
  }
}

/* Resources consumed animation (red) - triggered on craft order submission */
.inventory-cell.crafting-consumed,
.inventory-cell-special.crafting-consumed {
  animation: consumedGlow 0.5s ease-out;
}

@keyframes consumedGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(180, 80, 80, 0.3);
    background-color: rgba(160, 40, 40, 0.2);
  }
  40% {
    box-shadow: 0 0 6px 1px rgba(180, 80, 80, 0.2);
    background-color: rgba(200, 50, 50, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(180, 80, 80, 0);
    background-color: transparent;
  }
}

/* Quantity decrease animation - red flash */
.item-quantity.quantity-decrease {
  animation: quantityDrop 0.5s ease-out;
}

@keyframes quantityDrop {
  0% {
    color: #b06060;
    transform: scale(1.1);
    text-shadow: 0 0 3px rgba(180, 80, 80, 0.4);
  }
  40% {
    color: #b06060;
    transform: scale(1.05);
    text-shadow: 0 0 2px rgba(180, 80, 80, 0.2);
  }
  100% {
    color: inherit;
    transform: scale(1);
    text-shadow: none;
  }
}

/* Building panel buttons - fixed at bottom of panel */
.building-panel-buttons {
  flex-shrink: 0;
  display: flex;
  gap: 0.5rem;
  margin-top: auto; /* Push to bottom */
  padding-top: 0.5rem;
}

.building-panel-buttons .msg-btn {
  flex: 1;
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
}

/* Fixed bottom section - Inventory Report button */
.tile-detail-bottom-fixed {
  flex-shrink: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  background: transparent;
}
/* ====================================================
   Building detail panel - consolidated with background image support
   ==================================================== */
/* Base building panel */
.building-detail-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(20, 15, 12, 0.8);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

/* Background image as pseudo-element with opacity */
.building-detail-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: inherit;
  opacity: 0.2; /* Adjust this value: 0.1 = very faint, 0.9 = nearly solid */
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content appears above background */
.building-detail-panel > * {
  position: relative;
  z-index: 1;
}

/* Individual building backgrounds */
.building-bg-gold-mine {
  background-image: url('/assets/buildings/gold-mine.png');
}

.building-bg-silver-mine {
  background-image: url('/assets/buildings/silver-mine.png');
}

.building-bg-copper-mine {
  background-image: url('/assets/buildings/copper-mine.png');
}

.building-bg-foundry {
  background-image: url('/assets/buildings/foundry.png');
}

.building-bg-woodcutter {
  background-image: url('/assets/buildings/woodcutter.png');
}

.building-bg-carpentry {
  background-image: url('/assets/buildings/carpentry.png');
}

.building-bg-quarry {
  background-image: url('/assets/buildings/quarry.png');
}

.building-bg-forge {
  background-image: url('/assets/buildings/forge.png');
}

.building-bg-ranch {
  background-image: url('/assets/buildings/ranch.png');
}

.building-bg-farm {
  background-image: url('/assets/buildings/farm.png');
}

.building-bg-outpost {
  background-image: url('/assets/buildings/outpost.png');
}

.building-bg-fishery {
  background-image: url('/assets/buildings/fishery.png');
}

.building-bg-orchard {
  background-image: url('/assets/buildings/orchard.png');
}

.building-bg-plot {
  background-image: url('/assets/buildings/plot.png');
}

.building-bg-quartermaster {
  background-image: url('/assets/buildings/quartermaster.png');
}

.building-bg-blacksmith {
  background-image: url('/assets/buildings/blacksmith.png');
}

.building-bg-workshop {
  background-image: url('/assets/buildings/workshop.png');
}

.building-bg-mercery {
  background-image: url('/assets/buildings/mercery.png');
}

/* ============================================================
   ARMIES PANEL STYLES
   ============================================================ */

.armies-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0.5rem;
}

.armies-empty {
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  padding: 2rem 1rem;
}

/* Individual army item - matches conversation-item / book-item pattern */
.army-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(26, 20, 17, 0.6);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition);
}

.army-item:hover {
  background: rgba(42, 31, 24, 0.8);
  border-color: var(--color-border);
  transform: translateX(4px);
}

/* Status indicator - colored bar on left */
.army-status-indicator {
  width: 4px;
  height: 48px;
  border-radius: 2px;
  flex-shrink: 0;
}

.army-status-indicator.army-status-resting {
  background: linear-gradient(180deg, #6b5a3c 0%, #5a4a2f 100%);
  box-shadow: 0 0 6px rgba(107, 90, 60, 0.4);
}

.army-status-indicator.army-status-ready {
  background: linear-gradient(180deg, #5a7d3c 0%, #4a6b2f 100%);
  box-shadow: 0 0 6px rgba(90, 125, 60, 0.4);
}

.army-status-indicator.army-status-marching {
  background: linear-gradient(180deg, var(--color-accent) 0%, #a08a50 100%);
  box-shadow: 0 0 6px rgba(184, 155, 94, 0.4);
}

.army-status-indicator.army-status-fighting {
  background: linear-gradient(180deg, #a75a3a 0%, #8b4423 100%);
  box-shadow: 0 0 6px rgba(167, 90, 58, 0.5);
  animation: fightingPulse 1.5s ease-in-out infinite;
}

.army-status-indicator.army-status-routed {
  background: linear-gradient(180deg, #6b4423 0%, #4a2f1a 100%);
  box-shadow: 0 0 6px rgba(107, 68, 35, 0.3);
}

.army-status-indicator.army-status-engaged {
  background: linear-gradient(180deg, #b4503c 0%, #943f2f 100%);
  box-shadow: 0 0 6px rgba(180, 80, 60, 0.5);
  animation: engagedPulse 1.5s ease-in-out infinite;
}

.army-status-indicator.army-status-retreating {
  background: linear-gradient(180deg, #8c6446 0%, #6b4d35 100%);
  box-shadow: 0 0 6px rgba(140, 100, 70, 0.4);
}

.army-status-indicator.army-status-routing {
  background: linear-gradient(180deg, #783c32 0%, #5a2d26 100%);
  box-shadow: 0 0 6px rgba(120, 60, 50, 0.4);
  animation: routingPulse 2s ease-in-out infinite;
}

@keyframes fightingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Army info section */
.army-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.army-name {
  font-weight: bold;
  font-size: 1.05rem;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.army-meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Morale bar */
.army-morale-container {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.25rem;
}

.army-morale-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease, background 0.3s ease;
}

.army-morale-bar.morale-high {
  background: linear-gradient(90deg, #5a7d3c 0%, #6b8d4c 100%);
}

.army-morale-bar.morale-medium {
  background: linear-gradient(90deg, #b89b5e 0%, #d1aa5b 100%);
}

.army-morale-bar.morale-low {
  background: linear-gradient(90deg, #a75a3a 0%, #c76a4a 100%);
}

/* Troop count bubble */
.army-troop-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0.25rem 0.5rem;
  background: rgba(184, 155, 94, 0.15);
  border: 1px solid rgba(184, 155, 94, 0.4);
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--color-accent);
  font-family: 'ValestrisMes', serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.army-item:hover .army-troop-bubble {
  background: rgba(184, 155, 94, 0.25);
  border-color: var(--color-accent);
}

/* ============================================================
   FORCES PANEL REDESIGN - Strategy Map + Army List
   ============================================================ */

.forces-panel-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0.5rem;
}

/* ---- STRATEGY MAP SECTION ---- */
.forces-strategy-section {
  flex-shrink: 0;
  padding: 0.75rem 0.75rem 1rem;
  position: relative;
  overflow: hidden;
  background: rgba(20, 15, 12, 0.8);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

.forces-strategy-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--forces-strategy-bg-image, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.forces-strategy-section > * {
  position: relative;
  z-index: 1;
}

.forces-strategy-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.forces-toolbar-spacer {
  flex: 1;
}

/* Ownership toggle */
.forces-ownership-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.forces-ownership-toggle-label {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  user-select: none;
  white-space: nowrap;
  text-transform: none;
  font-weight: normal;
}

.forces-ownership-switch {
  position: relative;
  width: 28px;
  height: 14px;
  background: #2a1f18;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s;
}

.forces-ownership-switch.active {
  background: rgba(184, 155, 94, 0.3);
  border-color: var(--color-accent);
}

.forces-ownership-switch::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 10px;
  background: var(--color-text-muted);
  border-radius: 50%;
  transition: all 0.3s;
}

.forces-ownership-switch.active::after {
  left: 15px;
  background: var(--color-accent);
}

/* Magnify toggle */
.forces-magnify-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.5rem;
}

.forces-magnify-toggle-label {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  user-select: none;
  white-space: nowrap;
}

.forces-magnify-switch {
  position: relative;
  width: 28px;
  height: 14px;
  background: #2a1f18;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s;
}

.forces-magnify-switch.active {
  background: rgba(184, 155, 94, 0.3);
  border-color: var(--color-accent);
}

.forces-magnify-switch::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 10px;
  background: var(--color-text-muted);
  border-radius: 50%;
  transition: all 0.3s;
}

.forces-magnify-switch.active::after {
  left: 15px;
  background: var(--color-accent);
}

.forces-tool-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.65rem;
  background: rgba(20, 15, 12, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Theo', serif;
}

.forces-tool-btn:hover {
  background: rgba(184, 155, 94, 0.2);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.forces-tool-btn.active {
  background: rgba(184, 155, 94, 0.3);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.forces-strategy-map-container {
  position: relative;
  width: 82%;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(15, 18, 35, 0.9);
  border-radius: 4px;
  overflow: hidden;
}

.forces-strategy-canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  opacity: 0.5;
}

/* Strategy map tooltip */
.forces-strategy-tooltip {
  display: none;
  position: absolute;
  z-index: 100;
  background: rgba(20, 15, 12, 0.95);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  pointer-events: none;
  font-size: 0.7rem;
  min-width: 100px;
  max-width: 180px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.strategy-tooltip-name {
  font-weight: bold;
  color: var(--color-accent);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strategy-tooltip-info {
  color: var(--color-text);
  margin-bottom: 0.15rem;
}

.strategy-tooltip-ruler {
  color: var(--color-text-muted);
  font-size: 0.65rem;
}

.strategy-tooltip-army {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  color: var(--color-text);
  margin-top: 0.15rem;
}

.strategy-tooltip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.strategy-tooltip-area {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
  font-family: monospace;
}

.strategy-tooltip-army-troops {
  color: var(--color-text-muted);
  font-size: 0.6rem;
  margin-left: auto;
  padding-left: 0.3rem;
}

/* Magnifier overlay */
.forces-magnifier {
  display: none;
  position: absolute;
  z-index: 101;
  border: 2px solid var(--color-accent);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.forces-magnifier-canvas {
  display: block;
  image-rendering: pixelated;
}

/* ---- ARMY LIST SECTION ---- */
.forces-list-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: rgba(20, 15, 12, 0.8);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

.forces-list-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--forces-list-bg-image, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.forces-list-section > * {
  position: relative;
  z-index: 1;
}

.forces-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(184, 155, 94, 0.2);
  flex-shrink: 0;
}

.forces-list-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.forces-list-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.forces-army-count {
  background: rgba(184, 155, 94, 0.2);
  color: var(--color-accent);
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  font-size: 0.7rem;
}

/* Detailed view toggle */
.forces-detail-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.forces-detail-toggle-label {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  user-select: none;
  white-space: nowrap;
  text-transform: none;
  font-weight: normal;
}

.forces-detail-switch {
  position: relative;
  width: 28px;
  height: 14px;
  background: #2a1f18;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s;
}

.forces-detail-switch.active {
  background: rgba(184, 155, 94, 0.3);
  border-color: var(--color-accent);
}

.forces-detail-switch::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 10px;
  background: var(--color-text-muted);
  border-radius: 50%;
  transition: all 0.3s;
}

.forces-detail-switch.active::after {
  left: 15px;
  background: var(--color-accent);
}

.forces-raise-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.65rem;
  background: rgba(90, 125, 60, 0.3);
  border: 1px solid rgba(90, 125, 60, 0.6);
  color: #7da053;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Theo', serif;
  text-transform: none;
  font-weight: normal;
}

.forces-raise-btn:hover {
  background: rgba(90, 125, 60, 0.5);
  border-color: #7da053;
}

/* Column headers */
.forces-column-headers {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.5rem;
  padding-left: 2.75rem;
  font-size: 0.6rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(184, 155, 94, 0.1);
  background: rgba(20, 15, 12, 0.3);
  flex-shrink: 0;
}

.forces-col-name {
  flex: 1;
  min-width: 0;
}

.forces-col-location {
  width: 60px;
  text-align: center;
}

.forces-col-status {
  width: 60px;
  text-align: center;
}

.forces-col-supplies {
  width: 50px;
  text-align: center;
}

.forces-col-morale {
  width: 45px;
  text-align: center;
}

.forces-col-troops {
  width: 50px;
  text-align: right;
}

/* Army list */
.forces-army-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.4rem 0.5rem;
  overflow-y: auto;
  flex: 1;
  position: relative;
}

.forces-loading,
.forces-error,
.forces-empty {
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  padding: 1.5rem 1rem;
  font-size: 0.85rem;
}

.forces-error {
  color: var(--color-error);
}

/* Army row wrapper */
.forces-army-row-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Single army row */
.forces-army-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 28px;
  padding: 0 0.5rem;
  background: rgba(26, 20, 17, 0.5);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.forces-army-row:hover {
  background: rgba(42, 31, 24, 0.7);
  border-color: var(--color-border);
}

.forces-army-row-detailed {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Status indicator */
.forces-status-indicator {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
}

.forces-status-indicator.forces-status-ready {
  background: linear-gradient(180deg, #5a7d3c 0%, #4a6b2f 100%);
}

.forces-status-indicator.forces-status-resting {
  background: linear-gradient(180deg, #6b5a3c 0%, #5a4a2f 100%);
}

.forces-status-indicator.forces-status-marching {
  background: linear-gradient(180deg, var(--color-accent) 0%, #a08a50 100%);
}

.forces-status-indicator.forces-status-engaged {
  background: linear-gradient(180deg, #b4503c 0%, #943f2f 100%);
  animation: engagedPulse 1.5s ease-in-out infinite;
}

.forces-status-indicator.forces-status-retreating {
  background: linear-gradient(180deg, #8c6446 0%, #6b4d35 100%);
}

.forces-status-indicator.forces-status-routing {
  background: linear-gradient(180deg, #783c32 0%, #5a2d26 100%);
}

/* Row columns */
.forces-numeral-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 20px;
  padding: 0 0.25rem;
  background: rgba(184, 155, 94, 0.15);
  border: 1px solid rgba(184, 155, 94, 0.4);
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--color-accent);
  font-family: 'ValestrisMes', serif;
  flex-shrink: 0;
}

.forces-army-row:hover .forces-numeral-box {
  background: rgba(184, 155, 94, 0.25);
  border-color: var(--color-accent);
}

.forces-army-row-name {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 50px);
}

.forces-army-row-location {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-family: monospace;
  width: 60px;
  text-align: center;
  cursor: pointer;
}

.forces-army-row-location:hover {
  color: var(--color-accent);
}

.forces-army-row-status {
  font-size: 0.65rem;
  width: 60px;
  text-align: center;
  white-space: nowrap;
}

/* Status text colors - matching status indicator gradients */
.forces-status-text-ready {
  color: #5a7d3c;
}

.forces-status-text-resting {
  color: #8a7a5a;
}

.forces-status-text-marching {
  color: var(--color-accent);
}

.forces-status-text-engaged {
  color: #b4503c;
}

.forces-status-text-retreating {
  color: #8c6446;
}

.forces-status-text-routing {
  color: #783c32;
}

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

.forces-army-row-supplies {
  font-size: 0.7rem;
  color: var(--color-text);
  width: 50px;
  text-align: center;
}

.forces-army-row-supplies.supplies-low {
  color: #c76a4a;
  font-weight: bold;
}

.forces-army-row-morale {
  font-size: 0.65rem;
  width: 45px;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}

.forces-army-row-morale.morale-high {
  color: #7da053;
}

.forces-army-row-morale.morale-low {
  color: #c76a4a;
}

.forces-army-row-troops {
  font-size: 0.7rem;
  color: var(--color-text);
  width: 50px;
  text-align: right;
  font-family: 'ValestrisMes', serif;
}

/* Detailed view - troop composition row */
.forces-army-detail-row {
  display: flex;
  align-items: flex-start;
  padding: 0.3rem 0.5rem;
  padding-left: 50px;
  background: rgba(20, 15, 12, 0.6);
  border: 1px solid rgba(184, 155, 94, 0.1);
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-bottom: 0.15rem;
}

.forces-troop-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.15rem 0.25rem;
  min-width: 0;
}

.forces-troops-container {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.forces-troops-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 0.15rem;
}

.forces-bottom-row {
  display: flex;
  justify-content: space-around;
  gap: 0.5rem;
  padding-top: 0.15rem;
  border-top: 1px solid rgba(184, 155, 94, 0.15);
}

.forces-troop-count.morale-low {
  color: #c76a4a;
}

.forces-troop-name {
  font-size: 0.5rem;
  color: var(--color-text-muted);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55px;
}

.forces-troop-count {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  font-family: 'ValestrisMes', serif;
}

.forces-troop-count.has-troops {
  color: var(--color-accent);
  font-weight: bold;
}

/* Refresh bar */
.forces-refresh-bar {
  flex-shrink: 0;
  padding: 0.5rem;
  border-top: 1px solid rgba(184, 155, 94, 0.2);
  background: transparent;
}

.forces-refresh-btn {
  width: 100%;
  padding: 0.5rem;
  font-size: 0.8rem;
  background: rgba(42, 31, 24, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Theo', serif;
}

.forces-refresh-btn:hover {
  background: rgba(184, 155, 94, 0.2);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ============================================================
   ARMY DETAIL VIEW STYLES
   ============================================================ */

.army-detail-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.5rem;
  gap: 1rem;
  overflow-y: auto;
}

.army-detail-header {
  flex-shrink: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.army-detail-header h3 {
  color: var(--color-accent);
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}

.army-location-info {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Army status badge */
.army-status-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

.army-status-badge.status-resting {
  background: rgba(107, 90, 60, 0.3);
  color: #9d8a5c;
  border: 1px solid #6b5a3c;
}

.army-status-badge.status-ready {
  background: rgba(90, 125, 60, 0.3);
  color: #7d9d5c;
  border: 1px solid #5a7d3c;
}

.army-status-badge.status-marching {
  background: rgba(184, 155, 94, 0.3);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.army-status-badge.status-engaged {
  background: rgba(180, 80, 60, 0.3);
  color: #d4735a;
  border: 1px solid #b4503c;
  animation: engagedPulse 1.5s ease-in-out infinite;
}

.army-status-badge.status-fighting {
  background: rgba(167, 90, 58, 0.3);
  color: #c76a4a;
  border: 1px solid #a75a3a;
  animation: fightingPulse 1.5s ease-in-out infinite;
}

.army-status-badge.status-retreating {
  background: rgba(140, 100, 70, 0.3);
  color: #b08860;
  border: 1px solid #8c6446;
}

.army-status-badge.status-routing {
  background: rgba(120, 60, 50, 0.3);
  color: #a06050;
  border: 1px solid #783c32;
  animation: routingPulse 2s ease-in-out infinite;
}

.army-status-badge.status-routed {
  background: rgba(107, 68, 35, 0.3);
  color: #8b6443;
  border: 1px solid #6b4423;
}

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

@keyframes routingPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.98); }
}

/* Troop composition section */
.army-troops-section {
  background: rgba(26, 20, 17, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.75rem;
}

.army-troops-section h4 {
  color: var(--color-accent);
  font-size: 1rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Troop grid - 3 columns */
.army-troops-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}

/* Ships row - separate single item centered */
.army-troops-ships-row {
  display: flex;
  justify-content: center;
  margin-top: 0.4rem;
}

.army-troops-ships-row .troop-cell {
  width: 25%;
  min-width: 60px;
}

.troop-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.4rem 0.2rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(184, 155, 94, 0.2);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.troop-cell:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: var(--color-accent);
}

.troop-cell.has-troops {
  border-color: rgba(184, 155, 94, 0.4);
}

.troop-name {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 0.15rem;
}

.troop-count {
  font-size: 0.9rem;
  font-weight: bold;
  font-family: 'ValestrisMes', serif;
}

.troop-count.has-troops {
  color: var(--color-accent);
}

.troop-count.no-troops {
  color: rgba(255, 255, 255, 0.2);
}

/* Supplies section */
.army-supplies-section {
  background: rgba(26, 20, 17, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.75rem;
}

.army-supplies-section h4 {
  color: var(--color-accent);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.army-supplies-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
}

.army-supplies-row span:first-child {
  color: var(--color-text-muted);
}

.army-supplies-row span:last-child {
  font-weight: bold;
  color: var(--color-accent);
}

/* Supplies info grid */
.supplies-info-grid {
  margin-bottom: 0.75rem;
}

.supplies-value {
  font-family: 'ValestrisMes', serif;
}

/* Warning styles for low supplies */
.army-supplies-row.supplies-warning {
  background: rgba(167, 90, 58, 0.2);
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
  margin: 0.25rem 0;
}

.text-warning {
  color: #c76a4a !important;
}

.supplies-warning-text {
  font-size: 0.8rem;
  color: #c76a4a;
  background: rgba(167, 90, 58, 0.15);
  border: 1px solid rgba(167, 90, 58, 0.4);
  border-radius: 4px;
  padding: 0.5rem;
  margin: 0.5rem 0;
  text-align: center;
}

.supplies-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  margin-top: 0.5rem;
}

/* Wagon controls */
.wagon-controls {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tile-wagon-info {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
  text-align: center;
}

.wagon-btn-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wagon-btn {
  flex: 1;
  min-width: 80px;
  font-size: 0.8rem;
  padding: 0.4rem 0.5rem;
}

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

/* Army action buttons */
.army-actions-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.army-actions-section .sidebar-buttons {
  margin-top: 0;
}

/* ============================================================
   RAISE ARMY MODAL STYLES
   ============================================================ */

/* ============================================================
   RAISE ARMY UI - REDESIGNED
   ============================================================ */

.raise-army-panel-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.5rem;
  gap: 0.5rem;
}

/* Header */
.raise-army-header {
  flex-shrink: 0;
}

.raise-army-header-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.raise-army-back-btn {
  padding: 0.2rem 0.5rem;
  font-size: 0.65rem;
  background: rgba(42, 31, 24, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Theo', serif;
}

.raise-army-back-btn:hover {
  background: rgba(184, 155, 94, 0.2);
  border-color: var(--color-accent);
  color: var(--color-text);
}

.raise-army-title {
  flex: 1;
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--color-accent);
}

/* Section headers (shared by both sections) */
.raise-army-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(184, 155, 94, 0.2);
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}

/* Mustering Section (top ~40%) */
.raise-army-muster-section {
  flex: 4;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

.raise-army-muster-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--raise-army-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.raise-army-muster-section > * {
  position: relative;
  z-index: 1;
}

/* Name input row */
.raise-army-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(184, 155, 94, 0.1);
  flex-shrink: 0;
}

.raise-army-name-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  min-width: 40px;
}

.raise-army-name-input {
  flex: 1;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-family: 'Theo', serif;
}

.raise-army-name-input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(0, 0, 0, 0.4);
}

.raise-army-name-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

/* Tile list */
.raise-army-tile-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.3rem 0;
  overflow-y: auto;
  flex: 1;
}

.raise-army-tile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.5rem;
  background: rgba(26, 20, 17, 0.5);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.raise-army-tile-row:hover {
  background: rgba(42, 31, 24, 0.7);
  border-color: var(--color-border);
}

.raise-army-tile-row.selected {
  background: rgba(184, 155, 94, 0.15);
  border-color: var(--color-accent);
}

.raise-army-tile-name {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-text);
}

.raise-army-tile-coords {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-family: monospace;
}

/* Recruitment Section (bottom ~60%) */
.raise-army-recruit-section {
  flex: 6;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

.raise-army-recruit-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--raise-army-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.raise-army-recruit-section > * {
  position: relative;
  z-index: 1;
}

/* Placeholder for when no tile is selected */
.raise-army-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 2rem;
  text-align: center;
}

/* Resources grid */
.raise-army-resources-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.4rem 0;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(184, 155, 94, 0.1);
}

.raise-army-resource {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.2rem 0.35rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  border: 1px solid transparent;
  min-width: 45px;
}

.raise-army-resource.low {
  border-color: rgba(184, 155, 94, 0.4);
  background: rgba(184, 155, 94, 0.1);
}

.raise-army-resource.empty {
  border-color: rgba(167, 90, 58, 0.4);
  background: rgba(167, 90, 58, 0.1);
}

.raise-army-resource-name {
  font-size: 0.5rem;
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.raise-army-resource-count {
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--color-text);
}

.raise-army-resource.empty .raise-army-resource-count {
  color: var(--color-error);
}

/* Total badge */
.raise-army-total-badge {
  padding: 0.1rem 0.4rem;
  font-size: 0.65rem;
  background: rgba(184, 155, 94, 0.2);
  color: var(--color-accent);
  border-radius: 10px;
  font-weight: bold;
}

/* Recruit grid */
.raise-army-recruit-grid {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.3rem 0;
  overflow-y: auto;
  flex: 1;
}

.raise-army-unit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.4rem;
  background: rgba(26, 20, 17, 0.5);
  border: 1px solid transparent;
  border-radius: 4px;
  gap: 0.4rem;
  transition: all 0.15s ease;
}

.raise-army-unit-row:hover {
  background: rgba(42, 31, 24, 0.6);
  border-color: rgba(184, 155, 94, 0.2);
}

.raise-army-unit-info {
  display: flex;
  flex-direction: column;
  min-width: 80px;
}

.raise-army-unit-name {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--color-text);
}

.raise-army-unit-cost {
  font-size: 0.55rem;
  color: var(--color-text-muted);
  line-height: 1.2;
}

.raise-army-unit-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  justify-content: flex-end;
}

.raise-army-unit-count {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-accent);
  min-width: 24px;
  text-align: center;
  font-family: 'ValestrisMes', serif;
}

.raise-army-unit-slider {
  flex: 1;
  max-width: 80px;
  height: 4px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
}

.raise-army-unit-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.raise-army-unit-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.raise-army-unit-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.raise-army-unit-max {
  font-size: 0.55rem;
  color: var(--color-text-muted);
  min-width: 45px;
  text-align: right;
}

/* Footer */
.raise-army-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0 0 0;
}

.raise-army-status {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.raise-army-status.error {
  color: var(--color-error);
}

.raise-army-status.success {
  color: #7da053;
}

.raise-army-action-btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Theo', serif;
  border: 1px solid;
}

.raise-army-btn-primary {
  background: rgba(90, 125, 60, 0.3);
  border-color: rgba(90, 125, 60, 0.6);
  color: #7da053;
}

.raise-army-btn-primary:hover:not(:disabled) {
  background: rgba(90, 125, 60, 0.5);
  border-color: #7da053;
}

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

/* Loading/Empty/Error states */
.raise-army-loading,
.raise-army-empty,
.raise-army-error {
  padding: 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.raise-army-error {
  color: var(--color-error);
}

/* ============================================================
   ARMY COMPOSITION / RECRUITMENT STYLES
   ============================================================ */

.army-composition-section {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Available resources display */
.available-resources-display {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.5rem;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
}

.resource-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3rem 0.2rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border: 1px solid transparent;
}

.resource-item.resource-low {
  border-color: rgba(184, 155, 94, 0.5);
  background: rgba(184, 155, 94, 0.1);
}

.resource-item.resource-empty {
  border-color: rgba(167, 90, 58, 0.5);
  background: rgba(167, 90, 58, 0.1);
}

.resource-name {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.resource-count {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--color-text);
}

.resource-item.resource-empty .resource-count {
  color: var(--color-error);
}

/* Unit recruitment grid */
.unit-recruit-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.unit-recruit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  gap: 0.5rem;
}

.unit-recruit-row:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(184, 155, 94, 0.4);
}

.unit-recruit-info {
  display: flex;
  flex-direction: column;
  min-width: 100px;
}

.unit-recruit-name {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-text);
}

.unit-recruit-cost {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  line-height: 1.2;
}

.unit-recruit-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  justify-content: flex-end;
}

.unit-count {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-accent);
  min-width: 24px;
  text-align: center;
}

.unit-recruit-slider {
  flex: 1;
  max-width: 100px;
  height: 4px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
}

.unit-recruit-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.unit-recruit-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.unit-recruit-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.unit-max {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  min-width: 60px;
  text-align: right;
}

/* Total summary */
.recruit-total-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: rgba(184, 155, 94, 0.1);
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  margin-top: 0.5rem;
}

.recruit-total-summary span {
  color: var(--color-text);
}

.recruit-total-summary strong {
  font-size: 1.2rem;
  color: var(--color-accent);
}

/* ============================================================
   ARMY DETAIL TABS
   ============================================================ */

.army-tab-nav {
  display: flex;
  gap: 0.25rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 0.25rem;
  margin-bottom: 0.75rem;
}

.army-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.25rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: 'ValestrisMes', serif;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.army-tab-btn:hover {
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-text);
}

.army-tab-btn.active {
  background: rgba(184, 155, 94, 0.2);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.tab-icon {
  font-size: 1rem;
}

.tab-label {
  font-size: 0.8rem;
}

.army-tab-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ============================================================
   ARMY OVERVIEW TAB
   ============================================================ */

.army-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  margin-top: 0.5rem;
  background: rgba(184, 155, 94, 0.1);
  border: 1px solid var(--color-accent);
  border-radius: 6px;
}

.army-total-row span {
  color: var(--color-text);
}

.army-total-row strong {
  font-size: 1.2rem;
  color: var(--color-accent);
}

/* ============================================================
   ARMY MOVEMENTS TAB
   ============================================================ */

.army-movement-section {
  background: rgba(26, 20, 17, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.75rem;
}

.army-movement-section h4 {
  color: var(--color-accent);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

/* Claim tile section - highlighted action */
.claim-tile-section {
  background: rgba(90, 125, 60, 0.15);
  border-color: rgba(90, 125, 60, 0.4);
}

.claim-tile-section h4 {
  color: #7d9d5c;
}

.movement-status-info {
  font-size: 0.9rem;
  line-height: 1.6;
}

.movement-status-info p {
  margin-bottom: 0.25rem;
}

.route-instructions {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
  font-style: italic;
}

/* Planned route display */
.planned-route-display {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.75rem;
  max-height: 200px;
  overflow-y: auto;
}

.route-point {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 0.85rem;
  position: relative;
}

.route-point.route-start {
  background: rgba(90, 125, 60, 0.3);
  border: 1px solid rgba(90, 125, 60, 0.5);
}

.route-point.route-end {
  background: rgba(184, 155, 94, 0.2);
  border: 1px solid rgba(184, 155, 94, 0.5);
}

.route-icon {
  font-size: 1rem;
}

.route-arrow {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  padding: 0.15rem 0;
}

.route-empty {
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 0.5rem;
}

.route-remove-btn {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  background: rgba(167, 90, 58, 0.5);
  border: 1px solid rgba(167, 90, 58, 0.8);
  border-radius: 50%;
  color: var(--color-text);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.route-point:hover .route-remove-btn {
  opacity: 1;
}

.route-remove-btn:hover {
  background: rgba(167, 90, 58, 0.8);
}

/* Route controls */
.route-controls {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.route-controls .msg-btn {
  flex: 1;
}

/* ============================================================
   ARMY ORDERS TAB
   ============================================================ */

.army-orders-section {
  background: rgba(26, 20, 17, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.75rem;
}

.orders-status-msg {
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.2em;
  margin-top: 0.75rem;
  padding: 0.25rem;
}

.army-orders-section h4 {
  color: var(--color-accent);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.orders-info {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
  font-style: italic;
}

.order-policy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.order-policy:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.order-policy label {
  font-size: 0.9rem;
  color: var(--color-text);
}

.policy-select {
  width: 100%;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-family: 'ValestrisMes', serif;
  font-size: 0.9rem;
  cursor: pointer;
}

.policy-select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.policy-select option {
  background: #1a1411;
  color: var(--color-text);
}

.orders-future-note {
  background: rgba(0, 0, 0, 0.2);
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.orders-future-note p {
  margin-bottom: 0.35rem;
}

.orders-future-note ul {
  margin-left: 1.25rem;
  list-style-type: disc;
}

.orders-future-note li {
  margin-bottom: 0.15rem;
}

/* ============================================================
   ORDERS TAB IMPROVEMENTS
   ============================================================ */

/* Warning for armies outside territory */
.orders-outside-warning {
  background: rgba(167, 90, 58, 0.15);
  border: 1px solid rgba(167, 90, 58, 0.5);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.orders-outside-warning p {
  margin-bottom: 0.5rem;
}

.orders-outside-warning p:last-child {
  margin-bottom: 0;
}

/* Highlighted policy (forced march) */
.order-policy-highlight {
  background: rgba(184, 155, 94, 0.1);
  border: 1px solid rgba(184, 155, 94, 0.3);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.order-policy-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.policy-title {
  font-weight: bold;
  font-size: 1rem;
  color: var(--color-accent);
}

.policy-description {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Toggle container */
.toggle-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toggle-status {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-text);
  min-width: 30px;
}

/* Orders status message */
.orders-status-msg {
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.2em;
  margin-top: 0.75rem;
}

/* ============================================================
   ARMY MOVEMENT STATUS STYLES
   ============================================================ */

.status-marching {
  color: var(--color-accent);
  font-weight: bold;
}

.status-resting {
  color: #9d8a5c;
  font-weight: bold;
}

.status-ready {
  color: #7d9d5c;
  font-weight: bold;
}

.status-fighting {
  color: var(--color-error);
  font-weight: bold;
  animation: fightingPulse 1s ease-in-out infinite;
}

.status-routed {
  color: #8b6443;
  font-weight: bold;
}

/* Upcoming waypoints list */
.upcoming-waypoints-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.upcoming-waypoint-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 0.85rem;
}

.wp-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(184, 155, 94, 0.3);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--color-accent);
}

.wp-name {
  color: var(--color-text);
}

/* Route display scrollable */
.planned-route-display {
  max-height: 180px;
  overflow-y: auto;
}

/* Countdown styling */
#arrival-countdown,
#rest-countdown,
[id^="arrival-countdown-"],
[id^="rest-countdown-"] {
  font-weight: bold;
  color: var(--color-accent);
}

/* ============================================================
   ARMY CLICK TOOLTIP
   ============================================================ */
/* ============================================================
   ARMY CLICK TOOLTIP - REDESIGNED
   A cohesive card-based design for managing armies on a tile
   ============================================================ */

.army-click-tooltip {
  position: fixed;
  z-index: 1000;
  width: 320px;
  background: linear-gradient(180deg, rgba(35, 28, 23, 0.95) 0%, rgba(25, 20, 17, 0.95) 100%);
  border: 1px solid rgba(107, 87, 63, 0.5);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  font-family: 'Theo', serif;
  overflow: hidden;
}

.att-container {
  display: flex;
  flex-direction: column;
}

/* ----- HEADER SECTION ----- */
.att-header {
  padding: 0.5rem 0.75rem;
  background: rgba(184, 155, 94, 0.1);
  border-bottom: 1px solid rgba(107, 87, 63, 0.4);
}

.att-header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.att-header-info {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.att-tile-name {
  font-family: 'ValestrisMes', serif;
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--color-accent);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.att-tile-name:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.att-tile-name-unowned {
  cursor: default;
  color: var(--color-text);
  font-weight: normal;
}

.att-tile-name-unowned:hover {
  text-decoration: none;
}

.att-tile-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.att-close {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(107, 87, 63, 0.3);
  border-radius: 4px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.att-close:hover {
  background: rgba(180, 80, 80, 0.2);
  border-color: rgba(180, 80, 80, 0.5);
  color: #e8a8a8;
}

/* ----- ARMIES LIST SECTION ----- */
.att-armies {
  max-height: 300px;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* No armies message */
.att-no-armies {
  padding: 1.25rem 0.75rem;
  text-align: center;
  color: rgba(210, 200, 180, 0.6);
  font-style: italic;
  font-size: 0.9rem;
}

/* Individual army card */
.att-army-card {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(107, 87, 63, 0.25);
  border-radius: 6px;
  padding: 0.5rem;
  transition: border-color 0.15s, background 0.15s;
}

.att-army-card:hover {
  border-color: rgba(107, 87, 63, 0.45);
  background: rgba(0, 0, 0, 0.2);
}

.att-army-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Army strength badge */
.att-army-badge {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(184, 155, 94, 0.2) 0%, rgba(184, 155, 94, 0.08) 100%);
  border: 1px solid rgba(184, 155, 94, 0.45);
  border-radius: 6px;
  font-family: 'ValestrisMes', serif;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Army identity (name + stats) */
.att-army-identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.att-army-name {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.att-army-name:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.att-army-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
}

/* Status pill */
.att-status {
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  text-transform: capitalize;
  font-weight: 500;
}

.att-status-ready { color: #8bc34a; background: rgba(139, 195, 74, 0.15); }
.att-status-resting { color: #8bc34a; background: rgba(139, 195, 74, 0.15); }
.att-status-marching { color: var(--color-accent); background: rgba(184, 155, 94, 0.15); }
.att-status-engaged { color: #ef5350; background: rgba(239, 83, 80, 0.15); }
.att-status-fighting { color: #ef5350; background: rgba(239, 83, 80, 0.15); }
.att-status-retreating { color: #ffa726; background: rgba(255, 167, 38, 0.15); }
.att-status-routing { color: #e57373; background: rgba(229, 115, 115, 0.15); }

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

/* Army action buttons */
.att-army-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(107, 87, 63, 0.2);
}

.att-action-btn {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(60, 50, 40, 0.6);
  border: 1px solid rgba(107, 87, 63, 0.5);
  border-radius: 4px;
  color: var(--color-text);
  font-family: 'Theo', serif;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.att-action-btn:hover:not(:disabled) {
  background: rgba(184, 155, 94, 0.25);
  border-color: rgba(184, 155, 94, 0.6);
  color: var(--color-accent);
}

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

/* Route button - amber accent (matches detail panel Edit Route) */
.att-route-btn {
  background: rgba(184, 155, 94, 0.15);
  border-color: rgba(184, 155, 94, 0.45);
  color: var(--color-accent);
}

.att-route-btn:hover:not(:disabled) {
  background: rgba(184, 155, 94, 0.3);
  border-color: rgba(184, 155, 94, 0.7);
}

/* March button - green accent (matches detail panel Begin March = msg-btn-send) */
.att-march-btn {
  background: rgba(90, 125, 60, 0.2);
  border-color: rgba(90, 125, 60, 0.5);
  color: #a4c87a;
}

.att-march-btn:hover:not(:disabled) {
  background: rgba(90, 125, 60, 0.35);
  border-color: rgba(120, 160, 80, 0.7);
  color: #c4e89a;
}

/* Messenger button - spans full width */
.att-messenger-btn {
  background: rgba(100, 85, 70, 0.4);
  border-color: rgba(140, 115, 85, 0.5);
  color: #d4c4a4;
}

.att-messenger-btn:hover:not(:disabled) {
  background: rgba(140, 115, 85, 0.4);
  border-color: rgba(180, 150, 110, 0.6);
  color: #e8d8b8;
}

/* ----- ABANDONED ARMIES SECTION ----- */
.att-abandoned-section {
  padding: 0.4rem 0.75rem;
  border-top: 1px solid rgba(107, 87, 63, 0.3);
  background: rgba(100, 80, 50, 0.08);
}

.att-abandoned-header {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.35rem;
  opacity: 0.7;
}

.att-abandoned-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0;
}

.att-abandoned-card + .att-abandoned-card {
  border-top: 1px solid rgba(60, 47, 37, 0.3);
}

.att-abandoned-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.att-abandoned-name {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.att-abandoned-troops {
  font-size: 0.7rem;
  color: rgba(140, 122, 98, 0.7);
}

.att-claim-abandoned-btn {
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  background: rgba(184, 155, 94, 0.15);
  border: 1px solid rgba(184, 155, 94, 0.4);
  border-radius: 4px;
  color: var(--color-accent);
  font-family: 'Valestris', serif;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.att-claim-abandoned-btn:hover:not(:disabled) {
  background: rgba(184, 155, 94, 0.25);
  border-color: var(--color-accent);
}

.att-claim-abandoned-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ----- FOOTER SECTION ----- */
.att-footer {
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: rgba(184, 155, 94, 0.06);
  border-top: 1px solid rgba(107, 87, 63, 0.4);
}

.att-footer-btn {
  flex: 1;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-family: 'Theo', serif;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.att-footer-btn:disabled,
.att-footer-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Claim button */
.att-claim-btn {
  background: rgba(184, 155, 94, 0.2);
  border: 1px solid rgba(184, 155, 94, 0.5);
  color: var(--color-accent);
}

.att-claim-btn:hover:not(:disabled):not(.disabled) {
  background: rgba(184, 155, 94, 0.35);
  border-color: rgba(184, 155, 94, 0.7);
}

/* Detachments button */
.att-detach-btn {
  background: rgba(90, 125, 60, 0.2);
  border: 1px solid rgba(90, 125, 60, 0.5);
  color: #a4c87a;
}

.att-detach-btn:hover:not(:disabled):not(.disabled) {
  background: rgba(90, 125, 60, 0.35);
  border-color: rgba(120, 160, 80, 0.7);
  color: #c4e89a;
}

/* ============================================================
   ROUTE PLANNING TOOLTIP
   ============================================================ */

  .route-planning-tooltip {
  position: fixed;
  bottom: calc(var(--bar-height) + 30px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 24, 20, 0.88);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  min-width: 250px;
  max-width: 320px;
  z-index: 1500;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  font-family: 'Theo', serif;
}

.route-tooltip-header {
  padding: 0.5rem 0.7rem;
  background: rgba(90, 125, 60, 0.2);
  border-bottom: 1px solid rgba(90, 125, 60, 0.4);
  font-family: 'ValestrisMes', serif;
  font-size: 0.9rem;
  color: #7da053;
}

.route-tooltip-body {
  padding: 0.6rem 0.7rem;
}

.route-tooltip-instructions {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0 0 0.4rem 0;
}

.route-tooltip-count {
  font-size: 0.85rem;
  color: var(--color-text);
}

#route-waypoint-count {
  font-weight: bold;
  color: var(--color-accent);
}

.route-tooltip-actions {
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  border-top: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.15);
}

.route-tooltip-btn {
  flex: 1;
  padding: 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  font-family: 'Theo', serif;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.route-tooltip-btn.save-btn {
  background: rgba(90, 125, 60, 0.3);
  border-color: rgba(90, 125, 60, 0.6);
  color: #7da053;
}

.route-tooltip-btn.save-btn:hover {
  background: rgba(90, 125, 60, 0.5);
  border-color: #7da053;
}

.route-tooltip-btn.cancel-btn {
  background: rgba(60, 45, 35, 0.6);
  color: var(--color-text-muted);
}

.route-tooltip-btn.cancel-btn:hover {
  background: rgba(167, 90, 58, 0.3);
  border-color: rgba(167, 90, 58, 0.6);
  color: #c76a4a;
}

/* ============================================================
   ORDERS TAB - DISABLED STATE
   ============================================================ */
.orders-container {
  transition: opacity 0.3s, filter 0.3s;
}

.orders-container.orders-disabled {
  opacity: 0.5;
  filter: grayscale(40%);
  pointer-events: none;
  user-select: none;
}

.orders-container.orders-disabled .policy-select,
.orders-container.orders-disabled .switch input {
  cursor: not-allowed;
}

.orders-container.orders-disabled .slider {
  background-color: rgba(60, 45, 35, 0.5);
}

.orders-future-note.orders-disabled {
  opacity: 0.5;
  filter: grayscale(40%);
}

/* ============================================================
   TOGGLE SWITCH
   ============================================================ */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(60, 45, 35, 0.8);
  border: 1px solid var(--color-border);
  transition: 0.3s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-text-muted);
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: rgba(90, 125, 60, 0.6);
  border-color: rgba(90, 125, 60, 0.8);
}

input:checked + .slider:before {
  left: calc(100% - 19px);
  background-color: #7da053;
}

input:disabled + .slider {
  opacity: 0.5;
  cursor: not-allowed;
}

input:focus + .slider {
  box-shadow: 0 0 4px var(--color-accent);
}

/* ============================================================
   DETACHMENTS UI
   ============================================================ */

.army-tooltip-footer {
  padding: 0.75rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 0.5rem;
}

.army-tooltip-claim-btn {
  flex: 1;
  padding: 0.5rem;
  background: rgba(184, 155, 94, 0.3);
  border: 1px solid rgba(184, 155, 94, 0.6);
  border-radius: 4px;
  color: var(--color-text);
  font-family: 'Theo', serif;
  cursor: pointer;
  transition: background 0.2s;
}

.army-tooltip-claim-btn:hover:not(:disabled) {
  background: rgba(184, 155, 94, 0.5);
}

.army-tooltip-claim-btn:disabled,
.army-tooltip-claim-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(100, 100, 100, 0.2);
  border-color: rgba(100, 100, 100, 0.4);
}

.army-tooltip-detachments-btn {
  flex: 1;
  padding: 0.5rem;
  background: rgba(90, 125, 60, 0.3);
  border: 1px solid rgba(90, 125, 60, 0.6);
  border-radius: 4px;
  color: var(--color-text);
  font-family: 'Theo', serif;
  cursor: pointer;
  transition: background 0.2s;
}

.army-tooltip-detachments-btn:hover {
  background: rgba(90, 125, 60, 0.5);
}

.detachments-list {
  max-height: 250px;
  overflow-y: auto;
  padding: 0.5rem;
}

.detachment-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background: rgba(60, 50, 40, 0.4);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: background 0.2s, border-color 0.2s;
}

.detachment-item.selected {
  background: rgba(90, 125, 60, 0.2);
  border-color: rgba(90, 125, 60, 0.6);
}

.detachment-item.not-ready {
  opacity: 0.5;
}

.detachment-checkbox {
  flex-shrink: 0;
}

.detachment-checkbox input {
  appearance: none;
  -webkit-appearance: none;

  width: 16px;
  height: 16px;
  border-radius: 3px;

  background: rgba(30, 24, 20, 0.9);
  border: 1px solid var(--color-border);

  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}

.detachment-checkbox input:hover:not(:disabled) {
  border-color: rgba(184, 155, 94, 0.8);
}

.detachment-checkbox input:checked {
  background: rgba(90, 125, 60, 0.8);
  border-color: rgba(90, 125, 60, 1);
}

.detachment-checkbox input:checked::after {
  content: "+";
  position: absolute;
  top: -1px;
  left: 3px;
  font-size: 12px;
  color: #fff;
}

.detachment-checkbox input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


.detachment-numeral {
  font-family: 'ValestrisMes', serif;
  font-size: 1.1rem;
  color: var(--color-accent);
  min-width: 40px;
  text-align: center;
}

.detachment-info {
  flex: 1;
  min-width: 0;
}

.detachment-name {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: smaller;
}

.detachment-meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: flex;
  gap: 0.5rem;
}

.detachment-actions {
  flex-shrink: 0;
}

.detachment-split-btn {
  padding: 0.25rem 0.5rem;
  background: rgba(184, 155, 94, 0.3);
  border: 1px solid rgba(184, 155, 94, 0.6);
  border-radius: 4px;
  color: var(--color-text);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s;
}

.detachment-split-btn:hover:not(:disabled) {
  background: rgba(184, 155, 94, 0.5);
}

.detachment-split-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.detachments-merge-section {
  padding: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.detachments-merge-btn {
  width: 100%;
  padding: 0.5rem;
  background: rgba(90, 125, 60, 0.4);
  border: 1px solid rgba(90, 125, 60, 0.8);
  border-radius: 4px;
  color: var(--color-text);
  font-family: 'Theo', serif;
  cursor: pointer;
  transition: background 0.2s;
}

.detachments-merge-btn:hover:not(:disabled) {
  background: rgba(90, 125, 60, 0.6);
}

.detachments-merge-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.detachments-back {
  padding: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.detachments-empty {
  padding: 1rem;
  text-align: center;
  color: var(--color-text-muted);
}

/* Merge Confirm */
.merge-confirm-content {
  padding: 0.75rem;
}

.merge-confirm-text {
  margin-bottom: 0.75rem;
  color: var(--color-text-muted);
}

.merge-target-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.merge-target-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: rgba(60, 50, 40, 0.4);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.merge-target-option:hover {
  background: rgba(90, 125, 60, 0.3);
  border-color: rgba(90, 125, 60, 0.6);
}

.merge-target-name {
  font-weight: bold;
}

.merge-target-troops {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.merge-confirm-note {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Split UI */
.split-name-section {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.split-name-input {
  width: 100%;
  padding: 0.4rem 0.5rem;
  background: rgba(30, 24, 20, 0.8);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-family: 'Theo', serif;
}

.split-units-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 0.5rem;
}

.split-unit-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0;
  min-height: 20px;
}
/*may need this only .split-unit-row {
  gap: 0.25rem;
}
*/


.split-unit-slider {
  flex: 1 1 90px;     /* grow, shrink, base */
  max-width: 120px;  /*hard cap*/
  min-width: 70px;   /*thumb-safe minimum*/

  height: 4px;
  margin: 0 0.4rem;

  background: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
  padding-left: 8px;
  padding-right: 8px;
}

.split-unit-name {
  width: 64px;
  max-width: 64px;

  font-size: 0.65rem;
  line-height: 1.1;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  flex-shrink: 0;
}


.split-unit-available,
.split-unit-value {
  width: 28px;      /* slightly safer */
  text-align: center;
  flex-shrink: 0;
  font-size: 0.7rem;
}


.split-summary {
  padding: 0.5rem 0.75rem;
  text-align: center;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.split-actions {
  padding: 0.75rem;
}

.split-unit-name,
.split-unit-available,
.split-unit-value {
  flex-shrink: 0;
}

.split-unit-available {
  margin-right: 0.15rem;
}

.split-unit-value {
  margin-left: 0.15rem;
}

.split-section-divider {
  padding: 0.4rem 0.75rem 0.2rem;
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--color-accent, #b89b5e);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-top: 1px solid var(--color-border, #444);
  margin-top: 0.25rem;
}

/* Messenger Detachments UI */
.messenger-detachments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #2a2a2a;
  border-bottom: 1px solid #444;
  font-weight: bold;
}

.messenger-btn-small {
  padding: 4px 8px;
  font-size: 11px;
  background: #444;
  border: 1px solid #555;
  color: #ddd;
  border-radius: 3px;
  cursor: pointer;
}

.messenger-btn-small:hover {
  background: #555;
}

.messenger-detachments-info {
  padding: 8px 12px;
  font-size: 12px;
  color: #aaa;
  border-bottom: 1px solid #333;
}

.messenger-detachments-list {
  max-height: 200px;
  overflow-y: auto;
}

.detachment-pending {
  margin-top: 8px;
  padding: 6px 10px;
  background: #3a5a3a;
  border: 1px solid #4a7a4a;
  border-radius: 4px;
  font-size: 12px;
  color: #aaffaa;
}

/* =========================================================
   PROFILES PANEL STYLES
   ========================================================= */

/* ------------------ Panel Wrapper ------------------ */
.profiles-panel-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  gap: 0.5rem;
}

/* Top section: a framed bar around the tabs (fixed at the top across every
   tab), with its own dimmed background image via setPanelBackground
   (--profiles-tabs-bg-image). The bottom region is NOT framed here - each tab
   supplies its own single unified frame (.profile-content-wrapper /
   .rankings-content-wrapper / .books-library-section), so
   .profiles-content-section stays a layout-only container to avoid a doubled
   border around the tab content. */
.profiles-tabs-section {
  flex-shrink: 0;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.4rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  overflow: hidden;
}

.profiles-content-section {
  /* Layout-only container. The single unified frame (border, corners, inset
     shadow, dimmed background image) is supplied by each tab's own content
     wrapper (.profile-content-wrapper / .rankings-content-wrapper /
     .books-library-section). This outer element carries no chrome of its own,
     since that would double the border around the tab content. */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.profiles-tabs-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--profiles-tabs-bg-image, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.profiles-tabs-section > * {
  position: relative;
  z-index: 1;
}

/* Loading shell for the bottom content region. Carries the same unified frame
   as each tab's content wrapper (.profile-content-wrapper /
   .rankings-content-wrapper / .books-library-section), so the standardized
   sweep box during loading occupies the same footprint and style as the
   content that replaces it - no layout shift on reveal. The sweep itself is
   supplied by .section-loading > .section-loading-fill. */
.profiles-loading-shell {
  flex: 1;
  height: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

/* ------------------ Action Bar ------------------ */
.profiles-action-bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
  min-height: 32px;
}

.profiles-action-bar .msg-btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.rankings-mode-select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  padding: 0.25rem 0.4rem;
  font-family: "Valestris", serif;
  font-size: 0.75rem;
  cursor: pointer;
}

.rankings-mode-select:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* ------------------ Tab Bar (with integrated actions) ------------------ */
.profiles-tab-bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: rgba(20, 16, 12, 0.5);
  flex-shrink: 0;
}

.profiles-tab-group {
  display: flex;
}

.profiles-tab-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-right: 0.5rem;
}

.profiles-tab-action-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: 'ValestrisMes', serif;
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.profiles-tab-action-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(184, 155, 94, 0.1);
}

.profiles-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.4rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-family: "ValestrisMes", serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--transition);
}

.profiles-tab-btn:hover {
  color: var(--color-text);
  background: rgba(184, 155, 94, 0.1);
}

.profiles-tab-btn.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ------------------ Tab Content ------------------ */
.profiles-tab-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Profile tab uses fixed layout - parent doesn't scroll, only tiles list does */
.profiles-tab-content.profiles-tab-content-fixed {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.profiles-loading,
.profiles-error {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted);
}

.profiles-error {
  color: var(--color-error);
}

.kingdom-tab-host {
  padding: 0;
}

/* =========================================================
   PROFILE TAB STYLES
   ========================================================= */

/* ------------------ Profile Header ------------------ */
/* ------------------ Profile Content Wrapper with Background ------------------ */
.profile-content-wrapper {
  position: relative;
  border-radius: 8px;
  padding: 0.75rem;
  overflow: hidden;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.profile-content-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--profile-bg-image, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.profile-content-wrapper > * {
  position: relative;
  z-index: 1;
}

.profile-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.profile-picture-container {
  position: relative;
  flex-shrink: 0;
}

.profile-picture {
  width: 105px;
  height: 105px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  border: 3px solid var(--color-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Progressive border tiers based on playtime/achievements */
.profile-picture-border-newcomer {
  border-color: #5a4a3a;
}

.profile-picture-border-established {
  border-color: #7d6b4a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(125, 107, 74, 0.3);
}

.profile-picture-border-veteran {
  border-color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 8px rgba(184, 155, 94, 0.3);
}

.profile-picture-border-noble {
  border-color: #c4a54a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(196, 165, 74, 0.4);
}

.profile-picture-border-legendary {
  border: 3px solid;
  border-image: linear-gradient(135deg, #ffd700 0%, #b8860b 50%, #ffd700 100%) 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 215, 0, 0.4);
}

.profile-picture-default {
  background: linear-gradient(135deg, #3c2f25 0%, #2a1f18 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--color-accent);
  font-weight: bold;
}

.profile-picture-edit {
  width: 90px;
  height: 90px;
}

.profile-info {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
}

.profile-username {
  font-size: 1.2rem;
  color: var(--color-accent);
  margin-bottom: 0.1rem;
  word-break: break-word;
  line-height: 1.2;
}

.profile-kingdom {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(60, 47, 37, 0.5);
}

.profile-stats-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  font-size: 0.75rem;
}

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

.profile-stat strong {
  color: var(--color-accent);
}

.profile-stat-divider {
  color: var(--color-border);
}

/* Player Stats Grid */
.profile-player-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.6rem;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.profile-player-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3rem;
}

.profile-player-stat-value {
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-accent);
  font-family: 'ValestrisMes', serif;
}

.profile-player-stat-label {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
}

/* Awards Section */
.profile-awards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

/* New horizontal awards row */
.profile-awards-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
  justify-content: flex-start;
}

.profile-award-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(184, 155, 94, 0.15);
  border: 2px solid var(--color-accent);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.profile-award-icon-wrapper:hover {
  background: rgba(184, 155, 94, 0.3);
  transform: translateY(-2px);
}

.profile-award-icon-wrapper.profile-award-empty {
  background: rgba(60, 47, 37, 0.3);
  border-color: rgba(60, 47, 37, 0.5);
  opacity: 0.5;
}

.profile-award-icon-wrapper.profile-award-empty:hover {
  opacity: 0.8;
}

.profile-award-icon-wrapper .profile-award-icon {
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-accent);
}

.profile-award-icon-wrapper.profile-award-empty .profile-award-icon {
  color: var(--color-text-muted);
}

.profile-award-count-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 0.65rem;
  font-weight: bold;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Award tooltip */
.profile-award-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 16, 12, 0.95);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.5rem;
  min-width: 140px;
  max-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 100;
  pointer-events: none;
}

.profile-award-icon-wrapper:hover .profile-award-tooltip {
  opacity: 1;
  visibility: visible;
}

.profile-award-tooltip-title {
  font-weight: bold;
  color: var(--color-accent);
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

.profile-award-tooltip-desc {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}

.profile-award-tooltip-givers {
  font-size: 0.7rem;
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  padding-top: 0.3rem;
}

.profile-award-tooltip-empty {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Legacy award styles (keep for compatibility) */
.profile-award {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: rgba(184, 155, 94, 0.1);
  border: 1px solid rgba(184, 155, 94, 0.3);
  border-radius: 12px;
  font-size: 0.65rem;
  color: var(--color-text);
  cursor: default;
}

.profile-award-icon {
  font-size: 0.75rem;
}

.profile-award-count {
  color: var(--color-accent);
  font-weight: bold;
  margin-left: 0.2rem;
}

.profile-no-awards {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.profile-give-award-btn {
  font-size: 0.7rem;
  padding: 0.3rem 0.6rem;
  background: rgba(184, 155, 94, 0.15);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition);
  margin-top: 0.5rem;
}

.profile-give-award-btn:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* Give Award Modal Grid */
.give-award-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.give-award-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: rgba(42, 31, 24, 0.8);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.give-award-btn:hover {
  background: rgba(184, 155, 94, 0.2);
  border-color: var(--color-accent);
}

.give-award-btn-icon {
  width: 28px;
  height: 28px;
  background: rgba(184, 155, 94, 0.15);
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--color-accent);
  flex-shrink: 0;
}

.give-award-btn-name {
  flex: 1;
  font-weight: bold;
  color: var(--color-text);
  font-size: 0.85rem;
}

.give-award-btn-status {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.give-award-btn.give-award-btn-active {
  background: rgba(90, 125, 60, 0.2);
  border-color: rgba(90, 125, 60, 0.6);
}

.give-award-btn.give-award-btn-active .give-award-btn-status {
  color: #7da053;
}

.give-award-btn.give-award-btn-active:hover {
  background: rgba(167, 90, 58, 0.2);
  border-color: rgba(167, 90, 58, 0.6);
}

.give-award-btn.give-award-btn-active:hover .give-award-btn-status::after {
  content: ' - Click to rescind';
}

.give-award-btn.give-award-btn-used {
  opacity: 0.7;
}

.give-award-btn.give-award-btn-used .give-award-btn-status {
  color: var(--color-accent);
  font-style: italic;
}

.give-award-btn.give-award-btn-used:hover .give-award-btn-status::after {
  content: ' - Click to move here';
}

/* Battle Stats Row (compact inline) */
.profile-battle-stats-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  font-size: 0.7rem;
  margin-top: 0.25rem;
}

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

.profile-battle-stat strong {
  color: var(--color-text);
}

/* Owned Tiles List */
.profile-owned-tiles-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.profile-owned-tiles-list::-webkit-scrollbar {
  width: 6px;
}

.profile-owned-tiles-list::-webkit-scrollbar-track {
  background: rgba(20, 15, 10, 0.5);
}

.profile-owned-tiles-list::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.profile-owned-tile-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.profile-owned-tile-item:hover {
  background: rgba(184, 155, 94, 0.15);
}

.profile-owned-tile-name {
  font-size: 0.8rem;
  color: var(--color-text);
}

.profile-owned-tile-meta {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

/* ---------- Profile Click Tooltip (map double-click) ---------- */
.profile-click-tooltip {
  position: fixed;
  z-index: 10000;
  background: linear-gradient(180deg, rgba(26, 20, 15, 0.97) 0%, rgba(18, 14, 10, 0.97) 100%);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  min-width: 180px;
  max-width: 240px;
  pointer-events: auto;
}

.pct-container {
  padding: 0.6rem;
}

.pct-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pct-picture {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.pct-picture-default {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(184, 155, 94, 0.2);
  color: var(--color-accent);
  font-family: 'Valestris', serif;
  font-size: 1.1rem;
  font-weight: bold;
}

.pct-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.pct-name {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-text);
  font-family: 'Valestris', serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pct-link {
  font-size: 0.75rem;
  color: var(--color-accent);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.pct-link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.pct-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.2rem;
  align-self: flex-start;
  transition: color 0.2s ease;
}

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

/* ------------------ Profile Sections ------------------ */
.profile-section {
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.profile-content-wrapper .profile-section {
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.6rem;
}

/* Tiles section fills remaining height, list scrolls */
.profile-tiles-section {
  flex: 1 1 0;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.profile-tiles-section .profile-section-header {
  flex-shrink: 0;
}

.profile-tiles-section .profile-owned-tiles-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}

.profile-section-header {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(60, 47, 37, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;
}

.profile-bio {
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text);
}

.profile-bio-empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ------------------ Published Books ------------------ */
.profile-books-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.profile-book-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.85rem;
  transition: all var(--transition);
}

.profile-book-item:hover {
  background: rgba(184, 155, 94, 0.1);
  border-color: var(--color-accent);
}

.profile-book-item .book-icon {
  font-size: 1rem;
}

.profile-no-books {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.85rem;
  padding: 0.5rem;
}

/* ------------------ Profile Actions ------------------ */
.profile-actions-section {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  margin-top: 0.5rem;
  flex-shrink: 0;
}

.profile-content-wrapper .profile-actions-section {
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.6rem;
}

/* ------------------ Profile Edit Mode (Standardized Three-Section Layout) ------------------ */
.profile-edit-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.5rem;
}

/* Individual section box - standardized like marketplace sections */
.profile-edit-section-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

.profile-edit-section-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--profile-edit-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.profile-edit-section-box > * {
  position: relative;
  z-index: 1;
}

/* Section header */
.profile-edit-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}

/* Section content - scrollable area */
.profile-edit-section-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Field label (smaller than section header) */
.profile-edit-field-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 0.3rem;
}

/* Keep old section class for backwards compatibility, but deprecated */
.profile-edit-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.profile-edit-label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-weight: bold;
}

.profile-edit-picture-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.profile-edit-picture-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.profile-edit-picture-buttons .marketplace-action-btn {
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
}

/* Keep old msg-btn styles for backwards compatibility */
.profile-edit-picture-buttons .msg-btn {
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
}

.profile-edit-hint {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.profile-edit-bio {
  width: 100%;
  min-height: 50px;
  flex: 1;
  padding: 0.5rem;
  background: rgba(20, 16, 12, 0.8);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  font-family: "Valestris", serif;
  font-size: 0.8rem;
  resize: none;
}

.profile-edit-bio:focus {
  outline: none;
  border-color: var(--color-accent);
}

.profile-edit-bio::placeholder {
  color: var(--color-text-muted);
}

.profile-edit-counter {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: right;
}

/* ------------------ Pattern Selection ------------------ */
.profile-pattern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 0.4rem;
}

.profile-pattern-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem;
  background: rgba(20, 16, 12, 0.5);
  border: 2px solid var(--color-border);
  border-radius: 5px;
  cursor: pointer;
  transition: all var(--transition);
}

.profile-pattern-option:hover {
  border-color: var(--color-text-muted);
}

.profile-pattern-option.selected {
  border-color: var(--color-accent);
  background: rgba(184, 155, 94, 0.15);
}

.profile-pattern-preview {
  width: 32px;
  height: 32px;
  background-color: rgba(100, 80, 60, 0.5);
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  border: 1px solid rgba(60, 47, 37, 0.5);
}

.profile-pattern-name {
  font-size: 0.55rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-pattern-option.selected .profile-pattern-name {
  color: var(--color-accent);
}

/* ---------- Profile Background Picker ---------- */
.profile-bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
  gap: 0.4rem;
}

.profile-bg-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem;
  background: rgba(20, 16, 12, 0.5);
  border: 2px solid var(--color-border);
  border-radius: 5px;
  cursor: pointer;
  transition: all var(--transition);
}

.profile-bg-option:hover {
  border-color: var(--color-text-muted);
}

.profile-bg-option.selected {
  border-color: var(--color-accent);
  background: rgba(184, 155, 94, 0.15);
}

.profile-bg-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: rgba(100, 80, 60, 0.3);
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  border: 1px solid rgba(60, 47, 37, 0.5);
}

.profile-bg-name {
  font-size: 0.55rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-bg-option.selected .profile-bg-name {
  color: var(--color-accent);
}

/* ------------------ Save Footer (Fixed at bottom) ------------------ */
.profile-edit-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--color-border);
}

.profile-edit-save-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.profile-edit-status {
  font-size: 0.75rem;
  min-height: 1em;
  color: var(--color-text-muted);
}

/* ------------------ Search Modal ------------------ */
.profile-search-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  animation: fadeSlideDown 0.2s ease-out;
}

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

.profile-search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.profile-search-header h4 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-accent);
}

.profile-search-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: all var(--transition);
}

.profile-search-close:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.1);
}

.profile-search-body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.profile-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

.profile-search-btn {
  align-self: flex-end;
}

.profile-search-status {
  font-size: 0.8rem;
  min-height: 1em;
}


/* =========================================================
   RANKINGS TAB STYLES
   ========================================================= */

/* ------------------ Rankings Content Wrapper with Background ------------------ */
.rankings-content-wrapper {
  position: relative;
  border-radius: 8px;
  padding: 0.75rem;
  overflow: hidden;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.rankings-content-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--rankings-bg-image, url('/assets/backgrounds/rankings.webp'));
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.rankings-content-wrapper > * {
  position: relative;
  z-index: 1;
}

/* Area that holds both ranked lists, splits space equally */
.rankings-lists-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Combined Rankings Tab Styles */
.rankings-stats-bar {
  display: flex;
  justify-content: space-around;
  padding: 0.6rem 0.4rem;
  background: rgba(20, 16, 12, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.rankings-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.rankings-stat-value {
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-accent);
  font-family: 'ValestrisMes', serif;
}

.rankings-stat-label {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Each ranked section takes equal share of available space */
.rankings-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.rankings-section-header {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-accent);
  padding: 0.3rem 0;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid rgba(184, 155, 94, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* Paginated container fills its section, pins pagination at bottom */
.rankings-paginated-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.rankings-compact-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow: hidden;
}

.rankings-compact-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  background: rgba(20, 16, 12, 0.4);
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition);
}

.rankings-compact-item:hover {
  background: rgba(184, 155, 94, 0.1);
  border-color: rgba(184, 155, 94, 0.2);
}

.rankings-compact-item.rankings-item-self {
  border-color: var(--color-accent);
  background: rgba(184, 155, 94, 0.12);
}

.rankings-compact-rank {
  font-weight: bold;
  color: var(--color-accent);
  min-width: 28px;
  font-size: 0.7rem;
}

.rankings-compact-name {
  flex: 1;
  min-width: 0;
  font-weight: bold;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rankings-compact-kingdom {
  color: var(--color-text-muted);
  font-size: 0.65rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.rankings-compact-tiles {
  font-weight: bold;
  color: var(--color-text);
  min-width: 24px;
  text-align: right;
  font-family: 'ValestrisMes', serif;
}

.rankings-compact-view-btn {
  font-size: 0.6rem;
  padding: 0.15rem 0.4rem;
  background: rgba(184, 155, 94, 0.2);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  border-radius: 3px;
  cursor: pointer;
  transition: all var(--transition);
}

.rankings-compact-view-btn:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

.rankings-compact-item-kingdom .rankings-compact-name {
  color: var(--color-accent);
}

/* ------------------ Pagination Controls ------------------ */
.rankings-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.3rem 0 0.1rem;
  flex-shrink: 0;
}

.rankings-page-btn {
  font-size: 0.65rem;
  padding: 0.2rem 0.5rem;
  background: rgba(184, 155, 94, 0.15);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Sylvestris', serif;
  transition: all var(--transition);
}

.rankings-page-btn:hover:not(:disabled) {
  background: rgba(184, 155, 94, 0.3);
  border-color: var(--color-accent);
}

.rankings-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.rankings-page-label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  font-family: 'ValestrisMes', serif;
  min-width: 40px;
  text-align: center;
}

.rankings-page-loading {
  text-align: center;
  padding: 1rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-style: italic;
}

/* Legacy Rankings Styles (kept for compatibility) */
.rankings-header {
  font-size: 1.1rem;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.rankings-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 2rem;
}

.rankings-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rankings-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: rgba(20, 16, 12, 0.5);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: all var(--transition);
}

.rankings-item:hover {
  background: rgba(184, 155, 94, 0.1);
}

.rankings-item-self {
  border-color: var(--color-accent);
  background: rgba(184, 155, 94, 0.15);
}

.rankings-rank {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-accent);
  min-width: 32px;
  text-align: center;
}

.rankings-picture {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}

.rankings-picture-default {
  background: linear-gradient(135deg, #3c2f25 0%, #2a1f18 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--color-accent);
  font-weight: bold;
}

.rankings-info {
  flex: 1;
  min-width: 0;
}

.rankings-info-kingdom {
  padding-left: 0.5rem;
}

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

.rankings-you {
  color: var(--color-accent);
  font-size: 0.8rem;
}

.rankings-kingdom {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.rankings-kingdom-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.rankings-tiles {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-align: right;
  min-width: 55px;
}

.rankings-view-btn {
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  width: 100px;
}

.rankings-item-kingdom {
  padding: 0.75rem;
}


/* =========================================================
   STATS TAB STYLES
   ========================================================= */

.stats-header {
  font-size: 1.1rem;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.stats-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.5rem;
  background: rgba(20, 16, 12, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-align: center;
}

.stats-card-value {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--color-accent);
  line-height: 1.2;
}

.stats-card-label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.15rem;
}

.stats-events-section {
  margin-top: 1rem;
}

.stats-events-header {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(60, 47, 37, 0.5);
}

.stats-events-note {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}


/* =========================================================
   KINGDOM TAB STYLES
   ========================================================= */

/* ============================================================
   KINGDOM TAB - Standardized Layout
   ============================================================ */

/* Content wrapper with optional background (mirrors profile-content-wrapper) */
.kingdom-content-wrapper {
  position: relative;
  border-radius: 8px;
  padding: 0.75rem;
  overflow: hidden;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kingdom-content-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--kingdom-bg-image, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.kingdom-content-wrapper > * {
  position: relative;
  z-index: 1;
}

/* ---- Kingdom Info Bar (compact header) ---- */
.kingdom-info-bar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.kingdom-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kingdom-info-left {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.kingdom-info-name {
  font-size: 1.1rem;
  color: var(--color-accent);
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kingdom-info-stats {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.kingdom-info-right {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.kingdom-info-btn {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
}

.kingdom-settings-leave-btn {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  color: var(--color-error, #c44);
  border-color: var(--color-error, #c44);
  background: rgba(204, 68, 68, 0.08);
}

.kingdom-invite-row {
  display: flex;
  gap: 0.4rem;
}

.kingdom-invite-input {
  flex: 1;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  min-width: 120px;
}

.kingdom-invite-row .msg-btn {
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
}

/* ---- Collapsible Members List ---- */
.kingdom-members-collapse {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

.kingdom-members-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 180px;
  overflow-y: auto;
}

.kingdom-member-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  background: rgba(20, 16, 12, 0.5);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.kingdom-member-picture {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}

.kingdom-member-picture-default {
  background: linear-gradient(135deg, #3c2f25 0%, #2a1f18 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--color-accent);
  font-weight: bold;
}

.kingdom-member-info {
  flex: 1;
  min-width: 0;
}

.kingdom-member-name {
  font-size: 0.8rem;
  color: var(--color-text);
}

.kingdom-leader-badge {
  font-size: 0.65rem;
  color: var(--color-accent);
}

.kingdom-you-badge {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.kingdom-member-tiles {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.kingdom-view-btn {
  font-size: 0.65rem;
  padding: 0.2rem 0.4rem;
  width: auto;
}

/* ---- Settings Panel (collapsible) ---- */
.kingdom-settings-panel {
  background: rgba(20, 16, 12, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.6rem;
  flex-shrink: 0;
}

.kingdom-settings-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;
  margin-bottom: 0.4rem;
}

.kingdom-bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 0.4rem;
}

.kingdom-bg-option {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  text-align: center;
  transition: border-color 0.2s;
}

.kingdom-bg-option:hover {
  border-color: var(--color-text-muted);
}

.kingdom-bg-option.selected {
  border-color: var(--color-accent);
}

.kingdom-bg-preview {
  width: 100%;
  height: 40px;
  background-size: cover;
  background-position: center;
  background-color: rgba(30, 24, 18, 0.8);
}

.kingdom-bg-name {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  padding: 0.15rem;
}

/* ---- Forum Section ---- */
.kingdom-forum-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kingdom-forum-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.kingdom-forum-tab {
  flex: 1;
  padding: 0.4rem 0.3rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  text-align: center;
}

.kingdom-forum-tab:hover {
  color: var(--color-text);
}

.kingdom-forum-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.kingdom-forum-add-tab {
  flex: 0 0 auto;
  min-width: 32px;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-text-muted);
}

.kingdom-forum-add-tab:hover {
  color: var(--color-accent);
}

.kingdom-forum-tab-delete {
  margin-left: 0.3rem;
  font-size: 0.6rem;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  cursor: pointer;
}

.kingdom-forum-tab:hover .kingdom-forum-tab-delete {
  opacity: 1;
}

.kingdom-forum-tab-delete:hover {
  color: var(--color-error, #c44);
}

.kingdom-forum-new-cat-row {
  display: flex;
  gap: 0.3rem;
  padding: 0.4rem 0;
  flex-shrink: 0;
}

.kingdom-forum-new-cat-input {
  flex: 1;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  min-width: 120px;
}

.kingdom-forum-new-cat-row .msg-btn {
  font-size: 0.7rem;
  padding: 0.3rem 0.5rem;
}

/* Posts list (scrollable) */
.kingdom-forum-posts {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.4rem 0;
}

.kingdom-forum-loading {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}

.kingdom-forum-empty {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.85rem;
  text-align: center;
  padding: 1.5rem 0.5rem;
}

/* Individual post */
.kingdom-forum-post {
  background: rgba(20, 16, 12, 0.5);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}

.kingdom-forum-post.pinned {
  border-color: var(--color-accent);
  background: rgba(184, 155, 94, 0.08);
}

.kingdom-forum-post-header {
  padding: 0.4rem 0.6rem;
}

.kingdom-forum-post-title-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.kingdom-forum-pin-indicator {
  font-size: 0.6rem;
  color: var(--color-accent);
  background: rgba(184, 155, 94, 0.15);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: bold;
  flex-shrink: 0;
}

.kingdom-forum-post-title {
  font-size: 0.85rem;
  color: var(--color-text);
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kingdom-forum-post-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.kingdom-forum-post-author {
  font-size: 0.7rem;
  color: var(--color-accent);
}

.kingdom-forum-post-date {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.kingdom-forum-post-actions {
  margin-left: auto;
  display: flex;
  gap: 0.3rem;
}

.kingdom-forum-action-btn {
  font-size: 0.6rem;
  padding: 0.1rem 0.35rem;
  background: rgba(60, 47, 37, 0.5);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.kingdom-forum-action-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.kingdom-forum-delete-btn:hover {
  color: var(--color-error, #c44);
  border-color: var(--color-error, #c44);
}

/* Post content (collapsed by default, expanded on click) */
.kingdom-forum-post-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 0.6rem;
  font-size: 0.8rem;
  color: var(--color-text);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  transition: max-height 0.3s ease, padding 0.3s ease;
  border-top: 1px solid transparent;
}

.kingdom-forum-post.expanded .kingdom-forum-post-content {
  max-height: 400px;
  overflow-y: auto;
  padding: 0.5rem 0.6rem;
  border-top-color: var(--color-border);
}

/* Compose section */
.kingdom-forum-compose {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.kingdom-forum-compose-title {
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
}

.kingdom-forum-compose-body {
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  resize: vertical;
  min-height: 50px;
  max-height: 120px;
  font-family: inherit;
}

.kingdom-forum-compose-actions {
  display: flex;
  justify-content: flex-end;
}

.kingdom-forum-compose-actions .msg-btn {
  font-size: 0.75rem;
  padding: 0.3rem 0.8rem;
}

/* ---- Thread List View ---- */
.kingdom-forum-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kingdom-forum-thread-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.kingdom-forum-thread-item {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(60, 47, 37, 0.3);
  cursor: pointer;
  transition: background 0.15s ease;
}

.kingdom-forum-thread-item:hover {
  background: rgba(60, 47, 37, 0.2);
}

.kingdom-forum-thread-item.pinned {
  background: rgba(180, 140, 80, 0.1);
  border-left: 3px solid var(--color-gold, #b48c50);
}

.kingdom-forum-thread-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.kingdom-forum-pin-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  background: var(--color-gold, #b48c50);
  color: #1a1410;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: bold;
}

.kingdom-forum-thread-title {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-text, #e0d6c2);
}

.kingdom-forum-thread-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--color-text-muted, #a09080);
}

.kingdom-forum-meta-sep {
  opacity: 0.5;
}

.kingdom-forum-reply-count {
  margin-left: auto;
  background: rgba(60, 47, 37, 0.4);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
}

/* ---- Thread Detail View ---- */
.kingdom-forum-back-btn {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
}

.kingdom-forum-thread-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  gap: 0.75rem;
}

.kingdom-forum-original-post {
  background: rgba(60, 47, 37, 0.25);
  border-radius: 4px;
  padding: 0.75rem;
  border-left: 3px solid var(--color-gold, #b48c50);
}

.kingdom-forum-original-post .kingdom-forum-post-title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kingdom-forum-author-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.kingdom-forum-author-pic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(60, 47, 37, 0.5);
}

.kingdom-forum-author-name {
  font-weight: bold;
  color: var(--color-text, #e0d6c2);
}

.kingdom-forum-post-content {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text, #e0d6c2);
  margin-top: 0.5rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- Replies Section ---- */
.kingdom-forum-replies {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kingdom-forum-replies-header {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-text-muted, #a09080);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(60, 47, 37, 0.3);
}

.kingdom-forum-replies-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kingdom-forum-no-replies {
  font-size: 0.8rem;
  color: var(--color-text-muted, #a09080);
  font-style: italic;
  padding: 0.5rem 0;
}

.kingdom-forum-reply {
  background: rgba(60, 47, 37, 0.15);
  border-radius: 4px;
  padding: 0.5rem 0.6rem;
  border-left: 2px solid rgba(180, 140, 80, 0.4);
}

.kingdom-forum-reply-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
  flex-wrap: wrap;
}

.kingdom-forum-reply-content {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text, #e0d6c2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- Reply Compose ---- */
.kingdom-forum-reply-compose {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(60, 47, 37, 0.3);
  margin-top: auto;
}

.kingdom-forum-reply-input {
  width: 100%;
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
  resize: vertical;
  min-height: 40px;
  max-height: 100px;
  font-family: inherit;
}

/* ---- Independent View Sections ---- */
.kingdom-section {
  margin-bottom: 0.75rem;
}

.kingdom-section-header {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(60, 47, 37, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;
}

.kingdom-independent-status {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 0.25rem 0;
}

.kingdom-invites-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.kingdom-invite-item {
  display: flex;
  min-width: 150px;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  background: rgba(20, 16, 12, 0.5);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.kingdom-invite-info {
  flex: 1;
  min-width: 0;
}

.kingdom-invite-name {
  font-size: 0.9rem;
  color: var(--color-accent);
}

.kingdom-invite-from {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.kingdom-invite-buttons {
  display: flex;
  gap: 0.3rem;
}

.kingdom-invite-buttons .msg-btn {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
}

.kingdom-no-invites {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.85rem;
  padding: 0.5rem;
}

.kingdom-create-section {
  background: rgba(184, 155, 94, 0.05);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  padding: 0.75rem;
}

.kingdom-create-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kingdom-name-input {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

/* ============================================================
   EMPIRE PANEL REDESIGN - CSS Styles
   Add these styles to your styles.css file
   ============================================================ */

/* ---- EMPIRE OVERVIEW SECTION ---- */
.empire-overview {
  background: rgba(20, 15, 12, 0.8);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  position: relative;
  overflow: hidden;
}

.empire-overview::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--empire-bg-image, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.empire-overview > * {
  position: relative;
  z-index: 1;
}

.empire-overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.4rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(184, 155, 94, 0.2);
}

.empire-overview-title {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---- EMPIRE RESOURCE GRID ---- */
.empire-resource-grid-container {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Top row - Gold & Silver */
.empire-resource-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}

/* Main 7x4 grid */
.empire-resource-main-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
}

/* Standard resource cell */
.empire-resource-cell {
  position: relative;
  aspect-ratio: 1;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(184, 155, 94, 0.2);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.15rem;
  transition: all 0.15s ease;
  cursor: default;
}

.empire-resource-cell:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(184, 155, 94, 0.5);
}

.empire-resource-cell.has-tooltip:hover {
  z-index: 100;
}

/* Special cells for gold & silver */
.empire-resource-cell-special {
  position: relative;
  height: 36px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(184, 155, 94, 0.4);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.6rem;
  transition: all 0.15s ease;
  cursor: default;
}

.empire-resource-cell-special:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: var(--color-accent);
}

.empire-resource-cell-special.has-tooltip:hover {
  z-index: 100;
}

/* Resource name label */
.empire-resource-name {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  text-transform: capitalize;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.empire-resource-cell-special .empire-resource-name {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--color-text);
}

/* Quantity label */
.empire-resource-qty {
  font-size: 0.7rem;
  font-weight: bold;
  line-height: 1.1;
  font-family: 'ValestrisMes', serif;
}

.empire-resource-cell-special .empire-resource-qty {
  font-size: 1rem;
}

.empire-resource-qty.has-items {
  color: var(--color-accent);
}

.empire-resource-qty.no-items {
  color: rgba(255, 255, 255, 0.15);
}

/* ---- TOOLTIP STYLES ---- */
.empire-resource-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 12, 10, 0.97);
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
  min-width: 140px;
  max-width: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 1000;
  pointer-events: none;
}

/* Position tooltip below for cells near top */
.empire-resource-top-row .empire-resource-tooltip {
  bottom: auto;
  top: calc(100% + 6px);
}

/* Tooltip arrow */
.empire-resource-tooltip::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-accent);
}

.empire-resource-top-row .empire-resource-tooltip::before {
  bottom: auto;
  top: -6px;
  border-top: none;
  border-bottom: 6px solid var(--color-accent);
}

.empire-resource-cell:hover .empire-resource-tooltip,
.empire-resource-cell-special:hover .empire-resource-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Tooltip alignment for left sidebar - align to left edge */
.tooltip-align-left .empire-resource-tooltip {
  left: 0;
  transform: translateX(0);
}

.tooltip-align-left .empire-resource-tooltip::before {
  left: 20px;
  transform: translateX(0);
}

/* Tooltip alignment for right sidebar - align to right edge */
.tooltip-align-right .empire-resource-tooltip {
  left: auto;
  right: 0;
  transform: translateX(0);
}

.tooltip-align-right .empire-resource-tooltip::before {
  left: auto;
  right: 20px;
  transform: translateX(0);
}

.empire-tooltip-header {
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: capitalize;
  margin-bottom: 0.3rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(184, 155, 94, 0.3);
  white-space: nowrap;
}

.empire-tooltip-locations {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.empire-tooltip-location {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
}

.empire-tooltip-loc-name {
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.empire-tooltip-loc-amount {
  color: var(--color-accent);
  font-weight: bold;
  font-family: 'ValestrisMes', serif;
  white-space: nowrap;
}

/* ---- TILE LIST SECTION ---- */
/* Empire panel first-load placeholder. Shown only when switching into the
   Empire panel from another panel or on first open; on re-open the previously
   rendered Empire view stays visible until fresh data is swapped in. Matches
   the empire section chrome (border, inset frame) so it reads as intentional. */
.empire-loading {
  flex: 1;
  min-height: 0;
  margin: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--color-section-border);
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  background-image: linear-gradient(
    100deg,
    rgba(20, 15, 12, 0.85) 0%,
    rgba(20, 15, 12, 0.85) 38%,
    rgba(58, 48, 36, 0.85) 50%,
    rgba(20, 15, 12, 0.85) 62%,
    rgba(20, 15, 12, 0.85) 100%
  );
  background-size: 220% 100%;
  animation: empireLoadingShimmer 1.5s ease-in-out infinite;
}

@keyframes empireLoadingShimmer {
  0%   { background-position: 160% 0; }
  100% { background-position: -160% 0; }
}

/* ============================================================
   SHARED PANEL LOADING SHIMMER
   Reusable skeleton loader; replaces the old "Loading..." text.
   .panel-loading        -> full-view placeholder (framed)
   .panel-loading-inline -> lighter, borderless, for sub-sections
   ============================================================ */
.panel-loading {
  flex: 1;
  min-height: 200px;
  border-radius: 8px;
  border: 1px solid var(--color-section-border);
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  background-image: linear-gradient(
    100deg,
    rgba(20, 15, 12, 0.85) 0%,
    rgba(20, 15, 12, 0.85) 38%,
    rgba(58, 48, 36, 0.85) 50%,
    rgba(20, 15, 12, 0.85) 62%,
    rgba(20, 15, 12, 0.85) 100%
  );
  background-size: 220% 100%;
  animation: empireLoadingShimmer 1.5s ease-in-out infinite;
}

.panel-loading-inline {
  min-height: 2.5rem;
  border-radius: 6px;
  background-image: linear-gradient(
    100deg,
    rgba(20, 15, 12, 0.6) 0%,
    rgba(20, 15, 12, 0.6) 38%,
    rgba(58, 48, 36, 0.6) 50%,
    rgba(20, 15, 12, 0.6) 62%,
    rgba(20, 15, 12, 0.6) 100%
  );
  background-size: 220% 100%;
  animation: empireLoadingShimmer 1.5s ease-in-out infinite;
}

/* ============================================================
   SECTION-LEVEL LOADING PLACEHOLDER
   One sweep box per panel section, occupying that section's exact
   footprint. The section shell keeps its normal flex sizing (so the
   box and the loaded content share the same space - no layout shift),
   but while .section-loading is present the shell's own chrome
   (background, border, inset frame, bg image) is suppressed so only
   the box's unified border + corners + sweep show. The sweep itself is
   identical to .panel-loading; reuses empireLoadingShimmer keyframes.
   ============================================================ */

/* Scoped under .section-loading so this beats each panel's own
   `.<section> > *` rule (same specificity, but some of those rules appear
   later in this file and would otherwise force position:relative, collapsing
   the inset:0 sweep box to zero height). */
.section-loading > .section-loading-fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  /* Only the moving highlight. The section itself supplies the fixed
     dark tint (its background color) and the dimmed image (its ::before),
     so the loading frame IS the section's own frame - pixel-identical to
     the loaded section, with no separate border to misalign and no
     uncovered ring to gap. Color is the theme accent gold (--color-accent,
     rgba(184, 155, 94)) so the sweep matches the header text; edges stay at
     0 alpha so the band sweeps in and out. */
  background-image: linear-gradient(
    100deg,
    rgba(184, 155, 94, 0) 0%,
    rgba(184, 155, 94, 0) 38%,
    rgba(184, 155, 94, 0.4) 50%,
    rgba(184, 155, 94, 0) 62%,
    rgba(184, 155, 94, 0) 100%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: sectionLoadingSweep 0.6s ease-in-out infinite;
}

/* Single layer now, so a single position value is all that's needed. */
@keyframes sectionLoadingSweep {
  0%   { background-position: 160% 0; }
  100% { background-position: -160% 0; }
}

.empire-tile-list-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0.5rem 0 0 0;
  overflow: hidden;
  background: rgba(20, 15, 12, 0.8);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  position: relative;
}

.empire-tile-list-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--empire-territories-bg-image, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.empire-tile-list-section > * {
  position: relative;
  z-index: 1;
}

.empire-tile-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(184, 155, 94, 0.2);
}

.empire-tile-list-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.empire-tile-list-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Detailed view toggle switch */
.empire-detail-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 0.5rem;
}

.empire-detail-toggle-label {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  user-select: none;
  white-space: nowrap;
}

.empire-detail-switch {
  position: relative;
  width: 28px;
  height: 14px;
  background: #2a1f18;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s;
}

.empire-detail-switch.active {
  background: rgba(184, 155, 94, 0.3);
  border-color: var(--color-accent);
}

.empire-detail-switch::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 10px;
  background: var(--color-text-muted);
  border-radius: 50%;
  transition: all 0.3s;
}

.empire-detail-switch.active::after {
  left: 15px;
  background: var(--color-accent);
}

.empire-sort-label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: none;
  font-weight: normal;
}

.empire-sort-select {
  font-size: 0.65rem;
  padding: 0.15rem 0.3rem;
  background: rgba(20, 15, 12, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 3px;
  cursor: pointer;
  text-transform: none;
  font-weight: normal;
}

.empire-sort-select:hover {
  border-color: var(--color-accent);
}

.empire-sort-select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.empire-sort-save-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  background: rgba(20, 15, 12, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empire-sort-save-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.empire-sort-save-btn.saved {
  background: rgba(184, 155, 94, 0.3);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.empire-tile-count {
  background: rgba(184, 155, 94, 0.2);
  color: var(--color-accent);
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  font-size: 0.7rem;
}

/* Column headers */
.empire-tile-column-headers {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.5rem;
  padding-left: 1rem;
  font-size: 0.6rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(184, 155, 94, 0.1);
  background: rgba(20, 15, 12, 0.3);
}

.empire-col-name {
  flex: 1;
  min-width: 0;
}

.empire-col-coords {
  width: 55px;
  text-align: center;
}

.empire-col-terrain {
  width: 70px;
  text-align: center;
}

.empire-col-wains {
  width: 36px;
  text-align: right;
}

.empire-col-bp {
  width: 40px;
  text-align: right;
}

.empire-col-gold {
  width: 40px;
  text-align: right;
}

.empire-col-wealth {
  width: 42px;
  text-align: right;
}

.empire-tile-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.4rem 0.5rem;
  overflow-y: auto;
  flex: 1;
}

/* Single-line tile row */
.empire-tile-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 28px;
  padding: 0 0.5rem;
  background: rgba(26, 20, 17, 0.5);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.empire-tile-row:hover {
  background: rgba(42, 31, 24, 0.7);
  border-color: var(--color-border);
}

.empire-tile-row-name {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.empire-tile-row-coords {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-family: monospace;
  width: 55px;
  text-align: center;
}

.empire-tile-row-coords-clickable {
  cursor: pointer;
  transition: color 0.15s ease;
}

.empire-tile-row-coords-clickable:hover {
  color: var(--color-gold, #d4af37);
}

.empire-tile-row-terrain {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-transform: capitalize;
  opacity: 0.8;
  width: 70px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empire-tile-row-wains {
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--color-text);
  font-family: 'ValestrisMes', serif;
  white-space: nowrap;
  width: 36px;
  text-align: right;
}

.empire-tile-row-bp {
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--color-text);
  font-family: 'ValestrisMes', serif;
  white-space: nowrap;
  width: 40px;
  text-align: right;
}

.empire-tile-row-gold {
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--color-text);
  font-family: 'ValestrisMes', serif;
  white-space: nowrap;
  width: 40px;
  text-align: right;
}

.empire-tile-row-wealth {
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--color-accent);
  font-family: 'ValestrisMes', serif;
  white-space: nowrap;
  width: 42px;
  text-align: right;
}

/* ---- DETAILED VIEW STYLES ---- */
.empire-tile-row-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0.15rem;
}

.empire-tile-row-detailed {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.empire-tile-details-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.5rem 0.3rem 1.5rem;
  background: rgba(15, 12, 10, 0.6);
  border: 1px solid rgba(184, 155, 94, 0.1);
  border-top: none;
  border-radius: 0 0 4px 4px;
  font-size: 0.65rem;
  flex-wrap: wrap;
}

.empire-detail-troops,
.empire-detail-buildings,
.empire-detail-production {
  display: contents;
}

.empire-detail-separator {
  color: rgba(184, 155, 94, 0.25);
  padding: 0 0.15rem;
  font-size: 0.65rem;
  flex-shrink: 0;
  user-select: none;
}

.detail-label {
  color: var(--color-text-muted);
  font-size: 0.6rem;
  white-space: nowrap;
}

.detail-loading {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.6rem;
}

.detail-empty {
  color: var(--color-text-muted);
  opacity: 0.6;
  font-size: 0.6rem;
  font-style: italic;
  white-space: nowrap;
}

.detail-own-troops {
  color: var(--color-accent);
  font-weight: bold;
  background: rgba(184, 155, 94, 0.25);
  padding: 0rem 0.3rem;
  border-radius: 3px;
  border: 1px solid rgba(184, 155, 94, 0.3);
  line-height: 1.35;
}

.detail-allied-troops {
  color: #c4a8d0;
  font-weight: bold;
  background: rgba(160, 130, 150, 0.2);
  padding: 0rem 0.3rem;
  border-radius: 3px;
  border: 1px solid rgba(160, 130, 150, 0.3);
  line-height: 1.35;
}

.detail-enemy-troops {
  color: #c89080;
  font-weight: bold;
  background: rgba(180, 110, 90, 0.2);
  padding: 0rem 0.3rem;
  border-radius: 3px;
  border: 1px solid rgba(180, 110, 90, 0.3);
  line-height: 1.35;
}

.detail-craft-badge,
.detail-craft-badge-weapon,
.detail-build-badge,
.detail-build-badge-active {
  text-transform: capitalize;
}

.detail-craft-badge {
  background: rgba(170, 150, 100, 0.18);
  color: #c4b07a;
  padding: 0rem 0.3rem;
  border-radius: 3px;
  font-size: 0.6rem;
  white-space: nowrap;
  border: 1px solid rgba(170, 150, 100, 0.25);
  line-height: 1.35;
}

.detail-craft-badge-weapon {
  background: rgba(160, 150, 140, 0.18);
  color: #b5ada0;
  padding: 0rem 0.3rem;
  border-radius: 3px;
  font-size: 0.6rem;
  white-space: nowrap;
  border: 1px solid rgba(160, 150, 140, 0.25);
  line-height: 1.35;
}

.detail-build-badge {
  background: rgba(140, 150, 110, 0.18);
  color: #a8b08a;
  padding: 0rem 0.3rem;
  border-radius: 3px;
  font-size: 0.6rem;
  white-space: nowrap;
  border: 1px solid rgba(140, 150, 110, 0.25);
  line-height: 1.35;
}

.detail-build-badge-active {
  background: rgba(140, 155, 115, 0.25);
  color: #b5bf98;
  padding: 0rem 0.3rem;
  border-radius: 3px;
  font-size: 0.6rem;
  white-space: nowrap;
  border: 1px solid rgba(140, 155, 115, 0.35);
  line-height: 1.35;
}

/* ---- BOTTOM REFRESH BAR ---- */
/* ---- REPORT STATUS BAR (bottom of territories list) ---- */
.empire-report-status-bar {
  padding: 0.4rem 0.6rem;
  border-top: 1px solid rgba(184, 155, 94, 0.2);
  background: transparent;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.65rem;
}

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

.report-status-time {
  color: var(--color-accent);
  font-weight: bold;
}

.report-status-separator {
  color: rgba(184, 155, 94, 0.25);
  padding: 0 0.3rem;
}

/* ---- SCROLLBAR FOR TILE LIST ---- */
.empire-tile-list::-webkit-scrollbar {
  width: 6px;
}

.empire-tile-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.empire-tile-list::-webkit-scrollbar-thumb {
  background: rgba(184, 155, 94, 0.3);
  border-radius: 3px;
}

.empire-tile-list::-webkit-scrollbar-thumb:hover {
  background: rgba(184, 155, 94, 0.5);
}
/* ============================================================
   MESSENGER TOOLTIP (for armies outside empire)
   ============================================================ */

.messenger-tooltip {
  position: fixed;
  bottom: calc(var(--bar-height) + 30px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 24, 20, 0.95);
  border: 2px solid rgba(140, 100, 60, 0.6);
  border-radius: 8px;
  min-width: 380px;
  max-width: 420px;
  max-height: 70vh;
  z-index: 1500;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6);
  font-family: 'Theo', serif;
  display: flex;
  flex-direction: column;
}

.messenger-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.8rem;
  background: rgba(140, 100, 60, 0.2);
  border-bottom: 1px solid rgba(140, 100, 60, 0.4);
  border-radius: 6px 6px 0 0;
}

.messenger-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.messenger-icon {
  font-family: 'ValestrisMes', serif;
  font-size: 0.85rem;
  color: #c4a060;
  padding: 0.15rem 0.4rem;
  background: rgba(140, 100, 60, 0.3);
  border-radius: 4px;
}

.messenger-army-name {
  font-family: 'ValestrisMes', serif;
  font-size: 0.95rem;
  color: var(--color-accent);
}

.messenger-close {
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--color-text-muted);
  transition: color 0.2s;
  padding: 0.2rem;
}

.messenger-close:hover {
  color: var(--color-text);
}

.messenger-delay-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  background: rgba(100, 80, 50, 0.15);
  border-bottom: 1px solid rgba(107, 87, 63, 0.3);
  font-size: 0.8rem;
}

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

.delay-value {
  color: #c4a060;
  font-weight: bold;
}

.delay-detail {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  opacity: 0.8;
}

/* Messenger Tabs */
.messenger-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  background: rgba(20, 15, 12, 0.6);
  border-bottom: 1px solid var(--color-border);
}

.messenger-tab {
  flex: 1;
  padding: 0.5rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-family: 'Theo', serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.messenger-tab:hover {
  color: var(--color-text);
  background: rgba(100, 80, 50, 0.1);
}

.messenger-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  background: rgba(184, 155, 94, 0.1);
}

/* Messenger Content */
.messenger-content {
  flex: 1;
  overflow-y: auto;
  max-height: 350px;
}

.messenger-tab-content {
  padding: 0.75rem;
}

/* Messenger Orders Tab */
.messenger-orders-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.messenger-orders-info {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: 0.25rem;
}

.messenger-order-policy {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.5rem;
  background: rgba(26, 20, 17, 0.5);
  border: 1px solid rgba(107, 87, 63, 0.2);
  border-radius: 6px;
}

.messenger-order-policy label {
  font-size: 0.85rem;
  color: var(--color-text);
}

.messenger-order-highlight {
  background: rgba(184, 155, 94, 0.08);
  border-color: rgba(184, 155, 94, 0.3);
}

.messenger-policy-label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.messenger-policy-label .policy-title {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-text);
}

.messenger-policy-label .policy-description {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.messenger-toggle-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* Messenger Movement Tab */
.messenger-movement-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.messenger-route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-accent);
}

.waypoint-count {
  font-size: 0.8rem;
  font-weight: normal;
  color: var(--color-text-muted);
}

.messenger-current-location {
  display: flex;
  gap: 0.4rem;
  font-size: 0.8rem;
  padding: 0.4rem 0.5rem;
  background: rgba(90, 125, 60, 0.15);
  border-radius: 4px;
}

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

.location-value {
  color: #7da053;
  font-weight: bold;
}

.messenger-route-empty {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 0.5rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.messenger-route-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 120px;
  overflow-y: auto;
}

.messenger-route-point {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  background: rgba(26, 20, 17, 0.5);
  border: 1px solid rgba(107, 87, 63, 0.3);
  border-radius: 4px;
  font-size: 0.8rem;
}

.messenger-route-point .route-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(184, 155, 94, 0.2);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--color-accent);
}

.messenger-route-point .route-name {
  flex: 1;
  color: var(--color-text);
}

.messenger-route-point .route-remove-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  background: rgba(167, 90, 58, 0.3);
  border: 1px solid rgba(167, 90, 58, 0.5);
  border-radius: 3px;
  color: #c76a4a;
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.messenger-route-point:hover .route-remove-btn {
  opacity: 1;
}

.messenger-route-controls {
  display: flex;
  gap: 0.4rem;
}

.messenger-march-section {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(107, 87, 63, 0.3);
}

.march-info {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}

.march-options {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.march-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text);
  cursor: pointer;
}

.march-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.march-option input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--color-accent);
}

.march-option input[type="checkbox"]:checked {
  background: rgba(184, 155, 94, 0.25);
  border-color: var(--color-accent);
}

.march-option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0px;
  width: 4px;
  height: 9px;
  border: solid var(--color-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.march-option input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Messenger Territory Tab */
.messenger-territory-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.messenger-territory-info {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.messenger-territory-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.territory-action {
  padding: 0.6rem;
  background: rgba(26, 20, 17, 0.5);
  border: 1px solid rgba(107, 87, 63, 0.3);
  border-radius: 6px;
}

.territory-action-disabled {
  opacity: 0.5;
}

.territory-action-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}

.action-title {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-text);
}

.action-status {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.action-description {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}

.action-checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text);
  cursor: pointer;
}

.action-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.action-checkbox input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--color-accent);
}

.action-checkbox input[type="checkbox"]:checked {
  background: rgba(184, 155, 94, 0.25);
  border-color: var(--color-accent);
}

.action-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0px;
  width: 4px;
  height: 9px;
  border: solid var(--color-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.action-checkbox input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Messenger Footer */
.messenger-footer {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-top: 1px solid var(--color-border);
  background: rgba(20, 15, 12, 0.8);
  border-radius: 0 0 6px 6px;
}

.messenger-btn {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: rgba(60, 47, 37, 0.5);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  color: var(--color-text);
  font-family: 'Theo', serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.messenger-btn:hover:not(:disabled) {
  background: rgba(184, 155, 94, 0.15);
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}

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

.messenger-send-btn {
  background: rgba(140, 100, 60, 0.4);
  border-color: rgba(140, 100, 60, 0.7);
  color: #c4a060;
}

.messenger-send-btn:hover:not(:disabled) {
  background: rgba(140, 100, 60, 0.6);
  border-color: #c4a060;
}

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

.messenger-cancel-btn {
  background: rgba(60, 45, 35, 0.6);
  color: var(--color-text-muted);
}

.messenger-cancel-btn:hover {
  background: rgba(167, 90, 58, 0.3);
  border-color: rgba(167, 90, 58, 0.6);
  color: #c76a4a;
}

/* Active state for route selection button */
.messenger-btn.msg-btn-active {
  background: rgba(90, 125, 60, 0.4);
  border-color: rgba(90, 125, 60, 0.7);
  color: #7da053;
}

/* Disabled state for detachments button */
.army-tooltip-detachments-btn.disabled,
.army-tooltip-detachments-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(100, 100, 100, 0.2);
  border-color: rgba(100, 100, 100, 0.4);
}

.army-tooltip-detachments-btn.disabled:hover,
.army-tooltip-detachments-btn:disabled:hover {
  background: rgba(100, 100, 100, 0.2);
  border-color: rgba(100, 100, 100, 0.4);
}

/* Pending messenger banner */
.messenger-pending-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  background: rgba(196, 160, 96, 0.2);
  border-bottom: 1px solid rgba(196, 160, 96, 0.4);
}

.pending-icon {
  font-family: 'ValestrisMes', serif;
  font-size: 0.75rem;
  color: #c4a060;
  padding: 0.1rem 0.35rem;
  background: rgba(196, 160, 96, 0.3);
  border-radius: 3px;
  animation: pulse-pending 2s ease-in-out infinite;
}

@keyframes pulse-pending {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.pending-text {
  flex: 1;
  font-size: 0.8rem;
  color: #c4a060;
}

.pending-cancel-btn {
  padding: 0.2rem 0.5rem;
  background: rgba(167, 90, 58, 0.3);
  border: 1px solid rgba(167, 90, 58, 0.5);
  border-radius: 4px;
  color: #c76a4a;
  font-size: 0.75rem;
  font-family: 'Theo', serif;
  cursor: pointer;
  transition: all 0.2s;
}

.pending-cancel-btn:hover {
  background: rgba(167, 90, 58, 0.5);
  border-color: #c76a4a;
}


/* =========================================================
   MARKETPLACE PANEL STYLES
   ========================================================= */

.marketplace-panel-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.5rem;
}

.marketplace-header {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.marketplace-title {
  color: var(--color-accent);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

/* Controls section - boxed like other marketplace sections */
.marketplace-controls-section {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  overflow: hidden;
}

.marketplace-controls-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--market-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.marketplace-controls-section > * {
  position: relative;
  z-index: 1;
}

.marketplace-controls {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Action buttons - unified style */
.marketplace-action-btn {
  padding: 0.3rem 0.5rem;
  font-family: 'Theo', serif;
  font-size: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.marketplace-btn-create {
  background: rgba(90, 125, 60, 0.3);
  border: 1px solid rgba(90, 125, 60, 0.5);
  color: #7d9d5c;
}

.marketplace-btn-create:hover {
  background: rgba(90, 125, 60, 0.5);
  border-color: rgba(90, 125, 60, 0.7);
}

.marketplace-btn-send {
  background: rgba(184, 155, 94, 0.2);
  border: 1px solid rgba(184, 155, 94, 0.4);
  color: var(--color-accent);
}

.marketplace-btn-send:hover {
  background: rgba(184, 155, 94, 0.35);
  border-color: rgba(184, 155, 94, 0.6);
}

.marketplace-filter {
  padding: 0.3rem 0.4rem;
  background: rgba(30, 24, 20, 0.8);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-family: 'Theo', serif;
  font-size: 0.75rem;
  min-width: 80px;
}

.marketplace-search {
  padding: 0.3rem 0.4rem;
  background: rgba(30, 24, 20, 0.8);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-family: 'Theo', serif;
  font-size: 0.75rem;
  width: 100px;
}

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

.marketplace-search-full {
  width: 100%;
}

/* Send Wagon button in shipments header - tab style */
.marketplace-btn-send-wagon {
  background: rgba(184, 155, 94, 0.2);
  border-color: rgba(184, 155, 94, 0.4);
  color: var(--color-accent);
}

.marketplace-btn-send-wagon:hover {
  background: rgba(184, 155, 94, 0.4);
  border-color: rgba(184, 155, 94, 0.7);
}

/* Sections */
.marketplace-offers-section,
.marketplace-agreements-section,
.marketplace-shipments-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

.marketplace-offers-section::before,
.marketplace-agreements-section::before,
.marketplace-shipments-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--market-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.marketplace-offers-section > *,
.marketplace-agreements-section > *,
.marketplace-shipments-section > * {
  position: relative;
  z-index: 1;
}

.marketplace-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}

.marketplace-divider {
  display: none;
}

/* Lists */
.marketplace-offers-list,
.marketplace-agreements-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.marketplace-loading,
.marketplace-empty,
.marketplace-error {
  text-align: center;
  color: var(--color-text-muted);
  padding: 1rem;
  font-style: italic;
}

.marketplace-error {
  color: var(--color-error);
}

/* Tabs */
.marketplace-tabs {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.marketplace-tab {
  padding: 0.2rem 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-muted);
  font-family: 'Theo', serif;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.marketplace-tab:hover {
  background: rgba(0, 0, 0, 0.5);
}

.marketplace-tab.active {
  background: rgba(184, 155, 94, 0.2);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Create Offer button in offers header - tab style with green accent */
.marketplace-btn-create-offer {
  background: rgba(90, 125, 60, 0.2);
  border-color: rgba(90, 125, 60, 0.5);
  color: #7d9d5c;
}

.marketplace-btn-create-offer:hover {
  background: rgba(90, 125, 60, 0.4);
  border-color: rgba(90, 125, 60, 0.7);
  color: #9dbd7c;
}

.marketplace-auto-archive {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

.marketplace-auto-archive input {
  cursor: pointer;
}

/* Offer items - compact design */
.marketplace-offer-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  background: rgba(26, 20, 17, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.marketplace-offer-item:hover {
  background: rgba(42, 31, 24, 0.8);
}

.marketplace-offer-item.own-offer {
  border-color: rgba(184, 155, 94, 0.4);
  background: rgba(184, 155, 94, 0.1);
}

.offer-col-player {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
}

.offer-col-info {
  font-size: 0.75rem;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offer-gives-value {
  font-weight: bold;
  color: #7d9d5c;
}

.offer-requires-value {
  color: #c76a4a;
}

.offer-col-distance {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Accept button - transparent tab style */
.offer-accept-btn {
  background: rgba(90, 125, 60, 0.2);
  border-color: rgba(90, 125, 60, 0.5);
  color: #7d9d5c;
}

.offer-accept-btn:hover {
  background: rgba(90, 125, 60, 0.4);
  border-color: rgba(90, 125, 60, 0.7);
  color: #9dbd7c;
}

/* Cancel button - transparent tab style */
.offer-cancel-btn {
  background: rgba(167, 90, 58, 0.2);
  border-color: rgba(167, 90, 58, 0.5);
  color: #c76a4a;
}

.offer-cancel-btn:hover {
  background: rgba(167, 90, 58, 0.4);
  border-color: rgba(167, 90, 58, 0.7);
}

/* Agreement items */
.marketplace-agreement-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  background: rgba(26, 20, 17, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.marketplace-agreement-item:hover {
  background: rgba(42, 31, 24, 0.8);
}

.marketplace-agreement-item.agreement-fulfilled {
  border-color: rgba(90, 125, 60, 0.5);
  background: rgba(90, 125, 60, 0.1);
}

.marketplace-agreement-item.agreement-nullified {
  border-color: rgba(100, 100, 100, 0.5);
  background: rgba(100, 100, 100, 0.1);
  opacity: 0.7;
}

.agreement-header-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.agreement-id {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-text);
}

.agreement-status-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-weight: bold;
}

.agreement-status-badge.status-active {
  background: rgba(184, 155, 94, 0.2);
  color: var(--color-accent);
}

.agreement-status-badge.status-fulfilled {
  background: rgba(90, 125, 60, 0.3);
  color: #7d9d5c;
}

.agreement-status-badge.status-nullified {
  background: rgba(100, 100, 100, 0.3);
  color: #888;
}

.agreement-party-line {
  font-size: 0.75rem;
  color: var(--color-text);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

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

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

.party-status-badge {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.party-status-badge.status-pending {
  color: #c4a060;
}

.party-status-badge.status-in_transit {
  color: #5a9bd4;
}

.party-status-badge.status-delivered,
.party-status-badge.status-complete {
  color: #7d9d5c;
}

.party-status-badge.status-returning {
  color: #9d7d5c;
}

.wagon-return-info {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  font-style: italic;
  width: 100%;
  margin-top: 0.1rem;
}

.agreement-actions {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.agreement-nullify-btn {
  background: rgba(100, 100, 100, 0.3) !important;
  border-color: rgba(100, 100, 100, 0.5) !important;
  color: #aaa !important;
  font-size: 0.7rem !important;
  padding: 0.2rem 0.4rem !important;
}

.agreement-nullify-btn.requested {
  opacity: 0.6;
}

.agreement-nullify-btn.confirm {
  background: rgba(167, 90, 58, 0.3) !important;
  border-color: rgba(167, 90, 58, 0.5) !important;
  color: #c76a4a !important;
}

.agreement-send-btn {
  font-size: 0.7rem !important;
  padding: 0.2rem 0.4rem !important;
}

.agreement-archive-btn {
  font-size: 0.7rem !important;
  padding: 0.2rem 0.4rem !important;
  margin-top: 0.3rem;
  align-self: flex-end;
}

/* Wagon bubble */
/* Marketplace title row: title left, wagon info right */
.marketplace-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.marketplace-title-row .marketplace-title {
  margin-bottom: 0;
}

/* Wagon info inline */
.marketplace-wagon-inline {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.marketplace-wagon-inline .wagon-count {
  font-size: 0.75rem;
  color: var(--color-text);
}

.marketplace-wagon-inline .wagon-craft-btn {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
}

/* Shipments Section */

.marketplace-shipments-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Shipment Items - Empire-style row design */
.marketplace-shipment-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.4rem 0.5rem;
  background: rgba(26, 20, 17, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.75rem;
}

.marketplace-shipment-item:hover {
  background: rgba(42, 31, 24, 0.8);
}

.marketplace-shipment-item.shipment-outbound {
  border-left: 3px solid rgba(184, 155, 94, 0.6);
}

.marketplace-shipment-item.shipment-returning {
  border-left: 3px solid rgba(100, 140, 180, 0.6);
}

.shipment-main-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.shipment-phase-icon {
  font-size: 0.9rem;
  width: 1.2rem;
  text-align: center;
  color: var(--color-text-muted);
}

.shipment-outbound .shipment-phase-icon {
  color: var(--color-accent);
}

.shipment-returning .shipment-phase-icon {
  color: #6a9cc0;
}

.shipment-wagons {
  background: rgba(184, 155, 94, 0.2);
  color: var(--color-accent);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.7rem;
  white-space: nowrap;
}

.shipment-location {
  flex: 1;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shipment-direction {
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

.shipment-to {
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

.shipment-tile-name {
  color: var(--color-text);
}

.shipment-ruler {
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

.shipment-arrival-container {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.shipment-arrival-label {
  color: var(--color-text-muted);
  font-size: 0.65rem;
}

.shipment-arrival {
  background: rgba(30, 24, 20, 0.8);
  color: var(--color-text-muted);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  white-space: nowrap;
}

.shipment-arrival.arrival-soon {
  background: rgba(184, 155, 94, 0.2);
  color: var(--color-accent);
}

.shipment-arrival.arrival-imminent {
  background: rgba(90, 125, 60, 0.3);
  color: #7d9d5c;
}

.shipment-contents-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  padding-left: 1.7rem;
}

.shipment-contents-label {
  color: var(--color-text-muted);
  font-size: 0.65rem;
}

.shipment-resource-badge {
  background: rgba(184, 155, 94, 0.15);
  color: var(--color-text);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.65rem;
  border: 1px solid rgba(184, 155, 94, 0.25);
}

/* Modal styles */
.marketplace-modal {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.5rem;
}

/* Standardized create/modal section - fills panel with background image support */
.marketplace-create-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

.marketplace-create-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--market-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.marketplace-create-section > * {
  position: relative;
  z-index: 1;
}

/* Section action button (used in section headers) */
.marketplace-section-action-btn {
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  background: rgba(42, 31, 24, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Theo', serif;
}

.marketplace-section-action-btn:hover {
  background: rgba(184, 155, 94, 0.2);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Panel buttons for marketplace forms */
.marketplace-panel-btn {
  flex: 1;
  padding: 0.5rem;
  font-size: 0.8rem;
  background: rgba(42, 31, 24, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Theo', serif;
}

.marketplace-panel-btn:hover {
  background: rgba(184, 155, 94, 0.2);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.marketplace-panel-btn.marketplace-btn-primary {
  background: rgba(90, 125, 60, 0.3);
  border-color: rgba(90, 125, 60, 0.6);
  color: #7da053;
}

.marketplace-panel-btn.marketplace-btn-primary:hover {
  background: rgba(90, 125, 60, 0.5);
  border-color: #7da053;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.75rem;
}

.modal-header h3 {
  color: var(--color-accent);
  font-size: 1rem;
  margin: 0;
}

.modal-close-btn {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn:hover {
  background: rgba(167, 90, 58, 0.3);
  border-color: rgba(167, 90, 58, 0.5);
}

.modal-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-group label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.form-row {
  display: flex;
  gap: 0.4rem;
}

.form-row select {
  flex: 2;
}

.form-row input[type="number"] {
  flex: 1;
}

.form-note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.form-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

/* Send wagon modal */
.send-info {
  background: rgba(0, 0, 0, 0.2);
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

.send-info p {
  margin: 0.2rem 0;
}

.send-details {
  font-size: 0.8rem;
  color: var(--color-text);
}

.send-details .warning {
  color: var(--color-error);
  font-weight: bold;
}

/* Multi-tile source cards */
.sources-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.source-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.75rem;
}

.source-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-weight: bold;
  font-size: 0.9rem;
  color: var(--color-accent);
}

.source-remove-btn {
  background: rgba(167, 90, 58, 0.6);
  border: none;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
}

.source-remove-btn:hover {
  background: rgba(167, 90, 58, 0.9);
}

.source-details {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  color: var(--color-text);
}

.source-details p {
  margin: 0.2rem 0;
}

.source-details .warning {
  color: var(--color-error);
  font-weight: bold;
}

.source-details .muted {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Quantity slider */
.slider-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.quantity-slider {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
}

.quantity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
}

.quantity-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.slider-value {
  min-width: 60px;
  text-align: right;
  font-weight: bold;
  font-size: 0.9rem;
}

/* Send summary with progress bar */
.send-summary {
  background: rgba(0, 0, 0, 0.2);
  padding: 0.75rem;
  border-radius: 6px;
  margin: 0.5rem 0;
}

.send-summary p {
  margin: 0.25rem 0;
  font-size: 0.85rem;
}

.send-summary .warning {
  color: var(--color-error);
}

.send-summary .success {
  color: #6a9955;
  font-weight: bold;
}

.summary-progress {
  margin-bottom: 0.5rem;
}

.progress-bar {
  height: 12px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), #6a9955);
  border-radius: 6px;
  transition: width 0.2s ease;
}

/* Craft wagon modal */
.craft-cost-info {
  background: rgba(184, 155, 94, 0.1);
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(184, 155, 94, 0.3);
}

.craft-cost-info p {
  margin: 0;
  font-size: 0.85rem;
}

.craft-details {
  font-size: 0.8rem;
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.2);
  padding: 0.5rem;
  border-radius: 4px;
}

.craft-details p {
  margin: 0.2rem 0;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.slider-row .craft-slider {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
}

.slider-row .craft-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
}

.slider-row .craft-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.qty-display {
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-accent);
  min-width: 24px;
  text-align: center;
}

.total-cost-display {
  font-size: 0.8rem;
  color: var(--color-text);
}

.total-cost-display p {
  margin: 0;
}

/* ============================================================
   SEND WAGON SECTION (marketplace section pattern)
   ============================================================ */
.send-wagon-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

.send-wagon-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--market-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.send-wagon-section > * {
  position: relative;
  z-index: 1;
}

/* Send wagon header bar */
.send-wagon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}

.send-wagon-header-title {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.send-wagon-close-btn {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  font-family: 'Theo', serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-wagon-close-btn:hover {
  background: rgba(167, 90, 58, 0.3);
  border-color: rgba(167, 90, 58, 0.5);
}

/* Routing area - compact source/dest selectors */
.send-wagon-routing {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(107, 87, 63, 0.2);
}

.send-wagon-route-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.send-wagon-route-label {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: uppercase;
  width: 38px;
}

.send-wagon-route-select {
  flex: 1;
  padding: 0.25rem 0.3rem;
  background: rgba(30, 24, 20, 0.8);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-family: 'Theo', serif;
  font-size: 0.7rem;
  min-width: 0;
}

/* Destination filter row */
.send-wagon-filter-row {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.send-wagon-filter-btn {
  padding: 0.2rem 0.4rem;
  font-family: 'Theo', serif;
  font-size: 0.65rem;
  border-radius: 3px;
  cursor: pointer;
  background: rgba(42, 31, 24, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: all 0.2s;
  white-space: nowrap;
}

.send-wagon-filter-btn:hover {
  background: rgba(184, 155, 94, 0.2);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.send-wagon-filter-btn.active {
  background: rgba(184, 155, 94, 0.2);
  border-color: rgba(184, 155, 94, 0.5);
  color: var(--color-accent);
}

.send-wagon-filter-input {
  flex: 1;
  padding: 0.2rem 0.3rem;
  background: rgba(30, 24, 20, 0.8);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text);
  font-family: 'Theo', serif;
  font-size: 0.65rem;
  min-width: 0;
}

.send-wagon-filter-input::placeholder {
  color: var(--color-text-muted);
}

.send-wagon-dest-status {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 0.1rem 0;
}

/* Player suggestions dropdown */
.send-wagon-suggestions {
  max-height: 100px;
  overflow-y: auto;
  background: rgba(35, 28, 23, 0.95);
  border: 1px solid rgba(107, 87, 63, 0.5);
  border-radius: 4px;
  display: none;
}

.send-wagon-suggestion {
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  font-size: 0.75rem;
  border-bottom: 1px solid rgba(107, 87, 63, 0.2);
  color: var(--color-text);
}

.send-wagon-suggestion:hover {
  background: rgba(107, 87, 63, 0.3);
}

.send-wagon-suggestion:last-child {
  border-bottom: none;
}

/* ============================================================
   WAGON SHIPMENT RESOURCE SLIDERS (two-column)
   ============================================================ */
.resource-sliders-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.25rem;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.resource-sliders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}

.shipment-slider-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.35rem 0.4rem;
  background: rgba(26, 20, 17, 0.6);
  border: 1px solid rgba(107, 87, 63, 0.2);
  border-radius: 4px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.shipment-slider-row:hover {
  border-color: rgba(107, 87, 63, 0.4);
  background: rgba(26, 20, 17, 0.8);
}

.shipment-slider-row.has-value {
  border-color: rgba(184, 155, 94, 0.4);
  background: rgba(35, 28, 23, 0.7);
}

.shipment-slider-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.shipment-slider-label {
  text-transform: capitalize;
  font-size: 0.75rem;
  color: var(--color-text);
}

.shipment-slider-values {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
}

.shipment-slider {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, 
    rgba(184, 155, 94, 0.3) 0%, 
    rgba(0, 0, 0, 0.4) 0%);
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.shipment-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 10px;
  background: linear-gradient(135deg, #d4b896 0%, #b89b5e 50%, #9a7d42 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.shipment-slider::-webkit-slider-thumb:hover {
  transform: scaleX(1.15);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.shipment-slider::-webkit-slider-thumb:active {
  transform: scaleX(1.05);
}

.shipment-slider::-moz-range-thumb {
  width: 20px;
  height: 10px;
  background: linear-gradient(135deg, #d4b896 0%, #b89b5e 50%, #9a7d42 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.shipment-slider::-moz-range-track {
  height: 5px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
}

.shipment-slider-value {
  text-align: right;
  font-family: 'ValestrisMes', serif;
  font-size: 0.8rem;
  font-weight: bold;
  color: #666;
  transition: color 0.2s ease;
}

.shipment-slider-value.has-value {
  color: var(--color-accent);
}

.shipment-slider-max {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

/* Shipment summary box */
.shipment-summary {
  flex-shrink: 0;
  margin-top: 0.4rem;
  padding: 0.4rem 0.5rem;
  background: rgba(26, 20, 17, 0.8);
  border: 1px solid rgba(107, 87, 63, 0.5);
  border-radius: 6px;
}

.shipment-summary-title {
  font-weight: bold;
  margin-bottom: 0.25rem;
  color: var(--color-text);
  font-size: 0.8rem;
}

.shipment-summary-contents {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}

.shipment-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  font-size: 0.75rem;
}

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

.shipment-summary-item.warning {
  color: #c76a4a;
}

.shipment-summary-item.ready {
  color: #5a7d3c;
}

.shipment-summary-value {
  font-weight: bold;
}

.shipment-summary-value.sufficient {
  color: var(--color-accent);
}

.shipment-summary-value.insufficient {
  color: #c76a4a;
}

/* Send wagon footer buttons */
.send-wagon-footer {
  flex-shrink: 0;
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   CRAFT WAGON SECTION (standardized marketplace section pattern)
   ============================================================ */
.craft-wagon-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
}

.craft-wagon-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--market-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.craft-wagon-section > * {
  position: relative;
  z-index: 1;
}

/* Craft wagon header bar */
.craft-wagon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}

.craft-wagon-header-title {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.craft-wagon-close-btn {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  font-family: 'Theo', serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.craft-wagon-close-btn:hover {
  background: rgba(167, 90, 58, 0.3);
  border-color: rgba(167, 90, 58, 0.5);
}

/* Cost info banner */
.craft-wagon-cost-banner {
  flex-shrink: 0;
  padding: 0.4rem 0.5rem;
  background: rgba(42, 31, 24, 0.6);
  border: 1px solid rgba(107, 87, 63, 0.4);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.craft-wagon-cost-banner strong {
  color: var(--color-accent);
}

/* Tile selector row */
.craft-wagon-tile-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.craft-wagon-label {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: uppercase;
  width: 55px;
}

.craft-wagon-select {
  flex: 1;
  padding: 0.3rem 0.4rem;
  background: rgba(30, 24, 20, 0.8);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-family: 'Theo', serif;
  font-size: 0.75rem;
  min-width: 0;
}

/* Tile inventory details */
.craft-wagon-details {
  flex-shrink: 0;
  padding: 0.4rem 0.5rem;
  background: rgba(26, 20, 17, 0.6);
  border: 1px solid rgba(107, 87, 63, 0.3);
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.craft-wagon-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.15rem 0;
  font-size: 0.75rem;
}

.craft-wagon-detail-label {
  color: var(--color-text-muted);
}

.craft-wagon-detail-value {
  color: var(--color-text);
}

.craft-wagon-detail-value.craft-wagon-max {
  color: var(--color-accent);
  font-weight: bold;
}

/* Quantity slider section */
.craft-wagon-qty-section {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.craft-wagon-slider-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.craft-wagon-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  outline: none;
}

.craft-wagon-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 12px;
  background: linear-gradient(135deg, #d4b896 0%, #b89b5e 50%, #9a7d42 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease;
}

.craft-wagon-slider::-webkit-slider-thumb:hover {
  transform: scaleX(1.1);
}

.craft-wagon-slider::-moz-range-thumb {
  width: 18px;
  height: 12px;
  background: linear-gradient(135deg, #d4b896 0%, #b89b5e 50%, #9a7d42 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  cursor: pointer;
}

.craft-wagon-slider::-moz-range-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
}

.craft-wagon-qty-display {
  font-family: 'ValestrisMes', serif;
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-accent);
  min-width: 28px;
  text-align: center;
}

/* Total cost display */
.craft-wagon-total-cost {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: rgba(26, 20, 17, 0.5);
  border: 1px solid rgba(107, 87, 63, 0.3);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: center;
}

.craft-wagon-total-cost strong {
  color: var(--color-accent);
}

/* Footer buttons */
.craft-wagon-footer {
  flex-shrink: 0;
  display: flex;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.4rem;
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   CRAFT WAGON OVERVIEW GRID (per-tile wagons + queue ETA)
   ============================================================ */
.craft-wagon-grid {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
  border: 1px solid rgba(107, 87, 63, 0.3);
  border-radius: 4px;
  background: rgba(26, 20, 17, 0.6);
  overflow: hidden;
}

.craft-wagon-grid-header,
.craft-wagon-grid-row {
  display: grid;
  grid-template-columns: 1fr 56px 104px;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
}

.craft-wagon-grid-header {
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-accent);
}

.craft-wagon-grid-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.craft-wagon-grid-row {
  font-size: 0.75rem;
  border-bottom: 1px solid rgba(107, 87, 63, 0.15);
}

.craft-wagon-grid-row:last-child {
  border-bottom: none;
}

.cwg-col-tile {
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwg-col-wagons {
  color: var(--color-text);
  text-align: right;
}

.cwg-col-eta {
  color: var(--color-text-muted);
  text-align: right;
}

.craft-wagon-grid-row-flash {
  animation: craftWagonFlash 1s ease-out;
}

@keyframes craftWagonFlash {
  0% { background: rgba(90, 125, 60, 0.5); }
  100% { background: transparent; }
}

/* Modal Overlay Styles */
.modal-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: 10000;
}

.modal-content {
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 90%;
  max-height: 90%;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.give-award-modal {
  width: 320px;
  text-align: center;
}

/* ============================================================
   UNIFIED ARMY DETAIL VIEW - CSS Styles
   Compact, efficient layout combining Overview, Movements, Orders
   ============================================================ */
   
/* Main wrapper */
/* Army detail panel wrapper */
.army-detail-panel-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.5rem;
  gap: 0.5rem;
}

/* Army detail section - single box with bg image support */
.army-detail-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  gap: 0.4rem;
}

.army-detail-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--army-section-bg, none);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.army-detail-section > * {
  position: relative;
  z-index: 1;
}

/* ---- HEADER SECTION ---- */
.army-detail-header-unified {
  flex-shrink: 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

.army-header-back-row {
  margin-bottom: 0.3rem;
}

.army-header-back-row .msg-btn {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
}

.army-header-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.army-name-display-unified {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--color-accent);
  cursor: pointer;
}

.army-name-display-unified:hover {
  text-decoration: underline;
}

.army-header-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.army-location-compact {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.army-morale-badge {
  font-size: 0.7rem;
  font-weight: bold;
  padding: 0.15rem 0.4rem;
  border-radius: 8px;
  font-family: 'ValestrisMes', serif;
}

.army-morale-badge.morale-high {
  background: rgba(90, 125, 60, 0.3);
  color: #7d9d5c;
  border: 1px solid rgba(90, 125, 60, 0.5);
}

.army-morale-badge.morale-medium {
  background: rgba(184, 155, 94, 0.3);
  color: var(--color-accent);
  border: 1px solid rgba(184, 155, 94, 0.5);
}

.army-morale-badge.morale-low {
  background: rgba(167, 90, 58, 0.3);
  color: #c76a4a;
  border: 1px solid rgba(167, 90, 58, 0.5);
}

/* Status badge in detail header - sized to match morale badge */
.army-status-badge-unified {
  font-size: 0.7rem;
  font-weight: bold;
  padding: 0.15rem 0.4rem;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.army-status-badge-unified.status-resting {
  background: rgba(107, 90, 60, 0.3);
  color: #9d8a5c;
  border: 1px solid #6b5a3c;
}

.army-status-badge-unified.status-ready {
  background: rgba(90, 125, 60, 0.3);
  color: #7d9d5c;
  border: 1px solid #5a7d3c;
}

.army-status-badge-unified.status-marching {
  background: rgba(184, 155, 94, 0.3);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.army-status-badge-unified.status-engaged {
  background: rgba(180, 80, 60, 0.3);
  color: #d4735a;
  border: 1px solid #b4503c;
  animation: engagedPulse 1.5s ease-in-out infinite;
}

.army-status-badge-unified.status-fighting {
  background: rgba(167, 90, 58, 0.3);
  color: #c76a4a;
  border: 1px solid #a75a3a;
  animation: fightingPulse 1.5s ease-in-out infinite;
}

.army-status-badge-unified.status-retreating {
  background: rgba(140, 100, 70, 0.3);
  color: #b08860;
  border: 1px solid #8c6446;
}

.army-status-badge-unified.status-routing {
  background: rgba(120, 60, 50, 0.3);
  color: #a06050;
  border: 1px solid #783c32;
  animation: routingPulse 2s ease-in-out infinite;
}

.army-status-badge-unified.status-routed {
  background: rgba(107, 68, 35, 0.3);
  color: #8b6443;
  border: 1px solid #6b4423;
}

/* ---- SCROLLABLE CONTENT ---- */
.army-detail-content-unified {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-right: 0.25rem;
}

/* ---- UNIFIED SECTION STYLING ---- */
.army-section-unified {
  background: rgba(20, 15, 12, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.4rem;
}

.section-header-unified {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid rgba(184, 155, 94, 0.15);
}

.section-title {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-total-badge {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-accent);
  font-family: 'ValestrisMes', serif;
}

.section-badge {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.3);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}

/* ---- TROOPS SECTION ---- */
.troops-grid-unified {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.2rem;
}

.troop-cell-unified {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.2rem 0.1rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(184, 155, 94, 0.15);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.troop-cell-unified.has-troops {
  border-color: rgba(184, 155, 94, 0.3);
}

/* Troop cell background image */
.troop-cell-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.2;
  border-radius: inherit;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.troop-cell-unified:hover .troop-cell-bg {
  opacity: 0.3;
}

/* Ships cell spans all 4 columns */
.troop-cell-ships {
  grid-column: 1 / -1;
  flex-direction: column;
}

.troop-name-unified {
  font-size: 0.55rem;
  color: var(--color-text-muted);
  text-transform: capitalize;
  text-align: center;
  line-height: 1.1;
  position: relative;
  z-index: 1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.troop-count-unified {
  font-size: 0.75rem;
  font-weight: bold;
  font-family: 'ValestrisMes', serif;
  position: relative;
  z-index: 1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.troop-count-unified.has-troops {
  color: var(--color-accent);
}

.troop-count-unified.no-troops {
  color: rgba(255, 255, 255, 0.2);
}

/* ---- SUPPLIES SECTION ---- */
.supplies-table-unified {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.supplies-table-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.2rem;
}

.supplies-header-row .supplies-cell {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.supplies-values-row .supplies-cell {
  text-align: center;
}

.supplies-cell.supplies-value {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--color-accent);
  font-family: 'ValestrisMes', serif;
}

.supplies-warning-compact {
  font-size: 0.65rem;
  color: #c76a4a;
  text-align: center;
  margin-top: 0.25rem;
  padding: 0.2rem;
  background: rgba(167, 90, 58, 0.15);
  border-radius: 3px;
}

.supplies-note-compact {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
  margin-top: 0.25rem;
}

.wagon-controls-unified {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tile-wagon-info-compact {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.wagon-btn-group {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.wagon-btn-compact {
  padding: 0.2rem 0.3rem !important;
  font-size: 0.6rem !important;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

/* ---- MOVEMENTS SECTION ---- */
.movements-section-unified .movement-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.status-label {
  font-size: 0.75rem;
  color: var(--color-text);
}

.status-label.status-engaged {
  color: #d4735a;
}

.status-label.status-retreating,
.status-label.status-routing {
  color: #c76a4a;
}

.countdown-badge {
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--color-accent);
  background: rgba(184, 155, 94, 0.2);
  padding: 0.15rem 0.4rem;
  border-radius: 8px;
  font-family: 'ValestrisMes', serif;
}

.claim-row-unified {
  margin-bottom: 0.3rem;
}

.claim-btn-unified {
  width: 100%;
  padding: 0.3rem !important;
  font-size: 0.75rem !important;
}

.route-display-unified {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.3rem;
  max-height: 160px;
  overflow-y: auto;
  margin-bottom: 0.3rem;
}

.route-controls-unified {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.3rem;
}

.route-controls-unified .msg-btn {
  flex: 1;
  padding: 0.25rem !important;
  font-size: 0.7rem !important;
}

.march-btn-unified {
  width: 100%;
  padding: 0.3rem !important;
  font-size: 0.75rem !important;
}

.resting-note {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  display: block;
  margin-top: 0.25rem;
}

.outside-warning-compact {
  font-size: 0.65rem;
  color: #c76a4a;
  background: rgba(167, 90, 58, 0.15);
  border: 1px solid rgba(167, 90, 58, 0.3);
  border-radius: 3px;
  padding: 0.3rem;
  text-align: center;
  margin: 0.25rem 0;
}

.route-instructions-compact {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: 0.25rem;
}

.upcoming-waypoints-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.upcoming-wp-item {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.3);
  padding: 0.15rem 0.3rem;
  border-radius: 3px;
}

.upcoming-wp-more {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ---- ORDERS SECTION ---- */
.orders-container-unified {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.orders-container-unified.orders-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.order-row-unified {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.order-label-block {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}

.order-label-unified {
  font-size: 0.75rem;
  color: var(--color-text);
}

.order-desc-unified {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.order-select-unified {
  padding: 0.2rem 0.3rem;
  font-size: 0.7rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text);
  font-family: 'ValestrisMes', serif;
  cursor: pointer;
  min-width: 70px;
}

.order-select-unified:focus {
  outline: none;
  border-color: var(--color-accent);
}

.order-select-unified option {
  background: #1a1411;
}

.orders-status-unified {
  font-size: 0.65rem;
  font-style: italic;
}

/* Toggle switch - compact version */
.toggle-container-unified {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.switch-unified {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 16px;
}

.switch-unified input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-unified {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: 0.3s;
}

.slider-unified:before {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  left: 2px;
  bottom: 2px;
  background: var(--color-text-muted);
  border-radius: 50%;
  transition: 0.3s;
}

.switch-unified input:checked + .slider-unified {
  background: rgba(184, 155, 94, 0.3);
  border-color: var(--color-accent);
}

.switch-unified input:checked + .slider-unified:before {
  transform: translateX(16px);
  background: var(--color-accent);
}

.switch-unified input:disabled + .slider-unified {
  opacity: 0.5;
  cursor: not-allowed;
}

.toggle-status-unified {
  font-size: 0.65rem;
  font-weight: bold;
  min-width: 20px;
  color: var(--color-text-muted);
}

/* ---- ACTIONS SECTION ---- */
.army-actions-unified {
  flex-shrink: 0;
  padding-top: 0.4rem;
  border-top: 1px solid var(--color-border);
}

.army-actions-unified .msg-btn {
  width: 100%;
  padding: 0.35rem !important;
  font-size: 0.75rem !important;
}

/* ---- MOVEMENTS SECTION ---- */
.movements-section-unified {
  overflow-y: visible;
}
/* ============================================================
   PLANNER SYSTEM (Empire Planner + Territory Planner)
   ============================================================ */

/* Overlay backdrop - thin wrapper for cleanup, no visual role */
.planner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 9999;
  pointer-events: none;
}

/* Popup container - fixed position, draggable */
.planner-popup {
  position: fixed;
  background: #1a1410;
  border: 1px solid var(--color-section-border);
  border-radius: 8px;
  width: 560px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), inset 0 0 0 4px rgba(20, 16, 12, 0.7);
  padding: 1rem;
  pointer-events: auto;
  font-family: 'ValestrisMes', Georgia, 'Times New Roman', serif;
}

.planner-popup::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/planner.jpg'), url('/assets/planner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.1;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

.planner-popup > * {
  position: relative;
  z-index: 1;
}

/* Territory planner fixed height */
.planner-popup.territory-planner {
  height: 85vh;
}

/* Popup header - draggable, styled like settings menu */
.planner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: -1rem -1rem 0.5rem -1rem;
  padding: 0.6rem 0.9rem;
  background: rgba(184, 155, 94, 0.15);
  border-bottom: 1px solid var(--color-border);
  border-radius: 6px 6px 0 0;
  cursor: grab;
  user-select: none;
}

.planner-header:active {
  cursor: grabbing;
}

.planner-header-hint {
  width: 100%;
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.planner-title {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-accent, #b89b5e);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.planner-close-btn {
  background: none;
  border: none;
  color: var(--color-text-muted, #999);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0;
  transition: color 0.2s;
}

.planner-close-btn:hover {
  color: var(--color-text, #eee);
}

/* Section titles */
.planner-section {
  margin-bottom: 0.3rem;
}

.planner-section-title {
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--color-text-muted, #999);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 0.3rem;
}

/* Divider between sections */
.planner-divider {
  border: none;
  border-top: 1px solid rgba(184, 155, 94, 0.2);
  margin: 0.4rem 0;
}

/* Inventory report button inside planner */
/* ---- PLANNER REPORT STATUS ---- */
.planner-report-status {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.7rem;
}

.planner-report-status-label {
  color: var(--color-text-muted);
}

.planner-report-status-time {
  color: var(--color-accent);
  font-weight: bold;
}

/* Control rows (label + select/input) */
.planner-control-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.planner-label {
  font-size: 0.7rem;
  color: var(--color-text-muted, #999);
  white-space: nowrap;
}

.planner-select {
  flex: 1;
  background: rgba(20, 15, 12, 0.8);
  border: 1px solid var(--color-border, #3c2f25);
  color: var(--color-text, #d2c3a3);
  padding: 0.25rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-family: 'ValestrisMes', serif;
  cursor: pointer;
  transition: border-color 0.15s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%238b7a62' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  padding-right: 1.2rem;
}

.planner-select:hover {
  border-color: var(--color-accent, #b89b5e);
}

.planner-select:focus {
  outline: none;
  border-color: var(--color-accent, #b89b5e);
}

.planner-select option {
  background: #1a1411;
  color: var(--color-text, #d2c3a3);
  font-family: 'ValestrisMes', serif;
  padding: 0.3rem;
}

.planner-input {
  width: 60px;
  background: rgba(20, 15, 12, 0.8);
  border: 1px solid var(--color-border, #3c2f25);
  color: var(--color-text, #d2c3a3);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-family: 'ValestrisMes', serif;
  text-align: center;
}

.planner-input:focus {
  outline: none;
  border-color: var(--color-accent, #b89b5e);
}

/* Button rows */
.planner-btn-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.3rem;
  flex-wrap: wrap;
}

.planner-action-btn {
  flex: 1;
  font-size: 0.65rem;
  padding: 0.25rem 0.5rem;
  min-width: 0;
}

/* Compact inline row (dropdown + buttons on one line) */
.planner-compact-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.3rem;
  align-items: stretch;
}

.planner-compact-row .planner-select {
  min-width: 0;
  width: 100%;
}

.planner-compact-btn {
  font-size: 0.6rem;
  padding: 0.25rem 0.4rem;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Quantity selector wheel */
.planner-qty-wheel {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 0.3rem;
  height: 24px;
  border: 1px solid rgba(184, 155, 94, 0.3);
  border-radius: 3px;
  overflow: hidden;
  user-select: none;
}

.planner-qty-wheel-btn {
  width: 28px;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: var(--color-text-muted, #999);
  cursor: pointer;
  font-size: 0.75rem;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.planner-qty-wheel-btn:hover {
  background: rgba(184, 155, 94, 0.2);
  color: var(--color-accent, #b89b5e);
}

.planner-qty-wheel-btn:active {
  background: rgba(184, 155, 94, 0.35);
}

.planner-qty-wheel-track {
  flex: 1;
  height: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  overflow: hidden;
}

.planner-qty-wheel-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(184, 155, 94, 0.15);
  pointer-events: none;
  transition: width 0.1s ease;
}

.planner-qty-wheel-ticks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.planner-qty-wheel-tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(184, 155, 94, 0.12);
}

.planner-qty-wheel-value {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--color-accent, #b89b5e);
  pointer-events: none;
  letter-spacing: 0.5px;
}

.planner-qty-wheel-label {
  font-size: 0.55rem;
  color: var(--color-text-muted, #999);
  margin-left: 0.3rem;
  font-weight: normal;
}

.planner-btn-cancel {
  background: rgba(180, 60, 60, 0.3);
  border-color: rgba(180, 60, 60, 0.5);
}

.planner-btn-cancel:hover {
  background: rgba(180, 60, 60, 0.5);
}

/* Result line */
.planner-result {
  font-size: 0.7rem;
  margin-top: 0.3rem;
  min-height: 1em;
  text-align: center;
}

.planner-result-success {
  color: var(--color-accent, #b89b5e);
}

.planner-result-error {
  color: var(--color-error, #e74c3c);
}

/* Header button (inline with section titles) */
.planner-header-btn {
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  flex-shrink: 0;
  width: 100px;
  height: 36px;
  text-align: center;
}

/* Tile header row: name/meta left, planner button right */
.tile-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.1rem 0.4rem 0.1rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(184, 155, 94, 0.2);
}

.tile-header-left {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  flex: 1;
}

.tile-header-meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tile header button group */
.tile-header-buttons {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
  margin-left: auto;
}

.tile-header-btn {
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
  width: 90px;
  text-align: center;
  flex-shrink: 0;
}

/* Queue table container */
.planner-queue-container {
  margin-bottom: 0.3rem;
  max-height: 140px;
  overflow-y: auto;
}

/* Crafting queue: evenly spaced 3-column grid */
.craft-queue-even .planner-table-header,
.craft-queue-even .planner-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.25rem;
}

.craft-queue-even .planner-table-header span,
.craft-queue-even .planner-table-row span {
  width: auto;
  flex: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-empty {
  font-size: 0.7rem;
  color: var(--color-text-muted, #999);
  text-align: center;
  padding: 0.4rem;
  font-style: italic;
}

/* Table header */
.planner-table-header {
  display: flex;
  gap: 0.25rem;
  padding: 0.15rem 0.4rem;
  border-bottom: 1px solid rgba(184, 155, 94, 0.3);
  font-size: 0.6rem;
  color: var(--color-text-muted, #999);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Table row */
.planner-table-row {
  display: flex;
  gap: 0.25rem;
  padding: 0.15rem 0.4rem;
  height: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.7rem;
  align-items: center;
  transition: background 0.15s ease;
}

.planner-table-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Column widths */
.pq-col-num {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: var(--color-text-muted, #999);
  font-size: 0.65rem;
}

.pq-col-building {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pq-col-rate {
  width: 50px;
  text-align: center;
  flex-shrink: 0;
  color: var(--color-text-muted, #999);
  font-size: 0.65rem;
}

.pq-col-eta {
  width: 80px;
  text-align: center;
  flex-shrink: 0;
  color: var(--color-accent, #b89b5e);
  font-size: 0.65rem;
}

.pq-col-status {
  width: 75px;
  text-align: center;
  flex-shrink: 0;
  font-size: 0.65rem;
}

.pq-col-action {
  width: 50px;
  text-align: center;
  flex-shrink: 0;
}

/* Status badges */
.status-improving {
  color: #7a9a6d;
}

.status-planned {
  color: var(--color-text-muted, #999);
}

/* Remove button in table */
.planner-remove-btn {
  font-size: 0.6rem;
  padding: 0.1rem 0.3rem;
}

/* Add row in territory planner */
.planner-add-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
}

.planner-cost-preview {
  font-size: 0.65rem;
  color: var(--color-text-muted, #999);
  font-style: italic;
}

/* Treasury balance display */
.planner-treasury-balance {
  font-size: 0.75rem;
  color: var(--color-accent, #b89b5e);
  font-weight: bold;
  padding: 0.25rem 0.4rem;
  margin-bottom: 0.3rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
}

/* Treasury slider controls */
.treasury-slider-container {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.treasury-slider-row {
  display: grid;
  grid-template-columns: 65px 1fr 55px;
  align-items: center;
  gap: 0.3rem;
}

.treasury-slider-label {
  font-size: 0.65rem;
  color: var(--color-text, #d2c3a3);
  white-space: nowrap;
}

.treasury-slider-marks {
  font-size: 0.6rem;
  color: var(--color-text-muted, #999);
  text-align: right;
  white-space: nowrap;
}

.treasury-slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.treasury-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent, #b89b5e);
  cursor: pointer;
}

.treasury-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent, #b89b5e);
  border: none;
  cursor: pointer;
}

.treasury-convert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

/* Territory planner narrower add select (-40px from default) */
.tp-add-select {
  flex: 1 1 auto;
  max-width: 150px;
}

/* Territory planner marks balance inline */
.tp-marks-balance {
  white-space: nowrap;
  color: var(--color-accent, #b89b5e);
  font-style: normal;
}

/* Dispatch queue hint text */
.planner-dispatch-hint {
  font-size: 0.6rem;
  color: var(--color-text-muted, #999);
  font-style: italic;
  margin-bottom: 0.3rem;
  padding: 0.2rem 0.4rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  line-height: 1.3;
}

/* Territory overview grid columns */
.ep-tiles-col-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ep-tiles-col-marks {
  width: 50px;
  text-align: center;
  flex-shrink: 0;
  color: var(--color-accent, #b89b5e);
}

.ep-tiles-col-queue {
  width: 70px;
  text-align: center;
  flex-shrink: 0;
}

.ep-tiles-active {
  color: #7a9a6d;
}

.ep-tiles-idle {
  color: var(--color-text-muted, #999);
  opacity: 0.5;
}

/* Tiles container scrollable area */
.planner-tiles-container {
  max-height: 200px;
  overflow-y: auto;
}

.ep-tiles-header {
  position: sticky;
  top: 0;
  background: #1a1410;
  z-index: 1;
}

/* Territory planner buildings overview grid */
.tp-buildings-grid {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Two-column variant for territory planner */
.tp-buildings-grid.tp-buildings-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem;
}

/* Payment toggle (gold/silver) */
.planner-pay-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.planner-pay-label {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
  cursor: default;
}

.planner-pay-label.planner-pay-active {
  color: var(--color-accent);
  font-weight: bold;
}

.planner-toggle-switch {
  width: 26px;
  height: 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s ease;
  flex-shrink: 0;
}

.planner-toggle-switch:hover {
  border-color: var(--color-accent);
}

.planner-toggle-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 10px;
  background: var(--color-text-muted);
  border-radius: 50%;
  transition: all 0.2s ease;
}

.planner-toggle-knob.toggled {
  left: 13px;
  background: var(--color-accent);
}

.tp-building-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 22px;
  padding: 0 0.4rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  transition: background 0.15s ease;
}

.tp-building-item:hover {
  background: rgba(0, 0, 0, 0.4);
}

.tp-building-item.tp-not-constructed {
  opacity: 0.55;
}

.tp-building-item.tp-not-constructed:hover {
  opacity: 0.75;
}

.tp-building-name {
  font-size: 0.7rem;
  color: var(--color-text, #d2c3a3);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ============================================================
   DEV TERRAIN EDITOR TOOL
   ============================================================ */

#dev-tools-btn {
  position: absolute;
  right: 8.5rem;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: #1a1411;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  transition: all var(--transition);
}

#dev-tools-btn:hover {
  background: #2a1f18;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

#dev-tools-btn.dev-tools-active {
  background: #3a2010;
  color: #e8a640;
  border-color: #e8a640;
}

#dev-terrain-tooltip {
  position: fixed;
  z-index: 1200;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.6rem;
  box-shadow: var(--shadow);
  min-width: 200px;
  font-family: 'ValestrisMes', serif;
}

.dev-terrain-header {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.dev-terrain-header-armed {
  color: #e8a640;
  font-weight: bold;
}

.dev-terrain-header-disarmed {
  color: var(--color-text-muted);
  font-style: italic;
}

.dev-terrain-header-tile {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

.dev-terrain-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dev-terrain-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: #1a1411;
  color: var(--color-text);
  font-family: 'ValestrisMes', serif;
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.dev-terrain-btn:hover {
  background: #2a1f18;
  border-color: var(--color-accent);
}

.dev-terrain-btn-armed {
  background: #3a2a14;
  border-color: #e8a640;
  color: #e8a640;
  box-shadow: 0 0 4px rgba(232, 166, 64, 0.4);
}

.dev-terrain-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  flex-shrink: 0;
}

.dev-terrain-label {
  flex: 1;
}

.dev-terrain-status {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
  text-align: center;
  min-height: 0.9rem;
}

.dev-terrain-brush-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--color-border);
}

.dev-terrain-brush-label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.dev-terrain-brush-btn {
  flex: 1;
  padding: 0.2rem 0;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: #1a1411;
  color: var(--color-text-muted);
  font-family: 'ValestrisMes', serif;
  font-size: 0.65rem;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.dev-terrain-brush-btn:hover {
  background: #2a1f18;
  border-color: var(--color-accent);
  color: var(--color-text);
}

.dev-terrain-brush-btn-active {
  background: #2a2010;
  border-color: #e8a640;
  color: #e8a640;
}

/* ------------------ LOGIN / REGISTER FADE TRANSITIONS ------------------ */
#login-wrapper {
  transition: opacity 0.5s ease;
}

#login-wrapper.fade-out {
  opacity: 0;
  pointer-events: none;
}

#login-wrapper.hidden {
  display: none !important;
}

#login-section,
#register-section {
  transition: opacity 0.5s ease;
}

#login-section.fade-out,
#register-section.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* ------------------ LOADING SCREEN ------------------ */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
}

#loading-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/loading-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  pointer-events: none;
}

#loading-screen.visible {
  opacity: 1;
  pointer-events: auto;
}

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

#loading-content {
  text-align: center;
  color: var(--color-text);
  font-family: 'Sylvestris', serif;
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem 2rem;
  width: 340px;
  overflow: hidden;
}

#loading-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/auth-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--radius);
}

#loading-content > * {
  position: relative;
  z-index: 1;
}

#loading-content h2 {
  font-size: 2.5rem;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}

#loading-status {
  font-size: 1rem;
  margin-bottom: 1rem;
  opacity: 0.7;
}

#loading-bar-outer {
  width: 300px;
  height: 14px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  overflow: hidden;
  margin: 0 auto;
}

#loading-bar-inner {
  width: 0%;
  height: 100%;
  background: var(--color-accent);
  border-radius: 7px;
  transition: width 0.15s ease;
}
/* ============================================================
   NOTIFICATION BUBBLES (replaces browser alert())
   ============================================================ */
#notification-container {
  position: fixed;
  bottom: calc(var(--bar-height) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
  width: 85vw;
}

.game-notification {
  pointer-events: auto;
  padding: 0.85rem 1.25rem;
  min-height: 3.2em;
  border-radius: 14px;
  font-family: 'ValestrisMes', Georgia, 'Times New Roman', serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(210, 195, 163, 0.95);
  background: rgba(35, 28, 22, 0.65);
  border: 1px solid rgba(80, 65, 50, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(12px);
  animation: notif-in 0.35s ease forwards;
  cursor: pointer;
  word-wrap: break-word;
  display: flex;
  align-items: center;
}

.game-notification.notif-out {
  animation: notif-out 0.3s ease forwards;
}

.game-notification.notif-error {
  border-color: rgba(180, 100, 70, 0.35);
  background: rgba(55, 30, 25, 0.6);
  color: rgba(235, 180, 160, 0.95);
}

.game-notification.notif-success {
  border-color: rgba(100, 140, 70, 0.35);
  background: rgba(30, 45, 25, 0.6);
  color: rgba(180, 210, 150, 0.95);
}

.game-notification.notif-info {
  border-color: rgba(184, 155, 94, 0.3);
}

@keyframes notif-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes notif-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(12px) scale(0.97); }
}

/* ============================================================
   STYLED CONFIRM MODAL (replaces browser confirm())
   ============================================================ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: confirm-fade-in 0.2s ease forwards;
}

.confirm-overlay.confirm-closing {
  animation: confirm-fade-out 0.2s ease forwards;
}

.confirm-box {
  background: rgba(30, 24, 19, 0.98);
  border: 1px solid rgba(184, 155, 94, 0.5);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
  padding: 1.2rem 1.4rem 1rem;
  max-width: 380px;
  width: 88vw;
  font-family: 'ValestrisMes', Georgia, 'Times New Roman', serif;
  transform: scale(0.95);
  animation: confirm-pop-in 0.2s ease forwards;
}

.confirm-closing .confirm-box {
  animation: confirm-pop-out 0.2s ease forwards;
}

.confirm-message {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text, #d2c3a3);
  white-space: pre-line;
  margin-bottom: 1rem;
}

.confirm-buttons {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

.confirm-btn {
  padding: 0.35rem 1rem;
  border-radius: 4px;
  font-family: 'ValestrisMes', Georgia, 'Times New Roman', serif;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid var(--color-border, #3c2f25);
  background: rgba(60, 47, 37, 0.6);
  color: var(--color-text-muted, #8b7a62);
}

.confirm-btn:hover {
  border-color: var(--color-accent, #b89b5e);
  color: var(--color-text, #d2c3a3);
}

.confirm-btn-yes {
  background: rgba(140, 100, 60, 0.35);
  border-color: rgba(184, 155, 94, 0.5);
  color: var(--color-accent, #b89b5e);
}

.confirm-btn-yes:hover {
  background: rgba(140, 100, 60, 0.55);
  border-color: var(--color-accent-hover, #d1aa5b);
  color: var(--color-accent-hover, #d1aa5b);
}

@keyframes confirm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes confirm-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes confirm-pop-in {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes confirm-pop-out {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(0.95); opacity: 0; }
}

/* ============================================================
   CANCEL QUEUE BUTTON + POPUP
   - Button lives in the building header (right side, next to queue badge)
   - Popup lists active queues for the current building, refund preview,
     and an action button per row.
   ============================================================ */

.cancel-queue-btn {
  font-size: 0.6rem;
  line-height: 1.2;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  background: rgba(167, 90, 58, 0.15);
  color: var(--color-error);
  border: 1px solid rgba(167, 90, 58, 0.45);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.2px;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cancel-queue-btn:hover:not(:disabled) {
  background: rgba(167, 90, 58, 0.3);
  border-color: var(--color-error);
  color: #d2c3a3;
}

.cancel-queue-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.cancel-queue-btn:disabled {
  background: rgba(60, 47, 37, 0.4);
  color: var(--color-text-muted);
  border-color: rgba(139, 122, 98, 0.3);
  cursor: not-allowed;
  opacity: 0.55;
}

/* --- Overlay --- */
.cancel-queue-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/* --- Popup container --- */
.cancel-queue-popup {
  background: var(--color-surface);
  border: 1px solid var(--color-section-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: min(520px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  color: var(--color-text);
  overflow: hidden;
}

.cancel-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(184, 155, 94, 0.25);
  background: rgba(20, 15, 12, 0.6);
}

.cancel-queue-title {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: capitalize;
  letter-spacing: 0.3px;
}

.cancel-queue-close {
  font-size: 0.75rem;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  cursor: pointer;
  font-family: inherit;
}

.cancel-queue-close:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
}

.cancel-queue-subtitle {
  padding: 0.45rem 0.9rem;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-style: italic;
  border-bottom: 1px solid rgba(184, 155, 94, 0.15);
}

/* --- List of cancellable queues --- */
.cancel-queue-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cancel-queue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.7rem;
  background: rgba(60, 47, 37, 0.35);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cancel-queue-row:hover {
  background: rgba(60, 47, 37, 0.55);
  border-color: var(--color-section-border);
}

.cancel-queue-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.cancel-queue-item-line {
  font-size: 0.8rem;
  color: var(--color-text);
  text-transform: capitalize;
  letter-spacing: 0.2px;
}

.cancel-queue-item-line strong {
  color: var(--color-accent);
}

.cancel-queue-refund-line {
  font-size: 0.68rem;
  color: #7a9f7a;
  font-style: italic;
  text-transform: capitalize;
}

.cancel-queue-row-btn {
  flex-shrink: 0;
  font-size: 0.7rem;
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  background: rgba(167, 90, 58, 0.2);
  color: var(--color-error);
  border: 1px solid rgba(167, 90, 58, 0.55);
  cursor: pointer;
  letter-spacing: 0.2px;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}

.cancel-queue-row-btn:hover:not(:disabled) {
  background: var(--color-error);
  color: var(--color-text);
}

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

/*========================================================*/
/*restore marketplace padding when in no scroll container*/
/*========================================================*/

#left-panel-content.no-scroll > .marketplace-panel-wrapper,
#right-panel-content.no-scroll > .marketplace-panel-wrapper {
  padding: 0.5rem;
}