/* Bread & Broadsword - Medieval Strategy Game UI
   Knights & Merchants Aesthetic Styling
*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Marcellus&display=swap');

/* Distinct Roman-medieval numerals (differentiates 0 from uppercase O) */
@font-face {
  font-family: 'MedievalNumerals';
  src: local('Georgia');
  unicode-range: U+0030-0039; /* Digits 0-9 */
}

:root {
  --font-primary: 'MedievalNumerals', 'Marcellus', serif;
  --font-serif: 'MedievalNumerals', 'Marcellus', serif;
  /* Unified Medieval Typography Scale */
  --fs-xs: 11px;      /* Micro-badges, corner rank pills, compact status tags */
  --fs-sm: 12px;      /* Secondary labels, subtext, metadata, table headers */
  --fs-base: 13px;    /* Primary body copy, descriptions, lore, unit stats, buttons */
  --fs-md: 14px;      /* Card titles, subsection headers, prominent buttons */
  --fs-lg: 16px;      /* Panel headers, major card headings, banner titles */
  --fs-xl: 18px;      /* Hero titles, character/section headers */
  --fs-display: 24px; /* Large KPI counters, level numbers, orb badges */
  --wood-dark: #190f09;
  --wood-medium: #2a1910;
  --wood-light: #442a1a;
  --gold-highlight: #ffdf85;
  --gold-primary: #d4a753;
  --gold-shadow: #875b1c;
  --gold-dark: #4b310d;
  --parchment-base: #eee3c8;
  --parchment-dark: #dfcfab;
  --parchment-text: #2a1b10;
  --parchment-subtext: #634b35;
  --border-size: 26px;
  --topbar-height: 84px;
  --sidebar-width: 216px;
}

[data-font="cinzel"] {
  --font-primary: 'MedievalNumerals', 'Cinzel', serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  font-family: var(--font-primary);
  background-color: #0b0704;
  color: #e4d5be;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   TYPOGRAPHY CATEGORY CLASSES (UNIFIED SCALE)
   ========================================================================== */
.type-xs      { font-size: var(--fs-xs); }
.type-sm      { font-size: var(--fs-sm); }
.type-base    { font-size: var(--fs-base); }
.type-md      { font-size: var(--fs-md); }
.type-lg      { font-size: var(--fs-lg); }
.type-xl      { font-size: var(--fs-xl); }
.type-display { font-size: var(--fs-display); }

/* ==========================================================================
   APP CONTAINER & LAYOUT
   ========================================================================== */
.game-viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: var(--topbar-height) 1fr;
  grid-template-columns: var(--sidebar-width) 1fr;
  overflow: hidden;
  background-color: #000;
}

/* ==========================================================================
   TOP BAR (ULTRA-SHARP OAK TIMBER)
   ========================================================================== */
.top-bar {
  grid-column: 1 / -1;
  grid-row: 1;
  height: var(--topbar-height);
  background-color: #1e120a;
  background-image: url('assets/topbar_oak_continuous.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px 0 14px;
  position: relative;
  z-index: 75;
  box-shadow: inset 0 1px 2px rgba(255, 223, 133, 0.12), inset 0 -2px 6px rgba(0, 0, 0, 0.85);
}

/* Title Logo Area */
.logo-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.logo-container:hover {
  transform: scale(1.015);
}

.logo-img {
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.95)) drop-shadow(0 1px 3px rgba(0,0,0,0.8));
}

/* Top Stats & Widgets */
.top-widgets-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.medieval-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: radial-gradient(ellipse at center, #2e1d13 0%, #150c07 100%);
  border: 1px solid var(--gold-shadow);
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(255,223,133,0.2), inset 0 -2px 4px rgba(0,0,0,0.8), 0 3px 6px rgba(0,0,0,0.6);
  color: #fff4dc;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.3px;
  position: relative;
  transition: all 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}

.medieval-pill:hover {
  border-color: var(--gold-primary);
  box-shadow: inset 0 1px 3px rgba(255,223,133,0.35), 0 0 10px rgba(212,167,83,0.3);
  transform: translateY(-1px);
}

.pill-icon {
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-primary);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.9));
}

.pill-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.pill-value {
  font-weight: 400;
  color: #fff9ea;
  font-variant-numeric: tabular-nums;
}

.rate-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 3px;
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
}

.rate-badge.positive {
  color: #72cf50;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

.rate-badge.negative {
  color: #e65243;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

.rank-pill {
  padding-right: 14px;
}

.rank-crown {
  color: #ffd700;
}

.rank-detail {
  display: none !important;
}

/* ==========================================================================
   LEFT SIDEBAR MENU (MASTERCRAFT OAK TIMBER SIDING)
   ========================================================================== */
.sidebar {
  grid-column: 1;
  grid-row: 2;
  background-color: #1e120a;
  background-image: url('assets/concept_oak_sidebar.jpg'), linear-gradient(90deg, rgba(16,9,5,0.7) 0%, rgba(38,22,14,0.5) 100%);
  background-size: cover;
  background-position: center top;
  display: flex;
  flex-direction: column;
  padding: calc(var(--border-size) + 8px) 8px 18px 8px;
  position: relative;
  z-index: 40;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-shadow) var(--wood-dark);
}

.sidebar::-webkit-scrollbar {
  width: 3px;
}
.sidebar::-webkit-scrollbar-thumb {
  background: var(--gold-shadow);
  border-radius: 2px;
}

/* Menu Section Divider Headers */
.menu-section {
  margin-top: 8px;
  margin-bottom: 4px;
}

.menu-section:first-child {
  margin-top: 2px;
}

.section-header-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  text-align: center;
}

.section-header-text {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #dfba70;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 8px rgba(212,167,83,0.3);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

.section-diamond {
  color: #ffdf85;
  font-size: 7.5px;
  filter: drop-shadow(0 0 4px #ffd700);
}

.section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(212,167,83,0) 0%, rgba(212,167,83,0.5) 50%, rgba(212,167,83,0) 100%);
}

/* Sidebar Nav Buttons (Permanent Idea 3: Translucent Dark Slat Style) */
.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 11px;
  margin-bottom: 3.5px;
  background: rgba(14, 8, 4, 0.65);
  border: 1px solid rgba(135, 91, 28, 0.4);
  border-radius: 3px;
  color: #fff4dc;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-align: left;
  cursor: pointer;
  position: relative;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: all 0.15s ease;
}

.nav-btn .nav-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8bd63;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.nav-btn:hover {
  background: rgba(45, 25, 12, 0.85);
  border-color: rgba(212, 167, 83, 0.7);
  color: #ffffff;
  box-shadow: inset 0 1px 2px rgba(255, 223, 133, 0.25), 0 3px 6px rgba(0, 0, 0, 0.7);
  transform: translateX(2px);
}

.nav-btn.active {
  background: linear-gradient(180deg, #faf3e2 0%, #ebdcb8 100%);
  border: 1px solid #d4a753;
  color: #1a0e05;
  box-shadow: inset 0 1px 1px #fff, inset 0 -2px 3px rgba(100,60,20,0.25), 0 3px 6px rgba(0,0,0,0.7);
  font-size: 13px;
  font-weight: 700;
  transform: translateX(3px);
}

.nav-btn.active .nav-icon {
  color: #5a3a1b;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,0.4));
}

.nav-btn.active .nav-label {
  color: #1a0e05;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.nav-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c9a469;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.nav-btn:hover .nav-icon {
  transform: scale(1.1);
}

.nav-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.nav-label {
  flex: 1;
}

.badge-counter {
  background: linear-gradient(180deg, #d33828 0%, #87190d 100%);
  color: #fff;
  border: 1px solid #ff7b6b;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 2px;
  padding: 1px 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* ==========================================================================
   THE RICH BORDER FRAME SYSTEM (BURNISHED GOLD STRAPWORK)
   ========================================================================== */

/* 1. HORIZONTAL TOP BAR BOTTOM BORDER */
.border-horizontal {
  position: absolute;
  top: calc(var(--topbar-height) - 1px);
  left: 0;
  right: 0;
  height: var(--border-size);
  z-index: 60;
  pointer-events: none;
  background-image: url('assets/border_h_gold_strap.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.94), 0 3px 8px rgba(0, 0, 0, 0.75);
}

/* 2. VERTICAL SIDEBAR RIGHT BORDER (REMOVED PER USER INSTRUCTION) */
.border-vertical {
  display: none !important;
}

/* 3-WAY HERALDIC JUNCTION BOSS (REMOVED PER USER INSTRUCTION) */
.border-junction-boss {
  display: none !important;
}

.junction-boss-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85));
}

/* ==========================================================================
   MAIN GAME VIEWPORT & PANORAMIC SCENERY
   ========================================================================== */
.main-stage {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  overflow: auto;
  scrollbar-gutter: stable;
  background-image: url('assets/landscape_clean.jpg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 35px 35px 35px 65px;
  display: flex;
  gap: 25px;
  align-items: flex-start;
  min-width: 1400px;
  min-height: 800px;
}

/* Vignette overlay for main scene (fixed so it stays stationary when scrolling) */
.main-stage::after {
  content: '';
  position: fixed;
  top: var(--topbar-height);
  left: var(--sidebar-width);
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 5;
}

/* ==========================================================================
   MEDIEVAL CARDS / WINDOWS (VILLAGE & CHARACTER)
   ========================================================================== */
.medieval-window {
  background: var(--parchment-base);
  border: 2px solid #845e2a;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(160, 120, 60, 0.15);
  position: relative;
  z-index: 10;
  color: var(--parchment-text);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.medieval-window:hover {
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.9), 0 4px 10px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(160, 120, 60, 0.2);
}

/* Window Header Bar */
.window-header {
  background-color: #24160c;
  background-image: 
    linear-gradient(180deg, rgba(255, 230, 160, 0.08) 0%, rgba(0, 0, 0, 0.35) 100%),
    url('assets/topbar_oak_continuous.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-bottom: 2px solid var(--gold-primary);
  height: 38px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  cursor: default;
  box-shadow: inset 0 1px 1px rgba(255, 235, 170, 0.15), 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* Corner Rivets on Windows */
.window-rivet {
  position: absolute;
  width: 9px;
  height: 9px;
  background: radial-gradient(circle at 35% 35%, #fff1c2 0%, #d4a753 50%, #5a3811 100%);
  border: 1px solid #2e1b07;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

.rivet-tl { top: 4px; left: 4px; }
.rivet-tr { top: 4px; right: 4px; }
.rivet-bl { bottom: 4px; left: 4px; }
.rivet-br { bottom: 4px; right: 4px; }

.window-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffdf85;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(212,167,83,0.3);
  margin-left: 6px;
}

.window-title svg {
  width: 16px;
  height: 16px;
  fill: var(--gold-primary);
}

.window-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
}

.win-btn {
  width: 18px;
  height: 18px;
  background: rgba(45, 27, 17, 0.85);
  border: 1px solid var(--gold-shadow);
  border-radius: 2px;
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: bold;
  transition: all 0.15s;
}

.win-btn svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.win-btn:hover {
  background: var(--gold-primary);
  color: #1a0f07;
  border-color: #ffe699;
}

/* Window Content Body */
.window-body {
  padding: 16px 20px 20px 20px;
  background-color: var(--parchment-base);
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2) 0%, rgba(180,140,80,0.1) 100%);
}

/* ==========================================================================
   VILLAGE WINDOW SPECIFICS
   ========================================================================== */
.village-window {
  width: 820px;
}

.village-top-row {
  display: grid;
  grid-template-columns: 395px 1fr;
  gap: 20px;
}

/* Thornwick Village Viewer (Inner border removed per user request) */
.thornwick-frame {
  position: relative;
  border: 1px solid rgba(132, 94, 42, 0.4);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  background: #2b1f13;
}

.thornwick-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.thornwick-frame:hover .thornwick-img {
  transform: scale(1.025);
}

.village-stage-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(18, 10, 5, 0.88);
  border-top: 1px solid rgba(212, 167, 83, 0.4);
  color: #ffdf85;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 10px;
  text-align: center;
  backdrop-filter: blur(2px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Village Stats Column */
.village-stats-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stat-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  color: #2c1a0e;
  text-transform: uppercase;
}

.stat-header svg {
  width: 15px;
  height: 15px;
  fill: #825a2b;
  flex-shrink: 0;
}

.stat-subtext {
  font-size: 13px;
  color: #553c23;
  font-family: var(--font-primary);
  font-weight: 600;
  line-height: 1.35;
}

/* Medieval Progress Bars */
.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-track {
  flex: 1;
  height: 13px;
  background: #c7b897;
  border: 1px solid #7c5728;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 1px;
  transition: width 0.5s ease;
  position: relative;
}

.progress-fill.green {
  background: linear-gradient(180deg, #5aa145 0%, #3d792d 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4);
}

.progress-fill.amber {
  background: linear-gradient(180deg, #f0b043 0%, #c4821a 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);
}

.progress-label {
  font-size: 13px;
  font-weight: 800;
  color: #2c1a0e;
}

/* Army Table */
.army-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  font-weight: 800;
  color: #382211;
  margin-bottom: 2px;
}

.morale-badge {
  color: #245c16;
  font-weight: 800;
}

#overview-idle-workers-badge {
  font-size: 12px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 3px;
}

.army-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #bba47a;
  background: rgba(255,255,255,0.45);
}

.army-table td {
  padding: 6px 11px;
  border: 1px solid #bba47a;
  font-size: 13px;
  font-weight: 600;
  color: #2a180c;
}

.army-table tr:hover {
  background: rgba(212, 167, 83, 0.2);
}

.soldier-count {
  text-align: right;
  font-weight: 800;
  font-size: 13.5px;
  color: #1a0f06;
}

/* Work In Progress Section */
.work-progress-section {
  margin-top: 18px;
  border-top: 1px solid #c9b48c;
  padding-top: 14px;
}

.queue-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.queue-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.queue-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #331f11;
}

.queue-timer {
  font-size: 12.5px;
  color: #4b341f;
  display: flex;
  align-items: center;
  gap: 4px;
}

.queue-timer svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* ==========================================================================
   CHARACTER WINDOW SPECIFICS
   ========================================================================== */
.character-window {
  width: 490px;
}

.char-top-layout {
  display: grid;
  grid-template-columns: 135px 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.char-portrait-frame {
  position: relative;
  width: 135px;
  height: 150px;
  border: 2px solid #845e2a;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  background: #1a1008;
}

.char-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.char-portrait-frame:hover .char-portrait-img {
  transform: scale(1.04);
}

.char-class-ribbon {
  display: none;
}

.char-info-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 0 2px 0;
}

.char-hero-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.char-trait-pill {
  display: none;
}

.char-trait-pill svg {
  width: 11px;
  height: 11px;
  fill: #875b1c;
}

.level-shield {
  width: 58px;
  height: 64px;
  background: radial-gradient(circle at 50% 30%, #462c19 0%, #201209 100%);
  border: 2px solid var(--gold-primary);
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,223,133,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--gold-primary);
  flex-shrink: 0;
  position: relative;
}

.level-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #c99e4d;
}

.level-number {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  color: #ffdf85;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9);
}

.char-name-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.char-archetype-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8c5d28;
  line-height: 1.2;
  margin-bottom: 2px;
}

.char-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #24150b;
  margin: 0;
  line-height: 1.15;
}

.char-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14.5px;
  font-style: italic;
  font-weight: 600;
  color: #634b35;
  margin-top: 2px;
}

/* Experience Bar */
.char-exp-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 2px;
}

.exp-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  color: #402816;
}

.exp-percent-note {
  font-size: 12.5px;
  color: #6e543c;
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
}

/* Stat Cards (Leadership, Economy, Warfare) */
.char-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat-card {
  background: rgba(235, 222, 195, 0.75);
  border: 1px solid #bfab81;
  border-radius: 2px;
  padding: 10px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.1);
  cursor: help;
  transition: all 0.2s ease;
}

.stat-card:hover {
  background: rgba(255, 245, 225, 0.95);
  border-color: var(--gold-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.stat-card-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #5a3c22;
  text-transform: uppercase;
}

.stat-card-value {
  font-size: 22px;
  font-weight: 900;
  color: #211309;
}

/* ==========================================================================
   TOOLTIPS
   ========================================================================== */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  background: #180e06;
  border: 1.5px solid var(--gold-primary);
  color: #ffeed3;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.92), 0 0 6px rgba(212,167,83,0.3);
  z-index: 1000;
}

[data-tooltip]:hover::after {
  opacity: 1;
}

.rank-pill[data-tooltip]::after {
  left: auto;
  right: 0;
  transform: none;
}

/* ==========================================================================
   BUILDINGS WINDOW (MASTER ARCHITECT'S FOLIO)
   ========================================================================== */
.buildings-window {
  width: 1340px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.folio-split-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 580px;
  background: #eee3c8;
}

/* Left Pane: Structure Roster */
.folio-roster-pane {
  background: #e8d9ba;
  border-right: 2px solid #a37c3e;
  display: flex;
  flex-direction: column;
}

.roster-header-bar {
  background: #25140b;
  color: #ffdf85;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gold-primary);
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.roster-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 520px;
}

.roster-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #d5be94;
  cursor: pointer;
  background: #f1e4c9;
  transition: all 0.12s ease;
}

.roster-item:hover {
  background: #fcf4e2;
}

.roster-item.active {
  background: linear-gradient(90deg, #e0cb9e 0%, #f6ecd6 100%);
  border-left: 4px solid #ab751f;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.roster-item-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.roster-item-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #201309;
  border-radius: 4px;
  border: 1.5px solid #845e2a;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
}

.roster-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.roster-item:hover .roster-item-icon {
  border-color: #d4a753;
  box-shadow: 0 0 8px rgba(212,167,83,0.35);
}

.roster-item.active .roster-item-icon {
  border-color: #f3c25b;
  box-shadow: 0 0 10px rgba(243,194,91,0.5);
}

.roster-item.active .roster-thumb-img {
  transform: scale(1.06);
}

.roster-item.not-built .roster-thumb-img {
  filter: grayscale(85%) contrast(0.9) brightness(0.65);
  opacity: 0.65;
}

.roster-item.not-built:hover .roster-thumb-img {
  filter: grayscale(35%) contrast(0.95) brightness(0.85);
  opacity: 0.9;
}

.roster-name-block {
  display: flex;
  flex-direction: column;
}

.roster-item-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #1f1106;
}

.roster-item-sub {
  font-size: 12.5px;
  color: #55371a;
  letter-spacing: 0.2px;
}

.roster-item-status {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}

.status-rate-pill {
  font-size: 12px;
  font-weight: 700;
  color: #246016;
  background: #def0c9;
  border: 1px solid #83b661;
  padding: 1px 5px;
  border-radius: 2px;
}

.status-active-pill {
  font-size: 11.5px;
  font-weight: 700;
  color: #7b4a12;
  background: #ffecb8;
  border: 1px solid #cca14e;
  padding: 1px 5px;
  border-radius: 2px;
}

/* Right Pane: Deep Blueprint Dossier */
.folio-hero-pane {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fbf5e6;
}

.folio-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #ab8240;
  padding-bottom: 12px;
}

.hero-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-main-title {
  font-size: 22px;
  font-weight: 700;
  color: #221308;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bldg-level-tag {
  background: linear-gradient(180deg, #dfb155 0%, #8f5c1a 100%);
  color: #170b03;
  font-size: 11.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid #ffe194;
  letter-spacing: 0.5px;
}

.folio-status-badge {
  background: #25160b;
  border: 1.5px solid var(--gold-primary);
  color: #ffdf85;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

/* Hero Center Grid */
.folio-center-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
}

.folio-art-showcase {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.folio-art-frame {
  width: 240px;
  height: 240px;
  border: 2px solid #845e2a;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  background: #deb883;
  position: relative;
}

.folio-art-frame.clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.folio-art-frame.clickable:hover {
  border-color: #dfb155;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 12px rgba(223, 177, 85, 0.4);
}

.folio-art-inspect-badge {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(22, 11, 4, 0.88);
  border: 1px solid #dfb155;
  border-radius: 4px;
  color: #ffdf85;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(3px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.85);
  transition: background 0.15s ease, color 0.15s ease;
}

.folio-art-frame.clickable:hover .folio-art-inspect-badge {
  background: rgba(45, 23, 8, 0.95);
  color: #ffffff;
  border-color: #ffe8a3;
}

/* 10-Level Building Progression Table */
.progression-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: rgba(18, 9, 3, 0.65);
  border: 1px solid #573917;
  border-radius: 4px;
  overflow: hidden;
}

.progression-table th {
  background: linear-gradient(180deg, #3d210b 0%, #251205 100%);
  color: #ffdf85;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid #573917;
  font-size: 11.5px;
}

.progression-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(87, 57, 23, 0.45);
  color: #e5d3bc;
  vertical-align: middle;
}

.progression-table tr:nth-child(even) td {
  background: rgba(45, 27, 17, 0.25);
}

.progression-table tr:hover td {
  background: rgba(223, 177, 85, 0.1);
}

.progression-table .lvl-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #3b220c;
  border: 1px solid #7a4f1e;
  border-radius: 3px;
  color: #ffdf85;
  font-weight: 800;
  font-size: 11.5px;
  white-space: nowrap;
}

.progression-table .cost-cell {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.progression-table .cost-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fffaee;
  font-weight: 700;
  font-size: 11.5px;
  white-space: nowrap;
}

.folio-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.folio-art-caption {
  font-size: 12px;
  color: #654627;
  text-align: center;
  font-style: italic;
}

.folio-ops-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Production Flowchart Card */
.folio-box {
  background: #f1e4c7;
  border: 1.5px solid #ab8240;
  border-radius: 3px;
  padding: 10px 14px;
  box-shadow: inset 0 0 10px rgba(180, 140, 80, 0.15);
}

.folio-box-title {
  font-size: 13px;
  font-weight: 800;
  color: #3b2410;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.flowchart-nodes {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.flow-node {
  background: #fbf5e7;
  border: 1px solid #9f783d;
  padding: 6px 10px;
  border-radius: 3px;
  text-align: center;
  flex: 1;
}

.flow-node-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #5a3818;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.flow-node-val {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e1005;
}

.flow-arrow {
  color: #9f7535;
  font-weight: 800;
  font-size: 14px;
}

/* Worker Morale Controls */
.worker-management-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.worker-stepper {
  display: flex;
  align-items: center;
  gap: 7px;
}

.worker-role-label {
  font-size: 13.5px;
  font-weight: 600;
  color: #1a0e05;
  letter-spacing: 0.25px;
  white-space: nowrap;
}

.btn-stepper {
  width: 24px;
  height: 24px;
  background: #3a2211;
  color: #ffdf85;
  border: 1px solid #9e7536;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  transition: all 0.15s ease;
}

.btn-stepper:hover:not(:disabled) {
  background: #523118;
  border-color: #d4a753;
  color: #fff2b2;
}

.btn-stepper:disabled {
  background: #24160c;
  color: #63472c;
  border-color: #4d351d;
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

.worker-count-badge {
  font-size: 14px;
  font-weight: 700;
  color: #1a0d05;
  padding: 0 6px;
  min-width: 42px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.idle-workers-indicator {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.2px;
}

.diet-morale-pill {
  background: #e6f3d4;
  border: 1px solid #7cb053;
  color: #215410;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 2px;
}

/* Upgrade Blueprint Panel */
.upgrade-blueprint-box {
  background: #ebe0c3;
  border: 1.5px solid #8e622b;
  border-radius: 3px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blueprint-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blueprint-target-level {
  font-size: 14px;
  font-weight: 800;
  color: #2b1809;
}

.blueprint-delta {
  font-size: 12.5px;
  color: #236113;
  font-weight: 700;
}

.blueprint-mats-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f7ede0;
  border: 1px solid #a38258;
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 12.5px;
  font-weight: 700;
  color: #2c1a0e;
}

.mat-item.ok {
  border-color: #6ea14a;
}

.btn-commission-upgrade {
  background: linear-gradient(180deg, #d39f40 0%, #8c5717 100%);
  border: 1.5px solid #ffe194;
  color: #170b03;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.8px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.5);
  transition: all 0.15s ease;
  text-align: center;
  text-transform: uppercase;
}

.btn-commission-upgrade:not(:disabled):not(.disabled):hover {
  background: linear-gradient(180deg, #e3b052 0%, #a26922 100%);
  color: #000;
  transform: translateY(-1px);
}

.btn-commission-upgrade:disabled,
.btn-commission-upgrade.disabled,
.btn-commission-upgrade:disabled:hover,
.btn-commission-upgrade.disabled:hover {
  background: #25221e !important;
  border: 1.5px solid #443c33 !important;
  color: #827566 !important;
  cursor: not-allowed !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.6) !important;
  transform: none !important;
  opacity: 0.58 !important;
  filter: grayscale(1) !important;
}

.mat-item.missing {
  border-color: #b83d2a !important;
  color: #8c1e11 !important;
  background: #faeae8 !important;
}

/* ==========================================================================
   RESOURCES SCREEN (SHARED SHELL & 3 DESIGN IDEAS)
   ========================================================================== */
.resources-window {
  width: 1340px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.resources-subnav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #e4d3b0;
  border-bottom: 1.5px solid #ab8240;
  padding: 8px 18px;
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.6);
}

.res-subnav-title {
  font-size: 13px;
  font-weight: 800;
  color: #3b2410;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.res-stockpile-total {
  font-size: 12px;
  color: #4a3014;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.res-stockpile-total strong {
  color: #1a0e05;
  font-weight: 800;
  font-size: 13px;
}

/* ==========================================================================
   IDEA 1: GRANARY VAULT CARDS (5x2 GRID)
   ========================================================================== */
.res-cards-container {
  padding: 18px;
  background: #eee3c8;
}

.res-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.res-tile {
  background: #fcf6ea;
  border: 1.5px solid #9e7536;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25), inset 0 0 15px rgba(180, 140, 80, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.res-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 0 20px rgba(180, 140, 80, 0.2);
  border-color: #7d501b;
}

.res-tile-header {
  background: linear-gradient(180deg, #2b180d 0%, #1a0d06 100%);
  border-bottom: 1.5px solid var(--gold-primary);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.res-tile-icon {
  font-size: 15px;
}

.res-tile-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff1d6;
  letter-spacing: 0.5px;
}

.res-tile-body {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.res-tile-val {
  font-size: 22px;
  font-weight: 800;
  color: #261508;
  letter-spacing: 0.5px;
}

.res-tile-storage {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.res-storage-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  color: #634729;
}

.res-tile-footer {
  background: #ebdcc0;
  border-top: 1px solid #c9b187;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.res-rate-chip {
  font-size: 12px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 2px;
}

.res-rate-chip.hour {
  background: #dff0cb;
  color: #1e520d;
  border: 1px solid #7cb053;
}

.res-rate-chip.hour.negative,
.res-rate-chip.day.negative {
  background: #fbe0dc;
  color: #8b2c1f;
  border: 1px solid #c97163;
}

.res-rate-chip.day {
  background: #faecc9;
  color: #7d4d12;
  border: 1px solid #cfa14e;
}

/* ==========================================================================
   IDEA 2: THE IMPERIAL TREASURY FOLIO (TABULAR ACCOUNTING LEDGER)
   ========================================================================== */
.res-ledger-container {
  padding: 18px;
  background: #eee3c8;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.res-ledger-table {
  display: flex;
  flex-direction: column;
  border: 1.5px solid #976f33;
  border-radius: 3px;
  background: #fdf8ed;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.res-ledger-thead {
  display: grid;
  grid-template-columns: 260px 180px 180px 220px 180px 1fr;
  background: linear-gradient(180deg, #27160c 0%, #170b04 100%);
  color: #dfb155;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-bottom: 1.5px solid var(--gold-primary);
  letter-spacing: 0.5px;
  align-items: center;
}

.res-cat-header {
  background: linear-gradient(90deg, #dfcfac 0%, #e8d9ba 100%);
  border-top: 1px solid #8e682e;
  border-bottom: 1px solid #8e682e;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  color: #3b230f;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.res-ledger-row {
  display: grid;
  grid-template-columns: 260px 180px 180px 220px 180px 1fr;
  padding: 7px 14px;
  border-bottom: 1px solid #d5be94;
  align-items: center;
  background: #faf2e1;
  font-size: 12px;
  transition: background 0.12s ease;
}

.res-ledger-row:nth-child(even) {
  background: #f2e5cb;
}

.res-ledger-row:hover {
  background: #fff8eb;
}

.res-name-col {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #2b1809;
}

.res-icon-frame {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1.5px 2px rgba(0,0,0,0.4));
  transition: transform 0.15s ease, filter 0.15s ease;
}

.res-ledger-row:hover .res-icon-frame {
  transform: scale(1.15);
  filter: drop-shadow(0 0 5px rgba(212,167,83,0.65));
}

.res-icon-img {
  width: 100%;
  height: 100%;
  display: block;
}

.pill-resource-img {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}

/* Universal Inline Resource Icon Frames */
.res-inline-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: 5px;
  flex-shrink: 0;
}

.res-inline-icon {
  width: 100%;
  height: 100%;
  max-width: 22px;
  max-height: 22px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.4));
}

.ledger-row .res-inline-frame {
  width: 20px;
  height: 20px;
  vertical-align: -4.5px;
  margin-right: 7px;
}

.ledger-comp-cell {
  display: inline-flex;
  align-items: center;
}

.flow-node-val .res-inline-frame {
  width: 19px;
  height: 19px;
  vertical-align: -3.5px;
  margin-right: 5px;
}

.mat-item .res-inline-frame {
  width: 16px;
  height: 16px;
  vertical-align: -2.5px;
  margin-right: 4px;
}

.seg-ico .res-inline-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.s-stock-res-img {
  width: 26px;
  height: 26px;
  display: block;
  filter: drop-shadow(0 1.5px 2px rgba(0,0,0,0.3));
}

.pantry-res-img {
  width: 36px;
  height: 36px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.res-count-col {
  font-size: 14px;
  font-weight: 800;
  color: #1e1106;
}

/* ==========================================================================
   IDEA 3: DUAL-WING FOLIO (PROVISIONS VS INDUSTRY & METALS)
   ========================================================================== */
.res-dual-container {
  padding: 18px;
  background: #eee3c8;
}

.res-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.res-wing-card {
  background: #fbf5e6;
  border: 1.5px solid #9e7536;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.res-wing-header {
  background: linear-gradient(180deg, #28160c 0%, #170b04 100%);
  border-bottom: 1.5px solid var(--gold-primary);
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.res-wing-header .eff-badge {
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 2px;
  letter-spacing: 0.5px;
}

.res-wing-header .eff-badge.boosted {
  background: #1b4d13;
  color: #c8f5ac;
  border: 1px solid #5eb53c;
}

.res-wing-header .eff-badge.normal {
  background: #3a2211;
  color: #ffdf85;
  border: 1px solid #a3783a;
}

.res-wing-title {
  color: #ffdf85;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.res-wing-sub {
  color: #cfb58c;
  font-size: 12px;
}

.res-wing-list {
  display: flex;
  flex-direction: column;
}

.res-wing-item {
  display: grid;
  grid-template-columns: 160px 110px 90px 100px 1fr;
  padding: 9px 14px;
  border-bottom: 1px solid #d5be94;
  align-items: center;
  font-size: 12px;
  transition: background 0.12s ease;
}

.res-wing-item:hover {
  background: #fff8ec;
}

.res-wing-item:nth-child(even) {
  background: #f3e6cb;
}










/* ==========================================================================
   TRAIN & MILITARY BARRACKS RECRUITMENT SCREEN
   ========================================================================== */
.train-window {
  width: 1340px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

/* ARMORY STORAGE BAR */
.train-armory-bar {
  background: linear-gradient(180deg, #2b180d 0%, #1c0e06 100%);
  border-bottom: 1.5px solid var(--gold-primary);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.2);
}

.armory-bar-label {
  font-size: 12.5px;
  font-weight: 800;
  color: #dfb155;
  letter-spacing: 0.8px;
  white-space: nowrap;
  border-right: 1.5px solid #6b4c22;
  padding-right: 12px;
}

.armory-chips-scroll {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.armory-chips-scroll::-webkit-scrollbar {
  height: 4px;
}
.armory-chips-scroll::-webkit-scrollbar-thumb {
  background: #7a5426;
  border-radius: 2px;
}

.armory-res-chip {
  background: rgba(56, 30, 15, 0.85);
  border: 1px solid #754b20;
  border-radius: 3px;
  padding: 2.5px 7px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  white-space: nowrap;
  transition: all 0.12s ease;
}

.armory-res-chip:hover {
  background: rgba(85, 48, 25, 0.95);
  border-color: var(--gold-primary);
}

.armory-chip-icon {
  font-size: 12px;
}

.armory-chip-name {
  color: #dfcfab;
  font-weight: 600;
}

.armory-chip-count {
  color: #fff1d6;
  font-weight: 800;
  font-size: 12px;
}

.train-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e4d3b0;
  border-bottom: 1.5px solid #ab8240;
  padding: 8px 18px;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.6);
}

.train-tier-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
}

.train-tab-btn {
  background: rgba(45, 27, 15, 0.7);
  border: 1px solid rgba(132, 94, 42, 0.6);
  color: #dfcfab;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.train-tab-btn .tab-badge {
  background: #381e0f;
  color: #dfb155;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid #784e20;
}

.train-tab-btn:hover {
  background: rgba(75, 45, 24, 0.85);
  border-color: var(--gold-primary);
  color: #fff;
}

.train-tab-btn.active {
  background: linear-gradient(180deg, #c9983e 0%, #8c5b1d 100%);
  border-color: #ffe699;
  color: #1a0e05;
  font-weight: 800;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.6);
}

.train-tab-btn.barb-tab.active {
  background: linear-gradient(180deg, #8a2425 0%, #4a0f10 100%);
  border-color: #ff9b9b;
  color: #ffe8e8;
  box-shadow: inset 0 1px 2px rgba(255, 200, 200, 0.3), 0 2px 6px rgba(0, 0, 0, 0.7);
}

.train-manpower-reserve {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #4a3014;
}

.train-manpower-reserve .reserve-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.train-manpower-reserve .reserve-label {
  color: #5c4021;
}

.train-manpower-reserve .reserve-val.green {
  color: #1f5713;
  font-weight: 800;
}

.train-manpower-reserve .reserve-val.amber {
  color: #8c5b1d;
  font-weight: 800;
}

.train-manpower-reserve .reserve-sep {
  color: #8a6538;
}

.train-tier-pane {
  display: none;
  padding: 18px;
  background: #eee3c8;
}

.train-tier-pane.active {
  display: block;
}

.train-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.train-card {
  background: #fcf6ea;
  border: 1.5px solid #9e7536;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22), inset 0 0 15px rgba(180, 140, 80, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.train-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32), inset 0 0 20px rgba(180, 140, 80, 0.18);
  border-color: #7d501b;
}

.train-card-header {
  background: linear-gradient(180deg, #2b180d 0%, #1a0d06 100%);
  border-bottom: 1.5px solid var(--gold-primary);
  padding: 7px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.unit-portrait-wrapper {
  width: 100%;
  height: 155px;
  overflow: hidden;
  background: #1e1107;
  position: relative;
  border-bottom: 1.5px solid #784e20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unit-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.25s ease;
}

.train-card:hover .unit-portrait-img {
  transform: scale(1.04);
}

.train-card-title-group {
  display: flex;
  align-items: center;
  gap: 9px;
}

.train-card-icon {
  font-size: 20px;
}

.train-card-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #fff1d6;
  letter-spacing: 0.5px;
}

.train-card-subname {
  font-size: 11.5px;
  color: #dfb155;
  line-height: 1.1;
}

.unit-role-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.unit-role-badge.role-ranged {
  background: #173e5c;
  color: #bce1ff;
  border: 1px solid #4582b5;
}

.unit-role-badge.role-anticav {
  background: #18471c;
  color: #c7f7ab;
  border: 1px solid #509e48;
}

.unit-role-badge.role-shock {
  background: #631818;
  color: #ffcccc;
  border: 1px solid #b53838;
}

.unit-role-badge.role-shield {
  background: #543b16;
  color: #ffe4a1;
  border: 1px solid #ab7f32;
}

.unit-role-badge.role-cav {
  background: #3b2459;
  color: #e5d1ff;
  border: 1px solid #855ec4;
}

.unit-role-badge.role-support {
  background: #6b410f;
  color: #ffe6b0;
  border: 1px solid #c7922e;
}

.train-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #1f1108;
  border-bottom: 1px solid #754f1e;
  padding: 5px 6px;
}

.stat-pill {
  text-align: center;
  font-size: 11.5px;
  color: #be9e70;
}

.stat-lbl {
  font-weight: 700;
  margin-right: 2px;
  opacity: 0.8;
}

.stat-val {
  font-weight: 800;
  font-size: 13px;
}

.stat-val.red { color: #ff8585; }
.stat-val.blue { color: #85caff; }
.stat-val.amber { color: #ffd978; }
.stat-val.green { color: #a4ff87; }

.train-card-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.train-req-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.train-req-label {
  font-size: 11px;
  font-weight: 800;
  color: #5c4021;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.train-req-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.unit-eq-tag {
  background: #ecddc4;
  border: 1px solid #af884a;
  color: #2b1808;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
}

.unit-eq-tag.recruit {
  background: #e2eccf;
  border-color: #5d9e3d;
  color: #1a4f0f;
  font-weight: 800;
}

.train-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #4a3014;
  background: #f3e6cd;
  padding: 4px 7px;
  border-radius: 2px;
  border: 1px solid #dec69f;
}

.train-desc-text {
  font-size: 12.5px;
  color: #4a341e;
  line-height: 1.35;
  min-height: 28px;
}

.train-card-footer {
  background: #ebdcc0;
  border-top: 1px solid #c9b187;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.train-garrison-status {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.garrison-lbl {
  color: #5e4225;
  font-weight: 700;
}

.garrison-count {
  color: #1e4a14;
  font-weight: 800;
}

.train-action-bar {
  display: flex;
  gap: 6px;
  align-items: center;
}

.train-stepper {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #a3783a;
  border-radius: 2px;
  overflow: hidden;
}

.step-btn {
  background: #f0dfbf;
  border: none;
  color: #38200d;
  font-weight: 800;
  font-size: 13px;
  width: 22px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s ease;
}

.step-btn:hover {
  background: #dfc495;
}

.step-input {
  width: 36px;
  height: 24px;
  border: none;
  text-align: center;
  font-weight: 800;
  font-family: var(--font-primary);
  font-size: 13px;
  color: #201207;
  background: #fff;
  cursor: text;
  padding: 0 2px;
}

.step-input:focus {
  outline: 1.5px solid #a3783a;
  background: #fffef5;
}

.step-input::-webkit-outer-spin-button,
.step-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-train-action {
  flex: 1;
  background: linear-gradient(180deg, #4d8f28 0%, #295712 100%);
  border: 1px solid #78c445;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.15s ease;
  text-align: center;
}

.btn-train-action:hover {
  background: linear-gradient(180deg, #5ba830 0%, #326b17 100%);
  border-color: #93db5f;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.btn-train-action:active {
  transform: translateY(1px);
}

/* Active Training Queue Bar (Sticky Bottom) */
.train-queue-bar {
  background: linear-gradient(180deg, #27160c 0%, #150903 100%);
  border-top: 2px solid var(--gold-primary);
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.35);
}

.queue-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.queue-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.queue-icon {
  font-size: 14px;
}

.queue-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #dfb155;
  letter-spacing: 0.8px;
}

.queue-badge {
  background: #3d2110;
  border: 1px solid #8e642e;
  color: #ffdf8a;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
}

.queue-tip {
  font-size: 11.5px;
  color: #be9e70;
  font-style: italic;
}

.queue-slots-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.queue-slot {
  background: rgba(45, 27, 15, 0.85);
  border: 1px solid #7a5426;
  border-radius: 3px;
  padding: 5px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.queue-slot.active {
  border-color: var(--gold-primary);
  background: rgba(58, 35, 18, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(223, 177, 85, 0.15);
}

.slot-icon {
  font-size: 16px;
}

.slot-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slot-name-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #fff1d6;
}

.slot-timer {
  color: #dfb155;
  font-weight: 700;
}

.slot-status {
  color: #be9e70;
  font-size: 11px;
}

.slot-progress-track {
  height: 4px;
  background: #150903;
  border: 1px solid #573a1b;
  border-radius: 2px;
  overflow: hidden;
}

.slot-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #c9983e 0%, #76b83b 100%);
}

.slot-progress-fill.paused {
  background: #5c3c1f;
}

.btn-slot-cancel {
  background: none;
  border: none;
  color: #945757;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 2px;
  transition: color 0.1s ease;
}

.btn-slot-cancel:hover {
  color: #ff6e6e;
}

.queue-slot.empty {
  opacity: 0.55;
  border-style: dashed;
  justify-content: center;
  color: #8e6f4a;
  font-size: 12px;
  font-weight: 600;
  gap: 5px;
}

.slot-empty-icon {
  font-size: 11px;
}


/* ==========================================================================
   TRAIN & RECRUITMENT 3 ALTERNATIVE DESIGNS (REVAMPED SYSTEM)
   ========================================================================== */

/* DESIGN SWITCHER HEADER BAR */
.train-design-bar {
  background: linear-gradient(180deg, #2b180d 0%, #1a0d05 100%);
  border-bottom: 2px solid var(--gold-primary);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.design-bar-lbl {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #dfb155;
  white-space: nowrap;
}

.design-btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.design-switch-btn {
  background: linear-gradient(180deg, #382414 0%, #241408 100%);
  border: 1.5px solid #6e4c23;
  color: #d1bda2;
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-size: 12.5px;
  transition: all 0.2s ease;
}

.design-switch-btn:hover {
  background: linear-gradient(180deg, #4d331d 0%, #2f1b0c 100%);
  border-color: #a8783e;
  color: #fff2db;
}

.design-switch-btn.active {
  background: linear-gradient(180deg, #c9983e 0%, #8c5b1d 100%);
  border-color: #ffd875;
  color: #1a0d03;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(223, 177, 85, 0.5);
}

.design-switch-btn .d-badge {
  background: #1a0c04;
  color: #ffda73;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 2px;
  border: 1px solid #754d1d;
}

.design-switch-btn.active .d-badge {
  background: #2b1404;
  color: #fff;
  border-color: #572908;
}

.train-window-body {
  padding: 14px 18px;
  background: #dfcbab url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" opacity="0.03"><rect width="80" height="80" fill="%23000"/></svg>');
}

/* CONTAINER TOGGLING */
.train-design-view {
  display: none;
}

.train-design-view.active {
  display: block;
}

/* ==========================================================================
   DESIGN 1: GRAND ARMORY VAULT & MUSTER FIELD (TWO COLUMNS)
   ========================================================================== */
.train-d1-container {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* LEFT COLUMN: ARMORY VAULT */
.train-d1-armory-vault {
  width: 275px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #26170d 0%, #170d06 100%);
  border: 2px solid #5a3c1a;
  border-radius: 5px;
  padding: 12px;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.7), 0 4px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.armory-vault-header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--gold-primary);
  padding-bottom: 8px;
}

.vault-header-icon {
  font-size: 24px;
}

.vault-header-titles {
  display: flex;
  flex-direction: column;
}

.vault-title-main {
  font-size: 13px;
  font-weight: 800;
  color: #dfb155;
  letter-spacing: 0.8px;
}

.vault-title-sub {
  font-size: 11.5px;
  color: #a88d6c;
}

.vault-shelf-group {
  background: rgba(18, 9, 3, 0.6);
  border: 1px solid #482f15;
  border-radius: 4px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shelf-group-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #ffda73;
  margin-bottom: 3px;
  border-bottom: 1px solid #3d250f;
  padding-bottom: 3px;
}

.shelf-count-tag {
  font-size: 11px;
  color: #9c7b50;
  font-weight: 600;
}

.vault-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 5px;
  border-radius: 3px;
  transition: background 0.15s ease;
}

.vault-item-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.v-ico {
  font-size: 13px;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v-name {
  flex: 1;
  font-size: 12.5px;
  color: #dfceb7;
  margin-left: 4px;
}

.v-qty {
  font-size: 13px;
  font-weight: 800;
  color: #fff1c7;
  background: #100803;
  border: 1px solid #6b4c22;
  border-radius: 3px;
  padding: 1px 6px;
  min-width: 26px;
  text-align: right;
}

.v-qty.highlight-rec {
  background: #14330f;
  border-color: #438f32;
  color: #afff96;
}

.v-qty.highlight-gold {
  background: #3d2807;
  border-color: #a87e22;
  color: #ffdf73;
}

.vault-footer-note {
  font-size: 11px;
  color: #8c7150;
  text-align: center;
  font-style: italic;
  border-top: 1px dashed #482f15;
  padding-top: 6px;
}

/* RIGHT COLUMN: MUSTER FIELD */
.train-d1-field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.train-subnav-d1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #24160c;
  border: 1.5px solid #6b4c22;
  border-radius: 4px;
  padding: 6px 12px;
  gap: 12px;
}
.train-subnav-d1 .train-tier-tabs {
  flex-wrap: nowrap;
}
.d1-garrison-summary {
  font-size: 12.5px;
  color: #e3d2ba;
  white-space: nowrap;
  background: #170c04;
  border: 1px solid #573a19;
  border-radius: 3px;
  padding: 4px 8px;
}

.d1-garrison-summary {
  font-size: 12.5px;
  color: #e3d2ba;
}

.d1-garrison-summary strong {
  color: #ffdf73;
}

.train-d1-pane {
  display: none;
}

.train-d1-pane.active {
  display: block;
}

.train-cards-grid-d1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.train-card-d1 {
  background: #ebdcc0;
  border: 2px solid #825b28;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.train-card-d1:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.card-d1-header {
  background: linear-gradient(180deg, #311c0c 0%, #1f0f05 100%);
  border-bottom: 1.5px solid var(--gold-primary);
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-d1-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #ffeaab;
  letter-spacing: 0.5px;
}

.card-d1-portrait-wrap {
  width: 100%;
  height: 145px;
  overflow: hidden;
  position: relative;
  background: #000;
}

.card-d1-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.train-card-d1:hover .card-d1-portrait-img {
  transform: scale(1.03);
}

.card-d1-stats-strip {
  display: flex;
  background: #1b0e06;
  border-bottom: 1.5px solid #63431d;
  padding: 4px 8px;
  justify-content: space-around;
}

.stat-cell {
  font-size: 11.5px;
  color: #ba9d77;
  display: flex;
  align-items: center;
  gap: 3px;
}

.stat-cell .s-lbl {
  font-weight: 700;
}

.stat-cell strong {
  font-size: 12.5px;
  font-weight: 800;
}

.card-d1-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

/* TOKENIZED COST REQUIREMENTS (PURE ICONS + MULTIPLIER) */
.card-d1-tokens-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #debfa0;
  border: 1px solid #ad8557;
  border-radius: 3px;
  padding: 4px 8px;
}

.token-row-label {
  font-size: 11px;
  font-weight: 800;
  color: #4a2f14;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.token-chips-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.token-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #241408;
  border: 1px solid #754d22;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.token-chip .t-ico {
  font-size: 12px;
}

.token-chip .t-qty {
  color: #ffd875;
  font-weight: 800;
  font-size: 13px;
}

/* POETIC LORE QUOTE */
.card-d1-lore-quote {
  font-size: 13px;
  font-style: italic;
  color: #3b2713;
  line-height: 1.4;
  border-left: 2.5px solid #a87e45;
  padding-left: 8px;
  margin-top: 2px;
  min-height: 34px;
}

.card-d1-footer {
  background: #ebd2b0;
  border-top: 1px solid #ba9663;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-d1-garrison {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.card-d1-garrison .g-lbl {
  color: #573a19;
  font-weight: 700;
}

.card-d1-garrison .g-val {
  color: #194f10;
  font-weight: 800;
}

.card-d1-stepper-act {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ==========================================================================
   DESIGN 2: THE WAR COUNCIL FOLIO (TOP WEAPON RACK & HERALDIC BANNERS)
   ========================================================================== */
.train-d2-rack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: linear-gradient(180deg, #241408 0%, #150a04 100%);
  border: 2px solid #6b4a22;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.7);
}

.rack-bay {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid #4a3014;
  padding-right: 10px;
}

.rack-bay:last-child {
  border-right: none;
  padding-right: 0;
}

.bay-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #dfb155;
  letter-spacing: 0.7px;
  border-bottom: 1px solid #3b230d;
  padding-bottom: 3px;
}

.bay-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
  gap: 6px;
}

.rack-slot {
  background: #1c0e05;
  border: 1px solid #573919;
  border-radius: 3px;
  padding: 3px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color 0.15s ease;
}

.rack-slot:hover {
  border-color: #a87e35;
}

.slot-ico {
  font-size: 13px;
}

.slot-name {
  font-size: 11px;
  color: #c7b095;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.slot-qty {
  font-size: 12px;
  font-weight: 800;
  color: #ffda73;
}

.rack-slot.highlight-rec-slot {
  border-color: #3f852b;
  background: #10260c;
}

.rack-slot.highlight-rec-slot .slot-qty {
  color: #a9ff8f;
}

.rack-slot.highlight-gold-slot {
  border-color: #9e751b;
  background: #2e1d05;
}

.rack-slot.highlight-gold-slot .slot-qty {
  color: #ffea85;
}

.train-subnav-d2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #24160c;
  border: 1.5px solid #6b4c22;
  border-radius: 4px;
  padding: 6px 12px;
  margin-bottom: 14px;
}

.d2-reserve-badge {
  font-size: 12px;
  color: #e3d2ba;
}

.d2-reserve-badge strong {
  color: #ffd875;
}

.train-d2-pane {
  display: none;
}

.train-d2-pane.active {
  display: block;
}

.train-cards-grid-d2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.train-banner-card {
  background: #eedebd;
  border: 2px solid #78501f;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.banner-top-ribbon {
  background: linear-gradient(180deg, #3d2411 0%, #201006 100%);
  border-bottom: 1.5px solid var(--gold-primary);
  padding: 7px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.banner-unit-name {
  font-size: 14px;
  font-weight: 800;
  color: #ffeaab;
}

.banner-portrait-frame {
  position: relative;
  height: 155px;
  background: #000;
  overflow: hidden;
}

.banner-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-stats-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(16, 8, 3, 0.9) 0%, rgba(16, 8, 3, 0.5) 70%, transparent 100%);
  padding: 6px 10px 4px;
  display: flex;
  justify-content: space-around;
}

.b-stat {
  font-size: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 3px;
}

.bs-lbl {
  color: #cfb186;
  font-weight: 700;
}

.banner-card-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.banner-req-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #e2cca8;
  border: 1px solid #ad8557;
  border-radius: 3px;
  padding: 4px 8px;
}

.banner-req-lbl {
  font-size: 11px;
  font-weight: 800;
  color: #4a2f14;
  letter-spacing: 0.6px;
}

.banner-tokens-wrap {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.d2-token-chip {
  background: #201107;
  border: 1px solid #6b471e;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.d2-t-num {
  color: #ffd875;
  font-weight: 800;
}

.banner-lore-inscription {
  font-size: 13px;
  font-style: italic;
  color: #3b2713;
  line-height: 1.4;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  border: 1px dashed #b8976b;
  min-height: 38px;
}

.banner-card-footer {
  background: #ebd2b0;
  border-top: 1px solid #ba9663;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.banner-garrison-pill {
  font-size: 12px;
  color: #4f3316;
}

.banner-garrison-pill strong {
  color: #174d0d;
}

.banner-action-row {
  display: flex;
  gap: 6px;
}

/* ==========================================================================
   DESIGN 3: THE QUARTERMASTER'S INSPECTION LEDGER (SPLIT ROSTER & CHARTER)
   ========================================================================== */
.train-d3-topbar {
  display: flex;
  gap: 16px;
  align-items: center;
  background: linear-gradient(180deg, #2b180d 0%, #170d05 100%);
  border: 2px solid #63431d;
  border-radius: 5px;
  padding: 7px 14px;
  margin-bottom: 14px;
  overflow-x: auto;
}

.d3-top-section {
  display: flex;
  align-items: center;
  gap: 6px;
  border-right: 1.5px solid #482f15;
  padding-right: 14px;
}

.d3-top-section:last-child {
  border-right: none;
  padding-right: 0;
}

.d3-sec-title {
  font-size: 12px;
  font-weight: 800;
  color: #dfb155;
  letter-spacing: 0.7px;
  margin-right: 4px;
}

.d3-sec-chip {
  background: #100803;
  border: 1px solid #4f3214;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
  color: #e8d7c0;
  white-space: nowrap;
}

.d3-sec-chip.highlight-rec {
  border-color: #408a2a;
  color: #afff96;
}

.d3-sec-chip.highlight-gold {
  border-color: #ab8020;
  color: #ffdf75;
}

/* SPLIT LAYOUT */
.train-d3-split {
  display: flex;
  gap: 18px;
  align-items: stretch;
}

.train-d3-list-pane {
  width: 350px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.train-subnav-d3 .train-tier-tabs.compact {
  display: flex;
  gap: 4px;
  width: 100%;
}

.train-subnav-d3 .train-tab-btn {
  flex: 1;
  padding: 6px 4px;
  font-size: 11.5px;
  justify-content: center;
}

.d3-roster-scroll-container {
  max-height: 520px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

.d3-tier-list {
  display: none;
  flex-direction: column;
  gap: 6px;
}

.d3-tier-list.active {
  display: flex;
}

.train-d3-tiers-col .d3-unit-row {
  background: #ebdcc0;
  border: 1.5px solid #8f6a39;
  border-radius: 4px;
  padding: 6px 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.train-d3-tiers-col .d3-unit-row:hover {
  background: #f7eedc;
  border-color: #b5894b;
  transform: translateX(3px);
}

.train-d3-tiers-col .d3-unit-row.selected {
  background: #ffeec9;
  border-color: #ffd875;
  box-shadow: 0 0 10px rgba(223, 177, 85, 0.6), inset 0 0 8px rgba(223, 177, 85, 0.2);
}

.d3-row-thumb {
  width: 44px;
  height: 44px;
  border-radius: 3px;
  object-fit: cover;
  border: 1.5px solid #6b4c22;
  flex-shrink: 0;
}

.d3-row-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.d3-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.d3-row-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #2e1a0b;
}

.unit-role-badge.mini {
  font-size: 11px;
  padding: 1px 4px;
}

.d3-row-cost-tokens {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.d3-list-token {
  font-size: 11.5px;
  background: #2b180a;
  color: #ffda73;
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid #6b451d;
  font-weight: 700;
}

.d3-row-garrison {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.d3-gar-val {
  font-size: 12px;
  font-weight: 800;
  color: #1a4f0f;
}

.d3-gar-lbl {
  font-size: 11px;
  color: #63431f;
}

/* RIGHT PANE: CHARTER */
.train-d3-charter-pane {
  flex: 1;
  min-width: 0;
}

.charter-frame {
  background: #f1e4cb;
  border: 2px solid #855e2a;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.charter-hero-banner {
  position: relative;
  height: 200px;
  background: #000;
  overflow: hidden;
}

.charter-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.charter-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18, 9, 3, 0.95) 0%, rgba(18, 9, 3, 0.4) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 20px;
  gap: 12px;
}

.charter-hero-headings {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.charter-unit-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: #ffeaab;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.8px;
}

.charter-role-tag {
  background: #6e2017;
  color: #ffd8d4;
  border: 1px solid #b5473a;
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

.charter-stats-meters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.meter-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #5e3f1c;
  border-radius: 3px;
  padding: 4px 8px;
}

.m-lbl {
  font-size: 11.5px;
  font-weight: 800;
  color: #d1b897;
  width: 38px;
}

.m-bar {
  flex: 1;
  height: 6px;
  background: #1a0e05;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid #4a2f15;
}

.m-fill {
  height: 100%;
}

.m-val {
  font-size: 12px;
  color: #fff;
  width: 20px;
  text-align: right;
}

.charter-lore-banner {
  background: #e6d3b3;
  border-top: 1px solid #ba9663;
  border-bottom: 1.5px solid #a37c47;
  padding: 12px 18px;
}

.charter-lore-quote {
  font-size: 13px;
  font-style: italic;
  color: #3b250e;
  line-height: 1.5;
  border-left: 3px solid #b5894b;
  padding-left: 12px;
}

/* LIVE REQUISITION CHECKLIST */
.charter-requisition-section {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid #c9a979;
}

.req-sec-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.req-sec-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #4a2f14;
  letter-spacing: 0.8px;
}

.req-sec-status.ok {
  font-size: 11.5px;
  font-weight: 800;
  color: #1b570e;
}

.charter-checklist {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.check-item {
  flex: 1 1 240px;
  background: #ded0b6;
  border: 1px solid #a88a5d;
  border-radius: 4px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}

.check-item {
  background: #ded0b6;
  border: 1px solid #a88a5d;
  border-radius: 3px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}
.check-item-info {
  display: flex;
  align-items: center;
  gap: 6px;
}
.check-item-stock {
  font-size: 11.5px;
  color: #1a4f0f;
  font-weight: 700;
  white-space: nowrap;
}

.check-item.ok {
  background: #ddead0;
  border-color: #6da35a;
}

.ci-ico {
  font-size: 14px;
}

.ci-name {
  font-weight: 700;
  color: #2b1c0e;
}

.ci-need {
  color: #5c3f21;
}

.ci-stock {
  font-size: 11.5px;
  color: #235414;
}

.ci-mark {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 800;
  color: #195e0c;
}

/* MUSTER ACTION BAR */
.charter-muster-bar {
  padding: 14px 18px;
  background: #e8d7bb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.muster-batch-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mb-label {
  font-size: 12.5px;
  font-weight: 800;
  color: #452b12;
}

.muster-total-cost {
  font-size: 13px;
  color: #3b240e;
}

.muster-total-cost strong {
  color: #174d0d;
}

.btn-royal-muster {
  background: linear-gradient(180deg, #4d8f28 0%, #295712 100%);
  border: 1.5px solid #78c445;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  transition: all 0.15s ease;
}

.btn-royal-muster:hover {
  background: linear-gradient(180deg, #5ba830 0%, #326b17 100%);
  border-color: #93db5f;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.btn-royal-muster:active {
  transform: translateY(1px);
}

.btn-seal {
  font-size: 14px;
}


/* ==========================================================================
   IDEA 1B: VAULT ON THE RIGHT & HIGH-CONTRAST STAT ICONS
   ========================================================================== */
.train-d1b-container {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-direction: row; /* Field is 1st (left), Vault is 2nd (right) */
}

.train-d1b-pane {
  display: none;
}

.train-d1b-pane.active {
  display: block;
}

.card-d1-stats-strip.stats-strip-icons {
  display: flex;
  justify-content: space-around;
  background: #180c05;
  border-bottom: 1.5px solid #63431d;
  padding: 5px 8px;
  gap: 6px;
}

.card-d1-stats-strip.stats-strip-icons .stat-ico-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #251408;
  border: 1px solid #573a19;
  border-radius: 3px;
  padding: 2px 7px;
  font-size: 12px;
  cursor: help;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.15s ease;
}

.card-d1-stats-strip.stats-strip-icons .stat-ico-cell:hover {
  background: #381f0d;
  border-color: #8c602e;
}

.card-d1-stats-strip.stats-strip-icons .stat-ico-cell .s-ico {
  font-size: 13px;
  line-height: 1;
}

.card-d1-stats-strip.stats-strip-icons .stat-ico-cell strong {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.card-d1-stats-strip.stats-strip-icons .stat-ico-cell strong.green { color: #a4ff87; }
.card-d1-stats-strip.stats-strip-icons .stat-ico-cell strong.red { color: #ff8585; }
.card-d1-stats-strip.stats-strip-icons .stat-ico-cell strong.blue { color: #85caff; }
.card-d1-stats-strip.stats-strip-icons .stat-ico-cell strong.amber { color: #ffd978; }

.barbarian-faction-banner {
  background: linear-gradient(90deg, #421814 0%, #290f0c 100%);
  border: 1.5px solid #8f3227;
  border-radius: 4px;
  color: #ffdad5;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.barbarian-faction-banner strong {
  color: #ffdf73;
}


/* ==========================================================================
   IDEA 1C: EXPANDED PORTRAIT HEAD-FRAMING, DISTINCT SVGS, LARGER TYPOGRAPHY
   ========================================================================== */
.train-d1c-pane {
  display: none;
}

.train-d1c-pane.active {
  display: block;
}

/* 180px Portrait with top-aligned object-position to preserve helmets and plumes */
.card-d1c-portrait-wrap {
  width: 100%;
  height: 180px;
  overflow: hidden;
  position: relative;
  background: #110702;
}

.card-d1c-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  transition: transform 0.3s ease;
}

.train-card-1c:hover .card-d1c-portrait-img {
  transform: scale(1.03);
}

/* Stat strip with +1px font and +2px icon sizing */
.stats-strip-icons-1c {
  display: flex;
  justify-content: space-around;
  background: #180c05;
  border-bottom: 1.5px solid #63431d;
  padding: 5px 8px;
  gap: 5px;
}

.stats-strip-icons-1c .stat-ico-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 4px;
  background: #251408;
  border: 1px solid #573a19;
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 12px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.15s ease;
}

.stats-strip-icons-1c .stat-ico-cell:hover {
  background: #3b210c;
  border-color: #94642d;
}

.stats-strip-icons-1c .stat-ico-cell .s-ico {
  font-size: 14px;
  line-height: 1;
}

.stats-strip-icons-1c .stat-ico-cell strong {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
}

.stats-strip-icons-1c .stat-ico-cell strong.green { color: #a4ff87 !important; }
.stats-strip-icons-1c .stat-ico-cell strong.red { color: #ff8585 !important; }
.stats-strip-icons-1c .stat-ico-cell strong.blue { color: #85caff !important; }
.stats-strip-icons-1c .stat-ico-cell strong.amber { color: #ffd978 !important; }

/* Tokens Row in Idea 1C: Stacked Header with Full-Width Chip Group to prevent overflow */
.card-d1-tokens-row.tokens-row-1c {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  background: #debfa0;
  border: 1px solid #ad8557;
  border-radius: 3px;
  padding: 6px 8px;
  box-sizing: border-box;
  width: 100%;
}

.tokens-row-1c .token-row-label {
  font-size: 10.5px;
  font-weight: 800;
  color: #482a0e;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
}

.tokens-row-1c .token-chips-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

.token-chip-1c {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  background: #201107;
  border: 1px solid #754d22;
  border-radius: 3px;
  padding: 2px 6px;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: border-color 0.15s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.token-chip-1c:hover {
  border-color: #ffd875;
}

.token-chip-1c .t-ico-svg {
  display: flex;
  align-items: center;
}

.token-chip-1c .t-qty-1c {
  color: #ffd875;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}

.token-chip-1c .res-inline-frame {
  width: 17px;
  height: 17px;
  border-radius: 3px;
  vertical-align: middle;
}

.vault-item-row .res-inline-frame {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  vertical-align: middle;
}

.eq-svg {
  width: 18px;
  height: 18px;
  display: block;
}

.eq-img-ico {
  width: 18px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid rgba(255, 216, 117, 0.45);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  display: block;
}

/* Poetic Lore in 1C (+1px font, relaxed line-height) */
.lore-quote-1c {
  font-size: 12px;
  line-height: 1.45;
  color: #38240f;
  min-height: 36px;
}

/* Armory Vault 1C enhancements (+1px font, SVGs) */
.train-vault-1c .vault-item-row {
  padding: 4px 6px;
}

.train-vault-1c .v-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
}

.train-vault-1c .v-name {
  font-size: 12px;
  color: #e5d6c3;
}

.train-vault-1c .v-qty {
  font-size: 12.5px;
  padding: 2px 7px;
}

/* ==========================================================================
   TRAIN SCREEN RECRUITMENT PORTRAITS (IDEA 1E: BORDERLESS ARTWORK)
   ========================================================================== */
.train-d1b-container .card-d1c-portrait-wrap,
.train-d1b-container.design-1e .card-d1c-portrait-wrap {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
  background: #110702;
  border-bottom: 2px solid #543714;
}

.train-d1b-container .card-d1c-portrait-img,
.train-d1b-container.design-1e .card-d1c-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.3s ease;
}

.train-card-1c:hover .card-d1c-portrait-img {
  transform: scale(1.03);
}


/* ==========================================================================
   TAVERN & SUSTENANCE SCREEN (PER-VILLAGE FOOD & HUNGER SYSTEM)
   ========================================================================== */
.tavern-window {
  width: 1340px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.tavern-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--parchment-base);
  color: var(--parchment-text);
}


/* ==========================================================================
   COMMON TAVERN CARD & SCOPE ELEMENTS
   ========================================================================== */
.tavern-scope-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 18px;
  background: #fbf5ec;
  border: 1.5px solid #c2a677;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(70, 45, 15, 0.06);
}

.scope-village-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scope-village-info .scope-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #fdf8ee 0%, #ecdcb9 100%);
  border: 1.5px solid #b8863b;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(60, 35, 10, 0.15);
  flex-shrink: 0;
}

.scope-village-info .scope-title {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: #2c1a0e;
  letter-spacing: 0.6px;
}

.scope-village-info .scope-title strong {
  color: #875b1c;
}

.scope-village-info .scope-desc {
  display: block;
  font-size: 12px;
  color: #634b35;
  margin-top: 2px;
}

.scope-pop-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pop-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: #f5eedc;
  border: 1.5px solid #d0ba96;
  border-radius: 4px;
  font-size: 12.5px;
}

.pop-badge .pop-lbl {
  color: #6e5033;
  font-size: 12px;
}

.pop-badge .pop-val {
  font-weight: 800;
  font-size: 13px;
  color: #2c1a0e;
}

.pop-badge .pop-val.gold {
  color: #8c5800;
}

.pop-badge.total {
  border-color: #a97835;
  background: #faecd4;
  box-shadow: 0 1px 4px rgba(169, 120, 53, 0.15);
}

.tavern-card {
  background: #fbf5ec;
  border: 1.5px solid #c2a677;
  border-radius: 4px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 3px 10px rgba(70, 45, 15, 0.08);
}

.tavern-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1.5px solid #decbb0;
  padding-bottom: 10px;
}

.card-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-title-group .t-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 20px;
  flex-shrink: 0;
}

.card-main-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: #2c1a0e;
  letter-spacing: 0.6px;
}

.card-sub-title {
  display: block;
  font-size: 12px;
  color: #684e37;
  margin-top: 2px;
}

.hunger-state-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.hunger-state-pill.state-fed {
  background: #eaf6e5;
  border: 1.5px solid #48a62f;
  color: #1d640e;
}

.hunger-state-pill.state-hydrated {
  background: #e6f2fa;
  border: 1.5px solid #368ece;
  color: #145585;
}

.hunger-state-pill.state-warning {
  background: #fdf5e6;
  border: 1.5px solid #d48817;
  color: #8c5305;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulseDot 2s infinite ease-in-out;
}

.pulse-dot.green {
  background: #2ea314;
  box-shadow: 0 0 6px rgba(46, 163, 20, 0.6);
}

.pulse-dot.blue {
  background: #247ec3;
  box-shadow: 0 0 6px rgba(36, 126, 195, 0.6);
}

.pulse-dot.amber {
  background: #d48817;
  box-shadow: 0 0 6px rgba(212, 136, 23, 0.6);
}

@keyframes pulseDot {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Tavern Meter Bars */
.tavern-gauge-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gauge-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.gauge-label {
  color: #3d2614;
  font-weight: 700;
}

.gauge-value.green-glow {
  color: #1d6b0e;
  font-weight: 800;
}

.gauge-value.blue-glow {
  color: #175b92;
  font-weight: 800;
}

.tavern-progress-track {
  height: 16px;
  background: #e8ddc7;
  border: 1.5px solid #baa17d;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

.tavern-progress-bar {
  height: 100%;
  transition: width 0.5s ease;
  position: relative;
}

.tavern-progress-bar.green-gradient {
  background: linear-gradient(90deg, #2b7a1f 0%, #3ca827 70%, #58c442 100%);
  box-shadow: 0 0 6px rgba(88, 196, 66, 0.4);
}

.tavern-progress-bar.blue-gradient {
  background: linear-gradient(90deg, #1b5f94 0%, #2982c7 70%, #4ea8ec 100%);
  box-shadow: 0 0 6px rgba(78, 168, 236, 0.4);
}

.tavern-progress-bar.amber-gradient {
  background: linear-gradient(90deg, #a85810 0%, #d47e17 70%, #f0a33a 100%);
  box-shadow: 0 0 6px rgba(212, 126, 23, 0.4);
}

.gauge-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #c83220;
  box-shadow: 0 0 4px rgba(200, 50, 32, 0.6);
  z-index: 2;
}

.gauge-sub-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #684e37;
  margin-top: 2px;
}

.endurance-tag strong {
  color: #2c1a0e;
  font-weight: 800;
}

.status-tip {
  font-style: italic;
  color: #75593e;
}

/* Stockpile Breakdown */
.stockpile-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f5eedc;
  border: 1.5px solid #d9c5a0;
  border-radius: 4px;
  padding: 10px 12px;
}

.stockpile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed #d9c5a0;
}

.stockpile-row:last-child {
  border-bottom: none;
}

.res-ident {
  display: flex;
  align-items: center;
  gap: 10px;
}

.res-ident .res-ico {
  font-size: 22px;
}

.res-name {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #2c1a0e;
}

.res-note {
  display: block;
  font-size: 12.5px;
  color: #6e5339;
}

.res-note.gold-note {
  color: #8c5800;
  font-weight: 700;
}

.res-quantities {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.res-current {
  font-size: 14px;
  font-weight: 800;
  color: #2c1a0e;
}

.res-rate.positive {
  font-size: 12.5px;
  font-weight: 700;
  color: #1d6b0e;
}

.luxury-bonus-tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 7px;
  border-radius: 3px;
  background: #faecd4;
  border: 1px solid #caa87b;
  color: #7a4900;
}

/* Rule Explainer Box */
.tavern-rule-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fdf6e7;
  border-left: 3.5px solid #c2912e;
  border-top: 1px solid #decbb0;
  border-right: 1px solid #decbb0;
  border-bottom: 1px solid #decbb0;
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  font-size: 12px;
  color: #553b22;
  line-height: 1.45;
}

.tavern-rule-box .rule-icon {
  font-size: 16px;
}

.tavern-rule-box strong {
  color: #2c1a0e;
  font-weight: 800;
}

/* ==========================================================================
   SEGMENTED CONTROL BUTTONS (FOR BOTH CONCEPTS)
   ========================================================================== */
.t-segmented-group {
  display: flex;
  background: #e8dcc7;
  border: 1.5px solid #c2a677;
  border-radius: 4px;
  padding: 3px;
  gap: 3px;
}

.t-segment-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1.5px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: #4a331d;
  cursor: pointer;
  border-radius: 3px;
  box-sizing: border-box;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.t-segment-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

.t-segment-btn.selected {
  background: #ffffff;
  color: #1a0f08;
  box-shadow: 0 1px 4px rgba(70, 45, 15, 0.22);
  border-color: #a88344;
}

.t-segment-btn.selected .seg-tag.gold {
  background: #f7e2bd;
  border-color: #b08030;
  color: #633f0a;
}

.t-segment-btn .seg-ico {
  font-size: 14px;
}

.t-segment-btn .seg-tag {
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 2px;
  background: #e2d2b8;
  color: #5c3c1b;
}

.t-segment-btn .seg-tag.gold {
  background: #faecd4;
  border: 1px solid #caa87b;
  color: #875b1c;
}

.t-segment-btn .seg-tag.amber {
  background: #fae4d7;
  border: 1px solid #d48a53;
  color: #94400e;
}

/* ==========================================================================
   TAVERN STRATEGIC SECTORS & EFFICIENCY GAUGES (0% - 150% SCALE)
   ========================================================================== */
.tavern-sectors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sector-card {
  background: #fbf5ec;
  border: 1.5px solid #c2a677;
  border-radius: 4px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 3px 10px rgba(70, 45, 15, 0.08);
  min-height: 310px;
  box-sizing: border-box;
}

.efficiency-gauge-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.efficiency-track {
  height: 20px;
  background: #e8ddc7;
  border: 1.5px solid #baa17d;
  border-radius: 4px;
  position: relative;
  overflow: visible;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
  margin-bottom: 14px;
}

.gauge-marker.floor-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  background: #c83220;
  box-shadow: 0 0 6px rgba(200, 50, 32, 0.75);
  z-index: 5;
}

.marker-tag.floor-tag {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11.5px;
  font-weight: 800;
  color: #c83220;
  white-space: nowrap;
}

.gauge-marker.base-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: #8c5d26;
  z-index: 4;
}

.marker-tag.base-tag {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11.5px;
  font-weight: 800;
  color: #8c5d26;
  white-space: nowrap;
}

.gauge-axis-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: #705439;
  font-weight: 700;
  margin-top: 2px;
}

.gauge-axis-row .axis-floor {
  color: #c83220;
}

.gauge-axis-row .axis-base {
  color: #8c5d26;
}

.gauge-axis-row .axis-max {
  color: #1d6b0e;
  font-weight: 800;
}

/* Sector Directives */
.sector-directive-section {
  background: #f5eedc;
  border: 1.5px solid #d9c5a0;
  border-radius: 4px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sector-dir-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dir-heading {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #4a331d;
}

.policy-active-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 3px;
  background: #ecdcb9;
  border: 1px solid #c4a26e;
  color: #5c3b17;
  white-space: nowrap;
  line-height: 1;
}

.policy-active-badge.gold {
  background: #faecd4;
  border-color: #caa87b;
  color: #875b1c;
}

.policy-active-badge.amber {
  background: #fae4d7;
  border-color: #d48a53;
  color: #94400e;
}

.sector-dir-desc {
  display: block;
  font-size: 12px;
  color: #5a402a;
  line-height: 1.45;
  min-height: 48px;
  box-sizing: border-box;
}

/* ==========================================================================
   PANTRY & CELLARS SUSTENANCE LEDGER
   ========================================================================== */
.pantry-ledger-card {
  background: #fbf5ec;
  border: 1.5px solid #c2a677;
  border-radius: 4px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 3px 10px rgba(70, 45, 15, 0.08);
}

.ledger-header-runways {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.runway-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
}

.runway-pill.green {
  background: #eaf6e5;
  border: 1.5px solid #9ecc8c;
  color: #1d640e;
}

.runway-pill.blue {
  background: #e6f2fa;
  border: 1.5px solid #368ece;
  color: #145585;
}

.runway-pill .r-lbl {
  font-weight: 700;
}

.pantry-stock-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.pantry-stock-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f5eedc;
  border: 1.5px solid #d9c5a0;
  border-radius: 4px;
  padding: 10px 14px;
}

.pantry-stock-item.luxury {
  background: #fdf6e7;
  border-color: #caa87b;
  transition: all 0.2s ease;
}

.pantry-stock-item.luxury.active-served {
  background: #fdf3dc;
  border-color: #b88628;
  box-shadow: 0 0 7px rgba(184, 134, 40, 0.28);
}

.pantry-stock-item.luxury.inactive-saved {
  opacity: 0.75;
  background: #f5eee0;
  border-color: #d6c6ad;
}

.pantry-stock-item .p-ico {
  font-size: 26px;
}

.pantry-stock-item .p-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pantry-stock-item .p-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #2c1a0e;
}

.pantry-stock-item .p-vals {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.pantry-stock-item .p-qty {
  font-weight: 800;
  color: #2c1a0e;
}

.pantry-stock-item .p-rate.positive {
  font-weight: 700;
  font-size: 12px;
  color: #1d6b0e;
}

.pantry-stock-item .p-role {
  font-size: 12px;
  color: #6e5033;
  font-weight: 700;
}

.pantry-stock-item .p-role.gold {
  color: #8c5800;
  font-weight: 800;
}

.pantry-ledger-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: #553b22;
  border-top: 1px dashed #d9c5a0;
  padding-top: 8px;
}

.pantry-ledger-footer .ledger-note strong {
  color: #2c1a0e;
}

.ledger-decay-tag {
  background: #eaf6e5;
  border: 1px solid #9ecc8c;
  color: #1d640e;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 800;
  font-size: 12.5px;
}

.ledger-decay-tag.amber {
  background: #fdf5e6;
  border: 1px solid #d48817;
  color: #8c5305;
}


/* Tavern Hearth Banner */
.tavern-hearth-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fdf5e6;
  border: 1.5px solid #d6b889;
  border-radius: 4px;
  padding: 12px 18px;
  box-shadow: 0 2px 6px rgba(70, 45, 15, 0.06);
}

.hearth-icon {
  font-size: 30px;
  filter: drop-shadow(0 2px 4px rgba(210, 100, 30, 0.3));
}

.hearth-rumors {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hearth-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #94400e;
  letter-spacing: 0.8px;
}

.rumor-quotes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: #4a341e;
}

.rumor-quotes em {
  color: #2c1a0e;
  font-weight: 600;
}

/* ==========================================================================
   REALM WORLD MAP SCREEN (GLOBAL ATLAS SYSTEM)
   ========================================================================== */
/* ==========================================================================
   REALM WORLD MAP SCREEN (LIGHT PARCHMENT THEME - ALDORIA ATLAS)
   ========================================================================== */
.map-window {
  width: 1340px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--parchment-base);
  color: var(--parchment-text);
  border: 2px solid #845e2a;
}

/* Map Scope Banner */
.map-scope-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 20px;
  margin: 14px 18px 0;
  background: #e8d9ba;
  border: 1.5px solid #a37c3e;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.map-scope-bar .scope-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.map-scope-bar .scope-icon {
  font-size: 28px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.map-scope-bar .scope-title {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: #2a1b10;
  letter-spacing: 0.5px;
}

.map-scope-bar .scope-desc {
  display: block;
  font-size: 12.5px;
  color: #634b35;
  margin-top: 3px;
}

.map-coords-badge {
  padding: 7px 16px;
  background: #fcf7eb;
  border: 1.5px solid #b89253;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #2a1b10;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.map-coords-badge strong {
  color: #7c4712;
  font-weight: 800;
}

.map-coords-badge .topo-tag {
  background: #e5d1a8;
  color: #4b2d0e;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 12.5px;
  font-weight: 800;
  margin-left: 6px;
  border: 1px solid #9c733b;
}

/* ==========================================================================
   CLEAN 2-WAY DESIGN SELECTOR BAR
   ========================================================================== */
.map-design-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  margin: 10px 18px 0;
  background: linear-gradient(180deg, #24150b 0%, #150a04 100%);
  border: 1px solid #643f1b;
  border-radius: 4px;
}

.map-design-bar .design-bar-lbl {
  font-size: 12px;
  font-weight: 800;
  color: #d8be96;
  letter-spacing: 0.8px;
}

.map-design-bar .design-btn-group {
  display: flex;
  gap: 10px;
}

.map-design-switch-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: linear-gradient(180deg, #2e1d0f 0%, #1a0f07 100%);
  border: 1px solid #684520;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #d1ba99;
}

.map-design-switch-btn:hover {
  border-color: #dfb155;
  background: linear-gradient(180deg, #3d2714 0%, #22140a 100%);
  color: #fff0cf;
}

.map-design-switch-btn.active {
  background: linear-gradient(180deg, #4d3016 0%, #2b180a 100%);
  border-color: #dfb155;
  box-shadow: 0 0 10px rgba(223, 177, 85, 0.35);
  color: #fff5dc;
}

.map-design-switch-btn .d-badge {
  font-size: 11.5px;
  font-weight: 900;
  background: #1b1007;
  color: #dfb155;
  padding: 2px 6px;
  border: 1px solid #5a3818;
  border-radius: 2px;
}

.map-design-switch-btn.active .d-badge {
  background: #5a3916;
  color: #ffe596;
  border-color: #dfb155;
}

.map-design-switch-btn .d-desc {
  font-size: 13px;
  font-weight: 700;
}

/* ==========================================================================
   DESIGN 1: THE ROYAL WAR ROOM (SPLIT MASTER-DETAIL FOLIO)
   ========================================================================== */
.map-d1-container {
  display: flex;
  gap: 16px;
  padding: 14px 18px 20px;
}

.map-d1-canvas-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.map-d1-dossier-col {
  width: 440px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* Canvas HUD Controls */
.map-canvas-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #27190d 0%, #170d06 100%);
  border: 1px solid #5a391a;
  border-radius: 4px;
}

.hud-sector-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hud-sector-ico {
  font-size: 20px;
}

.hud-sector-name {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #ffd86b;
}

.hud-sector-coords {
  display: block;
  font-size: 11.5px;
  color: #a89173;
}

.map-filter-group {
  display: flex;
  gap: 5px;
}

.map-filter-btn {
  background: #1b1007;
  border: 1px solid #533416;
  border-radius: 3px;
  color: #cfbc9e;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.map-filter-btn:hover {
  border-color: #dfb155;
  color: #fff;
}

.map-filter-btn.active {
  background: #462c14;
  border-color: #dfb155;
  color: #ffdf85;
}

.map-zoom-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.map-tool-btn {
  background: #f4ecda;
  border: 1.5px solid #b8955a;
  color: #2a1b10;
  width: 28px;
  height: 28px;
  border-radius: 3px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.15s ease;
}

.map-tool-btn:hover {
  background: #fdfaf2;
  border-color: #7c4712;
  color: #000;
}

.map-zoom-val {
  font-size: 13px;
  font-weight: 800;
  color: #2a1b10;
  min-width: 44px;
  text-align: center;
}

.map-recenter-btn {
  background: linear-gradient(180deg, #3a2412 0%, #201308 100%);
  border: 1px solid #845724;
  border-radius: 3px;
  color: #ffe596;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  cursor: pointer;
}

.map-recenter-btn:hover {
  border-color: #ffd86b;
  box-shadow: 0 0 6px rgba(255,216,107,0.4);
}

/* Tactical Viewport (Design 1) */
.map-tactical-viewport {
  position: relative;
  width: 100%;
  height: 560px;
  border: 2px solid #6b4720;
  border-radius: 4px;
  overflow: hidden;
  background: #1c1209;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.85), 0 6px 18px rgba(0,0,0,0.6);
}

.map-terrain-canvas {
  position: absolute;
  inset: 0;
  background-image: url('assets/map_terrain_rich.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Rivers & Waterways (Hand-painted in artwork; SVG disabled) */
.map-river-svg {
  display: none;
}

.map-topo-decor {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(14, 8, 3, 0.7);
  border: 1px dashed rgba(160, 120, 70, 0.4);
  border-radius: 12px;
  padding: 3px 10px;
  pointer-events: none;
}

.map-topo-decor .topo-icon {
  font-size: 14px;
}

.map-topo-decor .topo-text {
  font-size: 11px;
  font-weight: 800;
  color: #c9b18f;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* ==========================================================================
   3-LAYER FOG OF WAR ENGINE
   ========================================================================== */

/* Layer 1: Terra Incognita Clouds */
.fog-terra-incognita {
  position: absolute;
  pointer-events: none;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fog-north {
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(180deg, #100803 0%, rgba(20, 11, 4, 0.95) 50%, transparent 100%);
  border-bottom: 1px dashed rgba(140, 95, 45, 0.4);
}

.fog-east {
  top: 0;
  right: 0;
  bottom: 0;
  width: 100px;
  background: linear-gradient(270deg, #100803 0%, rgba(20, 11, 4, 0.95) 50%, transparent 100%);
  border-left: 1px dashed rgba(140, 95, 45, 0.4);
}

.fog-label {
  font-size: 11.5px;
  font-weight: 900;
  color: rgba(223, 177, 85, 0.5);
  letter-spacing: 2.5px;
  text-shadow: 0 2px 4px #000;
}

.fog-label.vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Layer 3: Active Line of Sight Zone (24h Window) */
.fog-active-sight-zone {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(circle, rgba(255, 223, 133, 0.12) 0%, rgba(255, 200, 80, 0.04) 65%, transparent 100%);
}

.sight-pulse-ring {
  position: absolute;
  inset: 0;
  border: 1.5px dashed rgba(255, 218, 115, 0.6);
  border-radius: 50%;
  animation: pulseSightRing 3s ease-in-out infinite;
}

@keyframes pulseSightRing {
  0% { transform: scale(0.96); opacity: 0.5; }
  50% { transform: scale(1.02); opacity: 0.9; }
  100% { transform: scale(0.96); opacity: 0.5; }
}

.sight-timer-badge {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(20, 10, 3, 0.92);
  border: 1px solid #dfb155;
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

.sight-timer-badge .st-ico {
  font-size: 12px;
}

.sight-timer-badge .st-txt {
  font-size: 11px;
  color: #ffd86b;
  font-weight: 700;
}

/* Capital Vision Zone */
.fog-capital-vision-zone {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle, rgba(255, 218, 115, 0.14) 0%, rgba(255, 200, 80, 0.05) 70%, transparent 100%);
}

.capital-vision-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 218, 115, 0.35);
  border-radius: 50%;
}

/* ==========================================================================
   ANIMATED MARCH TRACKS & AGENT CHIPS
   ========================================================================== */
.map-march-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
}

.march-dash-anim {
  animation: dashMove 1.5s linear infinite;
}

.march-dash-hostile {
  animation: dashMove 1.2s linear infinite;
}

@keyframes dashMove {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}

.march-agent-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 15;
  pointer-events: none;
}

.agent-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0,0,0,0.8);
}

.agent-chip.scout {
  background: rgba(26, 17, 7, 0.95);
  border: 1px solid #ffd86b;
  color: #fff2cf;
}

.agent-chip.hostile {
  background: rgba(35, 8, 5, 0.95);
  border: 1px solid #e04a3f;
  color: #ffb8b3;
  animation: alertPulse 1.8s infinite;
}

@keyframes alertPulse {
  0% { box-shadow: 0 0 4px #e04a3f; }
  50% { box-shadow: 0 0 12px #e04a3f; }
  100% { box-shadow: 0 0 4px #e04a3f; }
}

/* ==========================================================================
   REALM INTERACTIVE PINS
   ========================================================================== */
.realm-interactive-pins {
  position: absolute;
  inset: 0;
}

.node-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.18s ease, z-index 0.18s ease;
}

.node-pin:hover {
  transform: translate(-50%, -55%) scale(1.1);
  z-index: 25;
}

.node-pin.active {
  transform: translate(-50%, -55%) scale(1.12);
  z-index: 30;
}

.node-badge-icon {
  font-size: 26px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.9));
  position: relative;
}

.node-halo.capital {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 218, 115, 0.4) 0%, transparent 70%);
  animation: capitalGlow 2.5s infinite;
  pointer-events: none;
}

@keyframes capitalGlow {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
}

.node-raid-gauge {
  width: 38px;
  height: 5px;
  background: rgba(0,0,0,0.8);
  border: 1px solid #7c221a;
  border-radius: 3px;
  margin-top: 2px;
  overflow: hidden;
}

.node-raid-gauge .gauge-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff8030, #e03222);
  border-radius: 2px;
}

.node-label-card {
  margin-top: 4px;
  padding: 3px 8px;
  background: rgba(16, 9, 3, 0.94);
  border: 1px solid #6b4720;
  border-radius: 3px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0,0,0,0.8);
  transition: border-color 0.15s ease;
}

.node-pin:hover .node-label-card,
.node-pin.active .node-label-card {
  border-color: #dfb155;
  background: rgba(28, 14, 5, 0.96);
  box-shadow: 0 0 10px rgba(223, 177, 85, 0.4);
}

.node-title {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #ffdf85;
}

.node-coords {
  display: block;
  font-size: 11px;
  color: #bfa78a;
}

/* Node Type Highlights */
.node-pin.pin-capital .node-label-card {
  border-color: #ffd86b;
  background: rgba(35, 18, 5, 0.96);
}

.node-pin.pin-capital .node-title {
  color: #fff2c4;
}

.node-pin.pin-allied .node-label-card {
  border-color: #5599d4;
}

.node-pin.pin-rival .node-label-card {
  border-color: #cc4433;
}

.node-pin.pin-uncharted .node-label-card {
  border-color: #8c7356;
  border-style: dashed;
}

.node-pin.pin-barbarian .node-label-card,
.node-pin.pin-barbarian-river .node-label-card {
  border-color: #d15822;
}

/* Monster Nodes */
.node-label-card.monster-t1 { border-color: #689c44; }
.node-label-card.monster-t2 { border-color: #3b8e99; }
.node-label-card.monster-t3 { border-color: #c93b32; box-shadow: 0 0 8px rgba(201, 59, 50, 0.4); }

/* Minimap Radar */
.map-minimap-radar {
  position: absolute;
  bottom: 14px;
  left: 14px;
  width: 140px;
  background: rgba(14, 8, 3, 0.92);
  border: 1px solid #734e26;
  border-radius: 4px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.8);
  z-index: 15;
}

.minimap-title {
  font-size: 11px;
  font-weight: 900;
  color: #dfb155;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-align: center;
}

.minimap-grid {
  position: relative;
  width: 100%;
  height: 90px;
  background: #100802;
  border: 1px solid #4a3015;
  border-radius: 2px;
}

.minimap-viewport-box {
  position: absolute;
  border: 1px solid #ffda73;
  background: rgba(255, 218, 115, 0.15);
  box-shadow: 0 0 6px rgba(255, 218, 115, 0.4);
}

.minimap-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.minimap-dot.player { background: #ffd86b; box-shadow: 0 0 4px #ffd86b; }
.minimap-dot.ally { background: #5db3ff; }
.minimap-dot.barb { background: #f06020; }
.minimap-dot.wyrm { background: #ff3322; box-shadow: 0 0 6px #ff3322; }

.minimap-caption {
  font-size: 11px;
  color: #9c8567;
  text-align: center;
  margin-top: 5px;
}

/* Legend Strip */
.map-legend-strip {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(14, 8, 3, 0.92);
  border: 1px solid #6c4720;
  border-radius: 4px;
  padding: 6px 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 15;
  box-shadow: 0 4px 12px rgba(0,0,0,0.8);
}

.leg-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #d1bfa5;
}

.leg-pill {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.leg-pill.player { background: #ffd86b; box-shadow: 0 0 4px #ffd86b; }
.leg-pill.ally { background: #5599d4; }
.leg-pill.rival { background: #e04433; }
.leg-pill.barb { background: #f06a24; }
.leg-pill.beast { background: #ab47e6; }
.leg-pill.vision { background: #44dd88; }

/* ==========================================================================
   THE LORD'S RECONNAISSANCE DOSSIER (RIGHT PANEL IN DESIGN 1)
   ========================================================================== */
.dossier-frame {
  background: linear-gradient(180deg, #24160b 0%, #160c05 100%);
  border: 2px solid #734d23;
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.7), 0 6px 16px rgba(0,0,0,0.5);
  height: 100%;
}

.dossier-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid #4a3016;
  padding-bottom: 12px;
}

.dossier-icon-box {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #3d2410 0%, #1f1106 100%);
  border: 1.5px solid #9e6f33;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 2px 6px rgba(0,0,0,0.6);
}

.dossier-title-group {
  flex: 1;
  min-width: 0;
}

.dossier-sub-tag {
  font-size: 11px;
  font-weight: 800;
  color: #dfb155;
  letter-spacing: 0.8px;
}

.dossier-name {
  margin: 2px 0 3px;
  font-size: 18px;
  font-weight: 800;
  color: #fff2d1;
  font-family: var(--font-primary);
}

.dossier-coords {
  font-size: 12px;
  color: #b59e80;
}

.dossier-status-strip {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(14, 8, 3, 0.7);
  border: 1px solid #553416;
  border-radius: 3px;
}

.status-col {
  flex: 1;
}

.status-col .sc-lbl {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #9c8365;
}

.status-col .sc-val {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  margin-top: 1px;
}

.status-col .sc-val.danger { color: #ff6854; }
.status-col .sc-val.gold { color: #ffd86b; }
.status-col .sc-val.green { color: #55dd77; }

.dossier-lore-banner {
  padding: 10px 12px;
  background: rgba(26, 15, 6, 0.85);
  border-left: 3px solid #dfb155;
  border-radius: 2px;
}

.dossier-lore-text {
  margin: 0;
  font-size: 12.5px;
  color: #e5d2b8;
  font-style: italic;
  line-height: 1.5;
}

/* Recon Intel Card (Approximations Only) */
.dossier-intel-card {
  background: rgba(14, 7, 2, 0.8);
  border: 1px solid #613e1a;
  border-radius: 4px;
  padding: 10px 12px;
}

.intel-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #3c2410;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.ich-title {
  font-size: 11.5px;
  font-weight: 900;
  color: #dfb155;
  letter-spacing: 0.6px;
}

.ich-tip {
  font-size: 11px;
  color: #c9b08f;
  background: #2a180a;
  padding: 1px 6px;
  border-radius: 2px;
}

.intel-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.intel-metric-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #1d1006;
  border: 1px solid #4a2c11;
  border-radius: 3px;
}

.intel-metric-box .im-ico {
  font-size: 18px;
}

.intel-metric-box .im-lbl {
  display: block;
  font-size: 11px;
  color: #9e8568;
}

.intel-metric-box .im-val {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff2d1;
}

.intel-metric-box .im-val.gold { color: #ffd86b; }
.intel-metric-box .im-val.amber { color: #f5a623; }

/* Dispatch Operations Section */
.dossier-dispatch-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dispatch-sec-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dsh-title {
  font-size: 12px;
  font-weight: 900;
  color: #ffd86b;
  letter-spacing: 0.5px;
}

.dsh-status.ok {
  font-size: 11px;
  font-weight: 700;
  color: #55dd77;
}

.dispatch-stepper-box {
  background: rgba(18, 9, 3, 0.85);
  border: 1px solid #5a3818;
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dsb-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dsb-stepper-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dsb-lbl {
  font-size: 12px;
  font-weight: 800;
  color: #dfcca8;
}

.dsb-eta {
  text-align: right;
}

.dsb-eta .eta-lbl {
  display: block;
  font-size: 11px;
  color: #9c8365;
}

.dsb-eta .eta-val {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #ffd86b;
}

.dispatch-impact-banner {
  padding: 6px 8px;
  background: #140902;
  border: 1px dashed #68421c;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.impact-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  color: #ccb799;
}

.impact-row .ir-bullet {
  color: #dfb155;
  font-size: 11px;
}

.impact-row.accuracy-note {
  color: #ffd86b;
  font-style: italic;
  border-top: 1px solid #2d1808;
  padding-top: 3px;
  margin-top: 2px;
}

/* Action Buttons */
.dossier-actions-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-royal-scout,
.btn-royal-muster-attack {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.btn-royal-scout {
  background: linear-gradient(180deg, #442a12 0%, #241407 100%);
  border: 1px solid #9e6f33;
  color: #fff2cf;
}

.btn-royal-scout:hover {
  background: linear-gradient(180deg, #573719 0%, #2f1b0a 100%);
  border-color: #ffd86b;
  box-shadow: 0 0 10px rgba(255, 216, 107, 0.4);
}

.btn-royal-muster-attack {
  background: linear-gradient(180deg, #5a1e16 0%, #2e0d08 100%);
  border: 1px solid #a3382c;
  color: #ffe0dc;
}

.btn-royal-muster-attack:hover {
  background: linear-gradient(180deg, #74271c 0%, #3e120b 100%);
  border-color: #ff5e4d;
  box-shadow: 0 0 10px rgba(255, 94, 77, 0.4);
}

/* Ongoing Marches Strip */
.dossier-marches-card {
  background: rgba(14, 7, 2, 0.85);
  border: 1px solid #5a3818;
  border-radius: 4px;
  padding: 10px 12px;
  margin-top: auto;
}

.dm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #3c2410;
  padding-bottom: 5px;
  margin-bottom: 8px;
}

.dm-title {
  font-size: 11.5px;
  font-weight: 900;
  color: #dfb155;
  letter-spacing: 0.5px;
}

.dm-badge {
  font-size: 11px;
  font-weight: 800;
  background: #3a220f;
  color: #ffd86b;
  padding: 1px 6px;
  border-radius: 2px;
}

.dm-march-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dm-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.dm-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dmi-ico {
  font-size: 16px;
}

.dmi-meta {
  min-width: 0;
}

.dmi-title {
  display: block;
  font-size: 11.5px;
  color: #fff2d1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dmi-sub {
  display: block;
  font-size: 11px;
  color: #9c8365;
}

.dm-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  width: 75px;
}

.dmi-timer {
  font-size: 11.5px;
  font-weight: 800;
  color: #ffd86b;
}

.dmi-bar {
  width: 100%;
  height: 4px;
  background: #241407;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid #4a2d12;
}

.dmi-fill {
  height: 100%;
  background: #55dd77;
  border-radius: 2px;
}

.dmi-fill.gold {
  background: #ffd86b;
}

/* ==========================================================================
   DESIGN 2: THE SOVEREIGN'S CANVAS ATLAS (LIGHT PARCHMENT THEME & LARGER FONTS)
   ========================================================================== */
.map-d2-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 18px 20px;
}

.map-d2-top-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 18px;
  background: #e8d9ba;
  border: 1.5px solid #a37c3e;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.d2-jump-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.d2-jump-lbl {
  font-size: 13.5px;
  font-weight: 900;
  color: #1a0f05;
  letter-spacing: 0.8px;
  text-shadow: none;
}

.d2-coords-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 800;
  color: #1a0f05;
}

.d2-coords-inputs input {
  width: 54px;
  padding: 4px 6px;
  background: #fdfaf2;
  border: 1.5px solid #b8955a;
  border-radius: 3px;
  color: #2a1b10;
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.d2-coords-inputs input::-webkit-outer-spin-button,
.d2-coords-inputs input::-webkit-inner-spin-button,
.coord-input::-webkit-outer-spin-button,
.coord-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.d2-coords-inputs input:focus {
  border-color: #7c4712;
  outline: none;
}

.d2-btn-jump {
  padding: 6px 14px;
  background: linear-gradient(180deg, #d8bc88 0%, #b89255 100%);
  border: 1.5px solid #825824;
  border-radius: 3px;
  color: #261608;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
}

.d2-btn-jump:hover {
  background: linear-gradient(180deg, #e4ca96 0%, #c49e62 100%);
  border-color: #633f11;
  color: #120902;
}

/* Admin Purple Buttons (Spawn New Player & Fog Toggle) */
.d2-admin-btn {
  background: linear-gradient(180deg, #ede2fa 0%, #d8c2f2 100%) !important;
  border: 1.5px solid #8e58c9 !important;
  color: #4a1d7c !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(110, 40, 180, 0.15) !important;
  transition: all 0.15s ease;
}

.d2-admin-btn:hover {
  background: linear-gradient(180deg, #f5edff 0%, #e3d0f7 100%) !important;
  border-color: #7231ad !important;
  color: #2f0d57 !important;
  box-shadow: 0 0 8px rgba(142, 88, 201, 0.35) !important;
}

.d2-admin-btn.active {
  background: linear-gradient(180deg, #7c3fb3 0%, #5b288e 100%) !important;
  border-color: #451b70 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(91, 40, 142, 0.35) !important;
}

.d2-atlas-metrics {
  display: flex;
  gap: 14px;
}

.d2-metric-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: #fcf7eb;
  border: 1.5px solid #c5af8a;
  border-radius: 4px;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.d2-metric-chip .mc-lbl {
  color: #634b35;
  font-weight: 700;
}

.d2-metric-chip .mc-val {
  color: #221308;
  font-weight: 800;
}

.d2-metric-chip .mc-val.gold { color: #824508; font-weight: 800; }
.d2-metric-chip .mc-val.grey { color: #634b35; }

.d2-quick-toggles {
  display: flex;
  align-items: center;
  gap: 8px;
}

.d2-chip-btn {
  background: #f4ecda;
  border: 1.5px solid #b8955a;
  border-radius: 3px;
  color: #3b2512;
  font-size: 12.5px;
  font-weight: 800;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.d2-chip-btn:hover {
  background: #fdfaf2;
  border-color: #7c4712;
  color: #1a0f05;
}

.d2-chip-btn.active {
  background: #854e18;
  border-color: #5c350e;
  color: #fff6e4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.d2-center-btn {
  background: linear-gradient(180deg, #d8bc88 0%, #b89255 100%);
  border: 1.5px solid #825824;
  border-radius: 3px;
  color: #261608;
  font-size: 12.5px;
  font-weight: 800;
  padding: 5px 14px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
}

.d2-center-btn:hover {
  background: linear-gradient(180deg, #e4ca96 0%, #c49e62 100%);
  border-color: #633f11;
  color: #120902;
}

/* Panoramic Viewport */
.map-d2-viewport {
  position: relative;
  width: 100%;
  height: 640px;
  border: 2px solid #845e2a;
  border-radius: 4px;
  overflow: hidden;
  background: #2a3c1c;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.25);
}

.d2-canvas {
  width: 100%;
  height: 100%;
}

.d2-river {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.d2-fog {
  height: 80px;
}

.d2-pins .node-pin {
  z-index: 10;
}

/* Floating Bottom-Right Drawer (Target Inspection in Design 2) */
.d2-floating-drawer {
  position: absolute;
  bottom: 82px;
  right: 18px;
  width: 520px;
  background: #eee3c8;
  border: 2px solid #845e2a;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 40;
  color: #2a1b10;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.d2-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 2px solid #a37c3e;
  background: #e4d3b0;
}

.d2-dh-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.d2-target-ico {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}

.d2-target-ico img,
.d2-target-ico .d2-target-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  border: 1.5px solid #845e2a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  display: block;
}

.d2-dh-type {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #704414;
  letter-spacing: 0.8px;
}

.d2-dh-title {
  margin: 2px 0 3px;
  font-size: 19px;
  font-weight: 800;
  color: #221308;
  font-family: var(--font-primary);
}

.d2-dh-coords {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #5c432c;
}

.d2-dh-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.d2-drawer-star-btn {
  background: rgba(84, 53, 21, 0.08);
  border: 1.5px solid #a37c3e;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.d2-drawer-star-btn:hover {
  background: rgba(220, 160, 45, 0.2);
  border-color: #c98a1a;
  transform: scale(1.08);
}

.d2-drawer-star-btn .d2-star-icon {
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
  transition: transform 0.25s ease;
}

.d2-drawer-star-btn.active {
  background: linear-gradient(180deg, rgba(255, 230, 140, 0.3) 0%, rgba(195, 130, 20, 0.2) 100%);
  border-color: #d49826;
  box-shadow: 0 0 10px rgba(230, 170, 40, 0.45);
}

.d2-drawer-star-btn.active:hover {
  background: linear-gradient(180deg, rgba(255, 230, 140, 0.4) 0%, rgba(195, 130, 20, 0.3) 100%);
  border-color: #f5c742;
}

.d2-drawer-close {
  background: none;
  border: none;
  color: #634b35;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

.d2-drawer-close:hover {
  color: #221308;
}

.d2-drawer-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #eee3c8;
}

.d2-approx-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fbf6ec;
  padding: 10px 14px;
  border: 1.5px solid #cbb692;
  border-radius: 4px;
}

.d2-approx-item .d2-ai-lbl {
  display: block;
  font-size: 11.5px;
  color: #6d5137;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.d2-approx-item .d2-ai-val {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #221308;
  margin-top: 3px;
}

.d2-approx-item .d2-ai-val.gold { color: #824508; font-weight: 800; }

.d2-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.d2-scout-stepper-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.d2-scout-lbl {
  font-size: 12.5px;
  font-weight: 800;
  color: #2a1b10;
}

.train-stepper.mini {
  height: 28px;
}

.train-stepper.mini .step-btn {
  width: 26px;
  height: 26px;
  font-size: 14px;
}

.train-stepper.mini .step-input {
  width: 34px;
  height: 26px;
  font-size: 13px;
  font-weight: 800;
}

.btn-royal-scout.mini,
.btn-royal-muster-attack.mini {
  padding: 8px 14px;
  font-size: 12.5px;
  flex: 1;
  white-space: nowrap;
}

.d2-attack-row {
  display: flex;
  width: 100%;
}

.btn-royal-muster-attack.mini.full {
  width: 100%;
  justify-content: center;
}

/* Bottom Docked Expedition Toolbar */
.map-d2-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #e8d9ba;
  border-top: 2px solid #a37c3e;
  display: flex;
  flex-direction: column;
  z-index: 35;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.15);
  color: #2a1b10;
}

.d2-bottom-row {
  display: flex;
  align-items: center;
  padding: 6px 18px;
  gap: 12px;
}

.d2-bottom-row-marches {
  background: rgba(253, 248, 238, 0.65);
  border-bottom: 1px solid #d5c19e;
  min-height: 38px;
}

.d2-bottom-row-legend {
  background: #e3d2af;
  min-height: 30px;
  padding: 5px 18px;
}

.d2-expeditions-track {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.d2-track-badge {
  font-size: 12.5px;
  font-weight: 900;
  color: #5c3b12;
  letter-spacing: 0.8px;
  flex-shrink: 0;
}

.d2-march-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px;
  background: #fbf6ec;
  border: 1.5px solid #bba27a;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
}

.d2-march-chip .mc-desc {
  color: #2a1b10;
}

.d2-march-chip .mc-eta {
  color: #7c4712;
  font-weight: 800;
}

.d2-march-chip.warning {
  border-color: #a3382c;
  background: #fde8e5;
}

.d2-march-chip.warning .mc-eta {
  color: #8c1a0e;
}

.d2-legend-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: #4a3420;
}

.d2-legend-inline span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}





/* ==========================================================================
   SMELTER & FOUNDRY SCREEN (MASTER CRAFTSMAN'S LEDGER - LIGHT PARCHMENT THEME)
   ========================================================================== */
.smelter-window,
.workshop-window {
  width: 1340px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--parchment-base);
  color: var(--parchment-text);
}

/* Smelter Shared Stockpile Strip (Light Parchment Theme - Strict Equal 5-Column Grid) */
.smelter-stockpile-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  background: #e8d9ba;
  border-bottom: 2px solid #a37c3e;
  padding: 12px 22px;
  gap: 14px;
}

.s-stock-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fcf7eb;
  border: 1.5px solid #c5af8a;
  border-radius: 4px;
  padding: 8px 14px;
  min-width: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.s-stock-item.highlight-armory {
  border-color: #a37c3e;
  background: #fdf5e2;
  box-shadow: 0 1px 4px rgba(163, 124, 62, 0.2);
}

.s-stock-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.s-stock-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.s-stock-info {
  display: flex;
  flex-direction: column;
}

.s-stock-lbl {
  font-size: 12.5px;
  font-weight: 700;
  color: #634b35;
}

.s-stock-val {
  font-size: 16px;
  font-weight: 800;
  color: #221308;
}

.s-stock-val.gold {
  color: #824508;
  font-weight: 800;
}

.s-rate-badge.positive {
  font-size: 12px;
  font-weight: 700;
  color: #165b12;
  background: #def0c9;
  border: 1px solid #85ba64;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: auto;
}

.s-stock-sub {
  font-size: 12px;
  font-weight: 700;
  color: #6d4e2a;
  margin-left: auto;
}

.smelter-window-body {
  padding: 20px 24px;
  background: #eee3c8;
  color: #2a1b10;
}

/* Master Craftsman's Ledger (Split-Pane Folio) */
.d2-folio-layout {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 20px;
}

/* Left Column: Master Pattern Catalog */
.d2-catalog-pane {
  background: #e8d9ba;
  border: 2px solid #a37c3e;
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.catalog-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #25140b;
  color: #ffdf85;
  border-radius: 3px;
  border-bottom: 1px solid #ab8240;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.catalog-tabs {
  display: flex;
  gap: 6px;
}

.c-tab {
  background: #f4ecda;
  border: 1px solid #a37c3e;
  border-radius: 3px;
  color: #4a3018;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.c-tab:hover {
  background: #fff6e4;
  border-color: #7b4a12;
}

.c-tab.active {
  background: #854e18;
  border-color: #dfb155;
  color: #fff4dd;
}

.catalog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 2px;
}

.catalog-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f4ecda;
  border: 1.5px solid #c9b082;
  border-radius: 4px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.catalog-item:hover {
  background: #fdf8ee;
  border-color: #8c5d26;
  transform: translateX(2px);
}

.catalog-item.active {
  border-color: #a37c3e;
  border-left: 5px solid #ab751f;
  background: linear-gradient(90deg, #dfcb9f 0%, #f7efe0 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.cat-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cat-ico {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 4px;
  background: radial-gradient(circle at 35% 35%, #2a170a 0%, #130802 100%);
  border: 1.5px solid #8f652e;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.cat-ico svg {
  width: 100%;
  height: 100%;
  display: block;
  padding: 3px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.cat-ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bp-icon {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 4px;
  background: radial-gradient(circle at 35% 35%, #2a170a 0%, #130802 100%);
  border: 2px solid #ab8240;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

.bp-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  padding: 5px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}

.bp-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cat-name {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: #221308;
}

.cat-sub {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6d4e2a;
  margin-top: 2px;
}

.cat-item-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.cost-badge {
  font-size: 12px;
  font-weight: 700;
  color: #432b13;
  background: #e5d6b8;
  border: 1px solid #c5af8a;
  padding: 2px 8px;
  border-radius: 3px;
}

.cost-badge.gold {
  background: #ffecb8;
  border-color: #cca14e;
  color: #724209;
}

.afford-badge.green {
  font-size: 12px;
  font-weight: 800;
  color: #165b12;
  background: #def0c9;
  border: 1px solid #85ba64;
  padding: 2px 8px;
  border-radius: 3px;
}

.cat-divider {
  font-size: 12.5px;
  font-weight: 800;
  color: #8f4c0a;
  letter-spacing: 0.6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1.5px dashed #a37c3e;
}

/* Right Column: Workstation Blueprint Inspector */
.d2-inspector-pane {
  background: #fbf5e6;
  border: 2px solid #a37c3e;
  border-radius: 4px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.blueprint-header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #ab8240;
  padding-bottom: 14px;
}

.bp-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bp-icon {
  font-size: 28px;
}

.bp-name {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #221308;
  letter-spacing: 0.5px;
}

.bp-sub {
  display: block;
  font-size: 13.5px;
  color: #6d4e2a;
  margin-top: 3px;
}

.bp-badge.gold {
  font-size: 12.5px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 3px;
  background: #f7e6bc;
  border: 1.5px solid #a6792e;
  color: #52350c;
  letter-spacing: 0.5px;
}

.bp-lore-box {
  background: #f3e8d0;
  border: 1px solid #d5be94;
  border-left: 4px solid #ab751f;
  border-radius: 3px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bp-lore-text {
  font-size: 13.5px;
  font-style: italic;
  color: #4a3520;
  line-height: 1.55;
}

.bp-stat-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip-stat {
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 3px;
  background: #e8d7b3;
  border: 1px solid #ab8240;
  color: #3b2410;
}

/* Formula Consumption Ledger Table */
.bp-ledger-table {
  display: flex;
  flex-direction: column;
  background: #fffdf8;
  border: 2px solid #ab8240;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.bp-ledger-table .ledger-thead {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1.2fr;
  padding: 10px 14px;
  background: #25140b;
  font-size: 12.5px;
  font-weight: 800;
  color: #ffdf85;
  border-bottom: 2px solid #ab8240;
  letter-spacing: 0.5px;
}

.bp-ledger-table .ledger-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1.2fr;
  padding: 11px 14px;
  font-size: 13.5px;
  border-bottom: 1px solid #dec9a5;
  color: #2a1b10;
  background: #fcf8ee;
  align-items: center;
}

.bp-ledger-table .ledger-row:nth-child(even) {
  background: #f6eedb;
}

.bp-ledger-table .ledger-row:last-child {
  border-bottom: none;
}

.bp-ledger-table .bold {
  font-weight: 700;
  color: #1e1106;
  font-size: 13.5px;
}

.bp-ledger-table .bold.green {
  color: #165b12;
  font-weight: 800;
  font-size: 14px;
}

.bp-ledger-table .bold.red {
  color: #c92a2a;
  font-weight: 800;
  font-size: 14px;
}

/* Batch Production Controls */
.bp-batch-controller {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #f4ecda;
  border: 2px solid #ab8240;
  border-radius: 4px;
  padding: 18px 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Active Forge & Smelting Queue */
.workshop-queue-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #25140b;
  border: 2px solid #ab8240;
  border-radius: 4px;
  padding: 14px 18px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.12);
}

.workshop-queue-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #ffd875;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(171, 130, 64, 0.4);
  padding-bottom: 6px;
}

.w-queue-badge {
  font-size: 10.5px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 216, 117, 0.35);
  color: #ffaa6a;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.workshop-queue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
}

.w-queue-empty {
  font-size: 12.5px;
  font-style: italic;
  color: #a88c75;
  text-align: center;
  padding: 10px 4px;
}

.w-queue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(171, 130, 64, 0.4);
  border-radius: 4px;
  padding: 8px 10px;
}

.w-queue-slot-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px dashed rgba(171, 130, 64, 0.3);
  border-radius: 4px;
  padding: 8px 10px;
  color: #8c735d;
  font-size: 11.5px;
  letter-spacing: 0.5px;
}

.w-queue-slot-empty .w-slot-ico {
  font-size: 16px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed rgba(171, 130, 64, 0.25);
  border-radius: 3px;
  opacity: 0.6;
}

.w-queue-ico {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 3px;
  border: 1px solid #ffd875;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  object-fit: cover;
  display: block;
}

.w-queue-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.w-queue-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}

.w-queue-title {
  color: #f7ede2;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.w-queue-timer {
  color: #ffd875;
  font-weight: 800;
  font-family: monospace;
  font-size: 12.5px;
}

.w-queue-bar {
  width: 100%;
  height: 7px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 216, 117, 0.2);
}

.w-queue-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff781e 0%, #ffd875 100%);
  border-radius: 2px;
  transition: width 0.3s ease;
  box-shadow: 0 0 6px rgba(255, 120, 30, 0.6);
}

.batch-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  color: #2b1a0e;
}

.batch-count-display strong {
  font-size: 20px;
  color: #824508;
  font-weight: 800;
}

.batch-slider {
  width: 100%;
  accent-color: #854e18;
  cursor: pointer;
  height: 8px;
}

.batch-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #5c4026;
  font-weight: 600;
}

.batch-meta-row strong {
  color: #221308;
  font-weight: 800;
}

.batch-action-btns {
  display: flex;
  gap: 12px;
}

.btn-d2-forge {
  flex: 2;
  background: linear-gradient(180deg, #99551a 0%, #643109 100%);
  border: 1.5px solid #dfb155;
  border-radius: 4px;
  color: #fff8e7;
  font-size: 14.5px;
  font-weight: 800;
  padding: 12px 20px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.5px;
  transition: all 0.15s ease;
}

.btn-d2-forge:hover {
  background: linear-gradient(180deg, #b0621e 0%, #7d3d0c 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.btn-d2-max {
  flex: 1;
  background: #e8d7b3;
  border: 1.5px solid #ab8240;
  border-radius: 4px;
  color: #3b2410;
  font-size: 13px;
  font-weight: 800;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-d2-max:hover {
  background: #f2e3c4;
  border-color: #7b4a12;
}

/* Medieval Modal Backdrop & Card */
.medieval-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 4, 1, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.medieval-modal-card {
  width: 580px;
  max-width: 92vw;
  background: linear-gradient(180deg, #2a1608 0%, #150903 100%);
  border: 2px solid #8e622b;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(223, 177, 85, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.medieval-modal-card .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, #3d210b 0%, #251205 100%);
  border-bottom: 2px solid #573917;
  padding: 14px 22px;
}

.medieval-modal-card .modal-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffdf85;
  letter-spacing: 0.8px;
}

.btn-close-modal {
  background: none;
  border: none;
  color: #c9b197;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  padding: 4px 8px;
}

.btn-close-modal:hover {
  color: #ffdf85;
}

.medieval-modal-card .modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #e5d3bc;
}

.modal-desc {
  margin: 0;
  font-size: 13.5px;
  color: #d1bda6;
  line-height: 1.5;
}

.breeding-options-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.breeding-option-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(18, 9, 3, 0.8);
  border: 1.5px solid #4a2f14;
  border-radius: 5px;
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.breeding-option-card:hover {
  background: rgba(35, 18, 6, 0.9);
  border-color: #8c5d26;
}

.breeding-option-card.selected {
  border-color: #dfb155;
  background: rgba(45, 23, 7, 0.95);
  box-shadow: inset 0 0 12px rgba(223, 177, 85, 0.2);
}

.breeding-option-card input[type="radio"] {
  accent-color: #dfb155;
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.opt-card-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.opt-icon {
  font-size: 34px;
}

.opt-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.opt-name {
  font-size: 15px;
  font-weight: 800;
  color: #ffdf85;
}

.opt-sub {
  font-size: 12.5px;
  color: #bfa78f;
  line-height: 1.35;
}

.opt-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #dfcbb5;
  margin-top: 6px;
}

.opt-tag {
  font-size: 12.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  border: 1px solid #543715;
  color: #d8c3ab;
}

.opt-tag.gold {
  background: rgba(223, 177, 85, 0.2);
  border-color: #c79737;
  color: #ffd873;
}

.modal-info-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(20, 10, 4, 0.85);
  border-left: 3px solid #dfb155;
  border-radius: 3px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: #d1baa0;
  line-height: 1.5;
}

.modal-info-box .info-ico {
  font-size: 18px;
  line-height: 1;
}

.modal-info-box strong {
  color: #ffd873;
}

.medieval-modal-card .modal-footer {
  background: #170b03;
  border-top: 1px solid #44280f;
  padding: 14px 24px;
  display: flex;
  justify-content: flex-end;
}

.btn-modal-action {
  background: linear-gradient(180deg, #7c4013 0%, #4a2105 100%);
  border: 1.5px solid #dfb155;
  border-radius: 4px;
  color: #fff2c4;
  font-size: 13.5px;
  font-weight: 800;
  padding: 10px 22px;
  cursor: pointer;
  letter-spacing: 0.6px;
  transition: all 0.2s ease;
}

.btn-modal-action:hover {
  background: linear-gradient(180deg, #994e17 0%, #5e2906 100%);
  box-shadow: 0 0 12px rgba(223, 177, 85, 0.4);
}


/* ==========================================================================
   TRADE & MARKETPLACE SCREEN (IDEA 1A: ROYAL EXCHANGE LEDGER - LIGHT PARCHMENT)
   ========================================================================== */
#window-trade {
  --trade-card-bg: #fbf5ec;
  --trade-pan-bg: #ffffff;
  --trade-scales-bg: #f6ede2;
  --trade-border-color: #c2a677;
  --trade-inner-border: #d4be94;
  --trade-pan-border: #c5ad82;
  --trade-input-bg: #ffffff;
}

.trade-window {
  width: 1340px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.trade-window-body {
  padding: 20px 24px;
  background: #eee3c8;
  background-image: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.03) 100%);
  color: #2c1a0e;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
}

/* Global Logistics Strip */
.trade-logistics-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--trade-card-bg, #fbf5ec);
  border: 2px solid var(--trade-border-color, #c2a677);
  border-radius: 4px;
  padding: 12px 20px;
  gap: 16px;
  box-shadow: 0 3px 8px rgba(80, 50, 20, 0.08);
}

.t-log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.t-log-ico {
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.t-log-ico img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(80, 50, 20, 0.25));
}

.t-log-title {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #5a3a1b;
  letter-spacing: 0.5px;
}

.t-log-val {
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: #2e1b0c;
}

.t-log-val.green {
  color: #256619;
}

.t-log-val.gold {
  color: #9c6807;
}

.t-log-sub {
  display: block;
  font-size: 12px;
  color: #7a5832;
}

/* Channel Switcher Tabs */
.t1a-channel-tabs {
  display: flex;
  gap: 10px;
}

.t1a-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #f5eedc;
  border: 2px solid #c2a677;
  border-radius: 4px;
  padding: 12px 16px;
  color: #4a2c14;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(80, 50, 20, 0.05);
  line-height: 1;
}

.t1a-tab-btn .tab-ico {
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0;
  filter: drop-shadow(0 1px 2px rgba(80, 50, 20, 0.15));
}

.t1a-tab-btn .tab-ico svg {
  width: 22px;
  height: 22px;
  display: block;
}

.t1a-tab-btn span:not(.tab-ico) {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.t1a-tab-btn:hover {
  background: #fffdfa;
  border-color: #8c5d26;
  color: #2e1b0c;
}

.t1a-tab-btn.active {
  background: var(--trade-card-bg, #fbf5ec);
  border-color: #8c5d26;
  color: #2e1b0c;
  box-shadow: inset 0 3px 0 #9e281b, 0 3px 8px rgba(90, 58, 27, 0.15);
}

.tab-badge-quota {
  font-size: 12.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 3px;
  background: #fbf1d8;
  border: 1px solid #d4a737;
  color: #7c5418;
}

.tab-badge-p2p {
  font-size: 12.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 3px;
  background: #eaf5e4;
  border: 1px solid #5fb644;
  color: #1e6311;
}

.tab-badge-log {
  font-size: 12.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 3px;
  background: #ede6d8;
  border: 1px solid #bba17f;
  color: #553a1f;
}

/* PANE 1: Crown NPC Barter Card */
.npc-barter-card {
  background: var(--trade-card-bg, #fbf5ec);
  border: 2px solid var(--trade-border-color, #c2a677);
  border-radius: 4px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 3px 8px rgba(80, 50, 20, 0.08);
}

.barter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #e5d3b6;
  padding-bottom: 14px;
}

.bh-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bh-ico {
  font-size: 32px;
}

.bh-main {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  color: #3d2109;
  letter-spacing: 0.8px;
}

.bh-sub {
  display: block;
  font-size: 13px;
  color: #6e4e2a;
}

.daily-quota-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 300px;
}

.quota-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: #5a3a1b;
}

.quota-meta strong {
  color: #9e281b;
}

.quota-track {
  height: 10px;
  background: #e2d2ba;
  border: 1px solid #b89f7b;
  border-radius: 3px;
  overflow: hidden;
}

.quota-fill {
  height: 100%;
  background: linear-gradient(90deg, #9e281b, #d46522);
}

.quota-note {
  font-size: 12.5px;
  color: #7a5832;
}

/* Scales Layout */
.scales-barter-layout {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  align-items: center;
  gap: 18px;
  background: var(--trade-scales-bg, #f6ede2);
  border: 1.5px solid var(--trade-inner-border, #d4be94);
  border-radius: 4px;
  padding: 20px;
}

.scale-pan-card {
  background: var(--trade-pan-bg, #ffffff);
  border: 1.5px solid var(--trade-pan-border, #c5ad82);
  border-radius: 4px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(80, 50, 20, 0.05);
}

.pan-title {
  font-size: 13px;
  font-weight: 800;
  color: #5a3a1b;
  letter-spacing: 0.5px;
}

.pan-selector-row {
  display: flex;
  gap: 10px;
}

.trade-select {
  flex: 1;
  background: var(--trade-input-bg, #ffffff);
  border: 1.5px solid var(--trade-pan-border, #c5ad82);
  color: #2c1a0e;
  padding: 9px 12px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  outline: none;
}

.trade-num-input {
  width: 90px;
  background: var(--trade-input-bg, #ffffff);
  border: 1.5px solid var(--trade-pan-border, #c5ad82);
  color: #2c1a0e;
  padding: 9px;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  outline: none;
}

.pan-result-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef7e6;
  border: 1.5px solid #7cb359;
  border-radius: 3px;
  padding: 0 16px;
  font-size: 14.5px;
  font-weight: 800;
  color: #205713;
}

.pan-result-badge strong {
  color: #1e6b0f;
  font-size: 18px;
  margin-right: 6px;
}

.pan-stock-info {
  font-size: 12.5px;
  color: #6e4e2a;
}

.pan-stock-info.trader-advantage {
  color: #9e281b;
  font-weight: 700;
}

.scale-center-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.scale-brass-ico {
  font-size: 44px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(80, 50, 20, 0.25));
}

.scale-rate-tag {
  font-size: 12.5px;
  font-weight: 900;
  color: #8c4213;
  letter-spacing: 0.5px;
}

.trader-perk-glow {
  font-size: 12px;
  font-weight: 800;
  color: #1e6b0f;
}

.barter-action-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
}

.barter-burn-note {
  font-size: 13px;
  color: #6e4e2a;
}

.barter-burn-note strong {
  color: #3d2109;
}

.btn-execute-barter {
  background: linear-gradient(180deg, #8a4816 0%, #5e2906 100%);
  border: 1.5px solid #dfb155;
  border-radius: 3px;
  color: #fff9ea;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 28px;
  cursor: pointer;
  letter-spacing: 0.8px;
  box-shadow: 0 2px 6px rgba(80, 40, 10, 0.25);
  transition: all 0.2s ease;
}

.btn-execute-barter:hover {
  background: linear-gradient(180deg, #a45318 0%, #6e3007 100%);
  box-shadow: 0 4px 10px rgba(80, 40, 10, 0.35);
}

/* ==========================================================================
   PANE 2: STOCK EXCHANGE SPLIT
   ========================================================================== */
.stock-exchange-split {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 18px;
}

.se-builder-card,
.se-orderbook-card {
  background: var(--trade-card-bg, #fbf5ec);
  border: 2px solid var(--trade-border-color, #c2a677);
  border-radius: 4px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 3px 8px rgba(80, 50, 20, 0.08);
}

.se-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid #e5d3b6;
  padding-bottom: 12px;
}

.se-ico {
  font-size: 26px;
  line-height: 1;
}

.se-title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #3d2109;
  letter-spacing: 0.5px;
}

.se-sub {
  display: block;
  font-size: 12.5px;
  color: #6e4e2a;
}

.buyer-fee-tag {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 3px;
  background: #fbf1d8;
  border: 1px solid #d4a737;
  color: #7c5418;
}

.se-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.se-lbl {
  font-size: 13px;
  font-weight: 800;
  color: #5a3a1b;
  letter-spacing: 0.4px;
}

.se-input-row {
  display: flex;
  gap: 10px;
}

.se-select {
  flex: 1;
  background: var(--trade-input-bg, #ffffff);
  border: 1.5px solid var(--trade-pan-border, #c5ad82);
  color: #2c1a0e;
  padding: 8px 12px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  outline: none;
}

.se-num-input {
  width: 90px;
  background: var(--trade-input-bg, #ffffff);
  border: 1.5px solid var(--trade-pan-border, #c5ad82);
  color: #2c1a0e;
  padding: 8px;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  outline: none;
}

.se-hint {
  font-size: 12px;
  color: #7a5832;
}

/* Multi-Fork Tree Builder */
.se-fork-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.multi-fork-builder {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--trade-scales-bg, #f6ede2);
  border: 1.5px solid var(--trade-inner-border, #d4be94);
  border-radius: 4px;
  padding: 12px;
}

.multi-fork-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-add-fork {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fdfaf2;
  border: 1.5px dashed #bda376;
  border-radius: 3px;
  color: #5a3a1b;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-add-fork:hover {
  background: #ffffff;
  border-color: #8c5d26;
  color: #2c1a0e;
}

.fork-branch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--trade-pan-bg, #ffffff);
  border: 1.5px solid var(--trade-pan-border, #c5ad82);
  border-radius: 3px;
  padding: 8px 10px;
  box-shadow: 0 1px 3px rgba(80, 50, 20, 0.05);
}

.fork-branch-tag {
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 2px;
  background: #ede3d1;
  color: #4a2c14;
  white-space: nowrap;
}

.fork-branch-tag.gold {
  background: #faeecf;
  color: #82540d;
}

.fork-branch-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #2c1a0e;
  flex: 1;
}

.se-small-input {
  width: 65px;
  background: var(--trade-input-bg, #ffffff);
  border: 1.5px solid var(--trade-pan-border, #c5ad82);
  color: #2c1a0e;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  padding: 5px;
  border-radius: 3px;
  outline: none;
}

.se-small-select {
  flex: 1;
  background: var(--trade-input-bg, #ffffff);
  border: 1.5px solid var(--trade-pan-border, #c5ad82);
  color: #2c1a0e;
  font-size: 13.5px;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 3px;
  outline: none;
}

.btn-del-fork {
  background: #fbeae8;
  border: 1px solid #d97871;
  color: #a82318;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 800;
  padding: 5px 9px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.btn-del-fork:hover {
  background: #f7d4d1;
  border-color: #9e281b;
}

.fork-explainer {
  font-size: 12.5px;
  color: #6e4e2a;
  font-style: italic;
  line-height: 1.4;
}

.se-logistics-preview {
  background: var(--trade-scales-bg, #f6ede2);
  border: 1.5px solid var(--trade-inner-border, #d4be94);
  border-radius: 4px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.lp-row {
  display: flex;
  justify-content: space-between;
  color: #5a3a1b;
}

.lp-row strong {
  color: #2c1a0e;
}

.lp-row strong.green {
  color: #256619;
}

.btn-post-se {
  background: linear-gradient(180deg, #8a4816 0%, #5e2906 100%);
  border: 1.5px solid #dfb155;
  border-radius: 3px;
  color: #fff9ea;
  font-size: 14px;
  font-weight: 800;
  padding: 12px;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(80, 40, 10, 0.25);
  transition: all 0.2s ease;
}

.btn-post-se:hover {
  background: linear-gradient(180deg, #a45318 0%, #6e3007 100%);
  box-shadow: 0 4px 10px rgba(80, 40, 10, 0.35);
}

/* Real-time Filter Bar */
.se-filter-bar {
  display: flex;
  gap: 12px;
  background: var(--trade-scales-bg, #f6ede2);
  border: 1.5px solid var(--trade-inner-border, #d4be94);
  border-radius: 4px;
  padding: 10px 14px;
  align-items: center;
  flex-wrap: wrap;
}

.se-filter-bar .filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.se-filter-bar .filter-lbl {
  font-size: 12.5px;
  font-weight: 800;
  color: #5a3a1b;
  white-space: nowrap;
}

.se-filter-bar .filter-select {
  font-size: 13.5px;
  font-weight: 700;
  background: var(--trade-input-bg, #ffffff);
  border: 1.5px solid var(--trade-pan-border, #c5ad82);
  border-radius: 3px;
  padding: 6px 10px;
  color: #2c1a0e;
  outline: none;
}

.se-toast {
  background: #eef7e6;
  border: 1.5px solid #52a329;
  color: #1b590e;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 4px;
  margin-bottom: 4px;
  box-shadow: 0 2px 6px rgba(30, 80, 10, 0.1);
  animation: fadeInToast 0.3s ease;
}

@keyframes fadeInToast {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Order Book List & Individual Order Cards */
.orderbook-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}

.ob-order-card {
  background: var(--trade-pan-bg, #ffffff);
  border: 1.5px solid var(--trade-pan-border, #d4be94);
  border-radius: 4px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 5px rgba(70, 45, 15, 0.05);
  transition: all 0.2s ease;
}

.ob-order-card:hover {
  border-color: #9e281b;
  box-shadow: 0 4px 12px rgba(70, 45, 15, 0.12);
}

.ob-order-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ob-seller-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ob-seller-name {
  font-size: 14px;
  font-weight: 900;
  color: #3d2109;
}

.ob-dist {
  font-size: 12px;
  color: #7a5832;
}

.multi-choice-tag {
  font-size: 12px;
  font-weight: 800;
  background: #fbf1d8;
  border: 1px solid #d4a737;
  color: #7c5418;
  padding: 3px 8px;
  border-radius: 3px;
}

/* Trade Exchange Row */
.ob-trade-exchange-row {
  display: grid;
  grid-template-columns: 1.2fr 30px 1.2fr 1.5fr;
  align-items: center;
  gap: 12px;
  background: #faf6ed;
  border: 1px solid #e2d1b5;
  border-radius: 4px;
  padding: 10px 14px;
}

.ob-trade-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trade-col-lbl {
  font-size: 12px;
  font-weight: 800;
  color: #7a5832;
  letter-spacing: 0.4px;
}

.trade-col-val {
  font-size: 15px;
  font-weight: 800;
  color: #2c1a0e;
}

.trade-col-val.highlight {
  color: #8a4816;
  font-size: 16px;
}

.ob-arrow-divider {
  font-size: 18px;
  color: #9e6c28;
  text-align: center;
  line-height: 1;
}

.fee-lbl {
  font-size: 12px;
  color: #96744e;
}

/* Unit Price Highlight Container */
.ob-price-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.price-lbl {
  font-size: 12px;
  font-weight: 800;
  color: #5a3a1b;
  letter-spacing: 0.5px;
}

.ob-unit-price-pill {
  font-size: 15px;
  font-weight: 700;
  color: #2c1a0e;
  text-align: right;
  white-space: nowrap;
}

.ob-unit-price-pill strong {
  font-size: 16px;
  font-weight: 800;
  color: #2c1a0e;
}

.ob-order-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ob-logistics-tag {
  font-size: 12.5px;
  color: #6e4e2a;
}

.btn-accept-offer {
  background: linear-gradient(180deg, #2b771e 0%, #174b0f 100%);
  border: 1.5px solid #54b836;
  border-radius: 3px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 800;
  padding: 8px 18px;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(30, 80, 15, 0.25);
  transition: all 0.15s ease;
}

.btn-accept-offer:hover {
  background: linear-gradient(180deg, #369125 0%, #1f5f14 100%);
  box-shadow: 0 3px 8px rgba(30, 80, 15, 0.35);
}

/* ==========================================================================
   PANE 3: LOGISTICS PADDOCK CARD
   ========================================================================== */
.logistics-paddock-card {
  background: var(--trade-card-bg, #fbf5ec);
  border: 2px solid var(--trade-border-color, #c2a677);
  border-radius: 4px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 3px 8px rgba(80, 50, 20, 0.08);
}

.lp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #e5d3b6;
  padding-bottom: 12px;
}

.lp-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lp-ico {
  font-size: 30px;
  line-height: 1;
}

.lp-title {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  color: #3d2109;
}

.lp-sub {
  display: block;
  font-size: 13px;
  color: #6e4e2a;
}

.btn-open-stables-modal {
  background: #f3e8d2;
  border: 1.5px solid #8c5d26;
  border-radius: 3px;
  color: #4a2c14;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-open-stables-modal:hover {
  background: #fff8eb;
  border-color: #7a4e15;
}

.logistics-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.lm-box {
  background: #f6ede2;
  border: 1.5px solid #d4be94;
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 1px 4px rgba(80, 50, 20, 0.05);
}

.lm-val {
  font-size: 28px;
  font-weight: 900;
  color: #2c1a0e;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.lm-rate {
  font-size: 14px;
  font-weight: 700;
  color: #256619;
}

.lm-val.green {
  color: #256619;
}

.lm-val.amber {
  color: #b85912;
}

.lm-lbl {
  font-size: 13px;
  font-weight: 800;
  color: #4a2c14;
  margin-top: 4px;
}

.lm-sub {
  font-size: 12px;
  color: #7a5832;
  margin-top: 2px;
}

.requisition-rule-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fbf5e6;
  border-left: 4px solid #b8860b;
  border-radius: 2px;
  padding: 14px 18px;
  font-size: 13px;
  color: #4a2c14;
  line-height: 1.5;
}

.r-ico {
  font-size: 22px;
  line-height: 1;
}

.requisition-rule-banner strong {
  color: #2e1b0c;
  display: block;
  margin-bottom: 2px;
}

/* ==========================================================================
   PARTIAL PURCHASE CONTROLS (IDEA 1: INLINE STEPPER & INTEGER STEPPING)
   ========================================================================== */
.ob-partial-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #faf6ed;
  border: 1.5px solid #d9c5a0;
  border-radius: 4px;
  padding: 8px 14px;
  gap: 12px;
  flex-wrap: wrap;
}

.ob-stepper-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ob-stepper-lbl {
  font-size: 12px;
  font-weight: 800;
  color: #5a3a1b;
  letter-spacing: 0.5px;
}

.ob-stepper-control {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #bda376;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(80, 50, 20, 0.08);
  overflow: hidden;
  height: 32px;
  box-sizing: border-box;
}

.step-ctrl-btn {
  background: #f4ebd9;
  border: none;
  color: #4a2c14;
  font-size: 16px;
  font-weight: 900;
  width: 32px;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  user-select: none;
  line-height: 1;
  padding: 0;
  box-sizing: border-box;
}

.step-ctrl-btn:hover {
  background: #ebd8bd;
  color: #2c1a0e;
}

.step-ctrl-btn:active {
  background: #dfc8a7;
}

/* Custom styled numbered field - completely hiding default browser spinner arrows */
.ob-step-input {
  width: 76px;
  height: 100%;
  border: none;
  border-left: 1px solid #d9c5a0;
  border-right: 1px solid #d9c5a0;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  color: #2c1a0e;
  outline: none;
  background: #ffffff;
  -moz-appearance: textfield;
  appearance: textfield;
  box-sizing: border-box;
  padding: 0 4px;
}

.ob-step-input::-webkit-outer-spin-button,
.ob-step-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ob-step-input:focus {
  background: #fffdf9;
}

.btn-chip-max {
  background: #f4ebd9;
  border: 1.5px solid #bda376;
  border-radius: 4px;
  height: 32px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 900;
  color: #5a3a1b;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 2px rgba(80, 50, 20, 0.05);
}

.btn-chip-max:hover {
  background: #5a3a1b;
  border-color: #5a3a1b;
  color: #fff8eb;
}

.ob-step-unit-hint {
  font-size: 12px;
  color: #7a5832;
  font-style: italic;
}

.ob-freight-mini {
  font-size: 12.5px;
  color: #5a3a1b;
  font-weight: 700;
}

.ob-bottom-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}

.ob-cost-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  color: #5a3a1b;
}

.ob-cost-summary strong {
  font-size: 16px;
  color: #2c1a0e;
  font-weight: 900;
}

.ob-cost-summary small {
  font-size: 12px;
  color: #8c683b;
}

/* ==========================================================================
   250x250 REALM ATLAS FULL NAVIGATION & ART ENGINE
   ========================================================================== */

/* The Tactical Viewport Containers */
.map-tactical-viewport,
.map-d2-viewport {
  position: relative;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}

.map-tactical-viewport.grabbing,
.map-d2-viewport.grabbing {
  cursor: grabbing;
}

/* The Grand Continental World Layer (Hardware-Accelerated Translation) */
.map-world-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 10000px;
  height: 6000px;
  background-image: url('assets/map_terrain_rich.jpg');
  background-repeat: repeat;
  background-size: 1000px 600px;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: auto;
}

/* Sector Clusters across the Continent */
.map-sector-cluster {
  position: absolute;
  pointer-events: auto;
}

/* Faint Cartographic Grid Lines across the 250x250 Continent */
.map-world-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: 
    linear-gradient(to right, rgba(140, 95, 45, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140, 95, 45, 0.08) 1px, transparent 1px);
  background-size: 40px 24px;
}

/* Animated Tile Selection Reticle */
.map-tile-reticle {
  position: absolute;
  width: 44px;
  height: 28px;
  transform: translate(-50%, -50%);
  border: 2px solid #ffd86b;
  box-shadow: 0 0 14px rgba(255, 216, 107, 0.8), inset 0 0 8px rgba(255, 216, 107, 0.35);
  pointer-events: none;
  z-index: 25;
  border-radius: 3px;
  animation: pulseReticle 2s infinite ease-in-out;
}

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

/* Fog Disabled State (God Mode View) */
.fog-disabled .fog-terra-incognita,
.fog-disabled .fog-active-sight-zone,
.fog-disabled .fog-capital-vision-zone {
  display: none !important;
}

/* D1 Navigation & Jump Bar */
.map-d1-nav-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  row-gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(180deg, #2a1a0c 0%, #180d05 100%);
  border: 1px solid #5a3818;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 140, 0.1);
}

.d1-jump-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jump-lbl {
  font-size: 13.5px;
  font-weight: 900;
  color: #1a0f05;
  letter-spacing: 0.8px;
}

.coord-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #2a1b10;
}

.coord-input {
  width: 54px;
  background: #fdfaf2;
  border: 1.5px solid #b8955a;
  border-radius: 3px;
  color: #2a1b10;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 4px 6px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.coord-input:focus {
  border-color: #7c4712;
  outline: none;
}

.btn-map-jump {
  background: linear-gradient(180deg, #d8bc88 0%, #b89255 100%);
  border: 1.5px solid #825824;
  border-radius: 3px;
  color: #261608;
  font-size: 12.5px;
  font-weight: 800;
  padding: 5px 14px;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
}

.btn-map-jump:hover {
  background: linear-gradient(180deg, #e4ca96 0%, #c49e62 100%);
  border-color: #633f11;
  color: #120902;
}

.d1-bookmarks-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.map-preset-select {
  background: #fdfaf2;
  border: 1.5px solid #b8955a;
  border-radius: 3px;
  color: #2a1b10;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  cursor: pointer;
  min-width: 320px;
  max-width: 440px;
}

.map-preset-select:focus {
  border-color: #7c4712;
  outline: none;
}

.map-fog-btn {
  background: #f4ecda;
  border: 1.5px solid #b8955a;
  border-radius: 3px;
  color: #2a1b10;
  font-size: 12.5px;
  font-weight: 800;
  padding: 5px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.map-fog-btn:hover {
  background: #fdfaf2;
  border-color: #7c4712;
  color: #000;
}

.map-fog-btn.active {
  background: #854e18;
  border-color: #5c350e;
  color: #fff6e4;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Live Tactical Coordinates HUD (Top-Left of Viewport) */
.map-coord-hud {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 20;
  background: rgba(244, 236, 218, 0.96);
  border: 1.5px solid #845e2a;
  border-radius: 6px;
  padding: 8px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #2a1b10;
  user-select: none;
  pointer-events: none;
}

.map-coord-hud .mch-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.map-coord-hud .mch-pin-svg {
  display: block;
}

.map-coord-hud .mch-label {
  font-size: 12.5px;
  font-weight: 900;
  color: #5c3b12;
  letter-spacing: 0.8px;
}

.map-coord-hud .mch-coords {
  font-size: 13.5px;
  font-weight: 900;
  color: #1a0f05;
  letter-spacing: 0.5px;
}

.map-coord-hud .mch-sep {
  color: #8c7356;
}

.map-coord-hud .mch-name {
  font-size: 13px;
  font-weight: 700;
  color: #4a3016;
}

/* Tactile Directional Compass Rose Overlay (Light Parchment Theme) */
.map-compass-nav {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  background: rgba(244, 236, 218, 0.96);
  border: 1.5px solid #845e2a;
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  user-select: none;
}

.compass-label {
  font-size: 12.5px;
  font-weight: 900;
  color: #5c3b12;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.compass-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.compass-mid-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.compass-btn {
  width: 36px;
  height: 32px;
  background: linear-gradient(180deg, #fdfaf2 0%, #ecdcc0 100%);
  border: 1.5px solid #a88147;
  border-radius: 4px;
  color: #2a1b10;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: all 0.12s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.compass-btn span {
  font-size: 11px;
  color: #6b461d;
  font-weight: 800;
  margin-top: 1px;
}

.compass-btn.compass-center {
  width: 36px;
  height: 32px;
  font-size: 16px;
  background: linear-gradient(180deg, #dfc796 0%, #c49e5d 100%);
  border-color: #7d5420;
}

.compass-btn.compass-center span {
  font-size: 9px;
  color: #3b200b;
  font-weight: 900;
  letter-spacing: 0.3px;
  line-height: 1;
  margin-top: 1px;
}

.compass-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f4e6ce 100%);
  border-color: #6d4715;
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.compass-btn:active {
  transform: translateY(1px);
  background: #d9c49d;
}

.compass-keys-hint {
  font-size: 11px;
  font-weight: 700;
  color: #735639;
  letter-spacing: 0.4px;
  margin-top: 2px;
}

/* Minimap Radar Canvas Container (Light Parchment Theme) */
.map-minimap-radar {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 20;
  background: rgba(244, 236, 218, 0.96);
  border: 1.5px solid #845e2a;
  border-radius: 4px;
  padding: 8px 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  user-select: none;
}

.minimap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.minimap-title {
  font-size: 13px;
  font-weight: 900;
  color: #5c3b12;
  letter-spacing: 0.6px;
}

.minimap-hint {
  font-size: 12px;
  color: #634b35;
  font-weight: 800;
}

.minimap-canvas-wrapper {
  border: 1.5px solid #845e2a;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  background: #1b2610;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.minimap-canvas-wrapper canvas {
  display: block;
}

/* Design 2 Adjustments */
.d2-compass {
  top: 18px;
  right: 18px;
}

.d2-minimap {
  bottom: 60px;
  left: 18px;
}

.d2-preset {
  width: 380px;
  max-width: 460px;
}

/* =========================================================================
   BARRACKS ACTIVE TRAINING QUEUE: VANGUARD MUSTER RIBBON (DESIGN 2)
   ========================================================================= */
.barracks-banner-wrap {
  background: linear-gradient(180deg, #2e1a0d 0%, #1a0e06 100%);
  border: 2px solid #8a5a22;
  border-radius: 4px;
  padding: 10px 16px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.15), 0 4px 10px rgba(0, 0, 0, 0.6);
}

.bb-active-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.bb-left-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bb-thumb-box {
  width: 48px;
  height: 48px;
  border: 2px solid #dfb155;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.bb-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.bb-title-stack {
  display: flex;
  flex-direction: column;
}

.bb-sub-label {
  font-size: 11px;
  letter-spacing: 0.8px;
  color: #a88a62;
  font-weight: 700;
}

.bb-unit-head {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

.bb-unit-head strong {
  color: #ffd875;
}

.bb-center-progress {
  flex: 1;
  max-width: 460px;
  min-width: 200px;
}

.bb-pips-row {
  display: flex;
  gap: 6px;
  margin-bottom: 5px;
  align-items: center;
}

.bb-pip {
  flex: 1;
  height: 7px;
  background: #100803;
  border: 1px solid #573a19;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.bb-pip.done {
  background: #78c445;
  border-color: #a4ff87;
  box-shadow: 0 0 4px rgba(120, 196, 69, 0.6);
}

.bb-pip.active-training {
  background: #190d05;
  border-color: #ffe699;
  box-shadow: 0 0 5px rgba(255, 216, 117, 0.7);
}

.bb-pip-inner {
  height: 100%;
  background: linear-gradient(90deg, #d49528, #ffd875);
  transition: width 0.3s ease;
}

.bb-pip-continuous {
  width: 100%;
  height: 7px;
  background: #100803;
  border: 1px solid #573a19;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  position: relative;
}

.bb-pip-cont-done {
  height: 100%;
  background: #78c445;
  box-shadow: 0 0 4px rgba(120, 196, 69, 0.6);
}

.bb-pip-cont-active {
  height: 100%;
  background: linear-gradient(90deg, #d49528, #ffd875);
}

.bb-pip-legend {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #c9b493;
}

.bb-right-timers {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 140px;
}

.bb-batch-timer {
  font-size: 13.5px;
  color: #ffd875;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.bb-batch-timer strong {
  color: #a4ff87;
  font-weight: 800;
}

/* --- FULL UPCOMING MUSTER QUEUE SHELF --- */
.bb-upcoming-shelf {
  border-top: 1px solid #5a3816;
  margin-top: 10px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.bb-shelf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #ba9d7a;
  letter-spacing: 0.6px;
}

.bb-shelf-title {
  font-weight: 800;
  color: #ffd875;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bb-shelf-total-time {
  font-weight: 700;
  color: #cfbe9f;
}

.bb-shelf-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 3px;
}

/* Custom scrollbar for queue list */
.bb-shelf-items::-webkit-scrollbar {
  width: 5px;
}
.bb-shelf-items::-webkit-scrollbar-track {
  background: #140a04;
  border-radius: 3px;
}
.bb-shelf-items::-webkit-scrollbar-thumb {
  background: #5e3b18;
  border-radius: 3px;
}
.bb-shelf-items::-webkit-scrollbar-thumb:hover {
  background: #875727;
}

.bb-queue-card {
  background: linear-gradient(180deg, #1b0e06 0%, #110702 100%);
  border: 1px solid #5a3816;
  border-radius: 4px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.bb-queue-card:hover {
  border-color: #8f602b;
  background: linear-gradient(180deg, #241308 0%, #170a03 100%);
}

.bb-qc-pos {
  font-size: 11px;
  font-weight: 800;
  color: #ffd875;
  background: #2b170a;
  border: 1px solid #73491f;
  border-radius: 3px;
  padding: 2px 6px;
  flex-shrink: 0;
}

.bb-qc-thumb {
  width: 34px;
  height: 34px;
  border: 1.5px solid #a87932;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
}

.bb-qc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.bb-qc-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.bb-qc-title {
  font-size: 12.5px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-qc-title strong {
  color: #ffd875;
}

.bb-qc-timing {
  font-size: 10.5px;
  color: #ba9d7a;
  margin-top: 1px;
  display: flex;
  gap: 6px;
}

.bb-qc-timing strong {
  color: #a4ff87;
}

.bb-qc-badge {
  font-size: 9.5px;
  font-weight: 800;
  color: #e5b967;
  background: rgba(229, 185, 103, 0.12);
  border: 1px solid #7a5422;
  border-radius: 3px;
  padding: 2px 5px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   FEUDAL MAIN LANDING PORTAL & SOVEREIGN AUTHENTICATION SANCTUM
   ========================================================================== */
.landing-portal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 35%, rgba(20, 12, 6, 0.75) 0%, rgba(10, 6, 3, 0.94) 55%, rgba(4, 2, 1, 0.99) 100%),
              url('assets/landscape_clean.jpg') center bottom / cover no-repeat fixed;
  padding: 32px 16px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.landing-portal.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.landing-portal.fade-in {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.landing-backdrop-sheen {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 25%, rgba(212, 167, 83, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.landing-container {
  width: 100%;
  max-width: 860px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 2;
}

#landing-card-auth {
  max-width: 660px;
}

/* Hero Branding Banner */
.landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.landing-hero-logo {
  width: 510px;
  max-width: 88vw;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.96)) drop-shadow(0 0 36px rgba(212, 167, 83, 0.45));
}

.landing-hero-tagline {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #ffdf85;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
}

/* Live Realm Heartbeat Status */
.landing-realm-status-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(18, 10, 5, 0.88);
  border: 1.5px solid #6e4b22;
  border-radius: 20px;
  padding: 5px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 223, 133, 0.15);
  font-size: 12px;
  color: #dfcfab;
  font-weight: 600;
  margin-top: 4px;
}

.status-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 8px #2ecc71;
  animation: pulseBeacon 2s infinite ease-in-out;
}

@keyframes pulseBeacon {
  0% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 4px #2ecc71; }
  50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 12px #2ecc71; }
  100% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 4px #2ecc71; }
}

.status-diamond {
  color: #d4a753;
  font-size: 8px;
}

.status-population {
  color: #ffdf85;
  font-weight: 700;
}

/* Main Sanctum Window Card */
.landing-card {
  width: 100%;
  background: linear-gradient(180deg, #24140a 0%, #130903 100%);
  border: 3px solid #8e622b;
  border-radius: 6px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.92), 0 0 35px rgba(212, 167, 83, 0.22);
  position: relative;
}

.landing-tabs-header {
  display: flex;
  background: linear-gradient(180deg, #180c05 0%, #291509 100%);
  border-bottom: 2px solid #573917;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.landing-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  color: #c9b197;
  font-family: var(--font-primary);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all 0.2s ease;
}

.landing-tab:hover {
  color: #ffdf85;
  background: rgba(255, 223, 133, 0.05);
}

.landing-tab.active {
  color: #ffdf85;
  border-bottom-color: #d4a753;
  background: linear-gradient(180deg, rgba(212, 167, 83, 0.16) 0%, rgba(212, 167, 83, 0.03) 100%);
  text-shadow: 0 0 10px rgba(255, 223, 133, 0.4);
}

.tab-icon,
.btn-feudal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.landing-svg-icon {
  display: block;
}

#landing-realm-time {
  font-variant-numeric: tabular-nums;
  min-width: 78px;
  text-align: center;
}

.landing-card-body {
  padding: 24px 30px 30px;
}

/* Lock Sign In and Create Account panes to exact identical height (zero vertical jump) */
.landing-tabs-stage {
  display: grid;
  grid-template-columns: 1fr;
}

.landing-tabs-stage > .landing-tab-pane {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  transition: opacity 0.16s ease;
}

.landing-tabs-stage > .landing-tab-pane:not(.active) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.landing-tabs-stage > .landing-tab-pane.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.landing-pane-footer {
  margin-top: auto;
  padding-top: 6px;
}

/* Pane Intro */
.pane-lore-intro {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(142, 98, 43, 0.35);
}

.intro-crest img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
}

.pane-title {
  font-size: 17px;
  font-weight: 800;
  color: #ffdf85;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  margin-bottom: 3px;
}

.pane-subtitle {
  font-size: 12.5px;
  color: #c9b197;
  line-height: 1.4;
}

/* Forms & Inputs */
.landing-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
}

.landing-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.landing-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.landing-label {
  font-size: 12px;
  font-weight: 700;
  color: #dfcfab;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.landing-input {
  width: 100%;
  height: 42px;
  background: #0c0603;
  border: 1.5px solid #6c4b22;
  border-radius: 4px;
  padding: 0 14px;
  color: #ffdf85;
  font-family: var(--font-primary);
  font-size: 13.5px;
  outline: none;
  user-select: text;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
}

.landing-input:focus {
  border-color: #d4a753;
  box-shadow: 0 0 12px rgba(212, 167, 83, 0.35), inset 0 2px 6px rgba(0, 0, 0, 0.8);
}

.input-wrap {
  position: relative;
  width: 100%;
}

.password-wrap {
  display: flex;
  align-items: center;
}

.password-wrap .landing-input {
  padding-right: 42px;
}

.btn-toggle-pwd {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: #9c8469;
  font-size: 16px;
  padding: 6px;
  line-height: 1;
}

.btn-toggle-pwd:hover {
  color: #ffdf85;
}

.input-hint {
  font-size: 11px;
  color: #9a846c;
  margin-top: 2px;
}

.landing-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 8px;
}

.landing-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #c9b197;
  cursor: pointer;
}

.landing-checkbox-label input {
  accent-color: #d4a753;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Feudal Action Button */
.btn-feudal-primary {
  width: 100%;
  height: 46px;
  background: linear-gradient(180deg, #916828 0%, #573a0e 100%);
  border: 1.5px solid #d4a753;
  border-radius: 4px;
  color: #fff3d1;
  font-family: var(--font-primary);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  transition: all 0.2s ease;
}

.btn-feudal-primary:hover {
  background: linear-gradient(180deg, #b07e32 0%, #704b14 100%);
  border-color: #ffe699;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 16px rgba(212, 167, 83, 0.45);
  transform: translateY(-1px);
}

.btn-feudal-primary:active {
  transform: translateY(1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
}

.btn-feudal-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Divider */
.landing-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 14px;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #6c4b22, transparent);
}

.divider-diamond {
  font-size: 11px;
  font-weight: 800;
  color: #d4a753;
  letter-spacing: 1px;
}

/* Quick-Play Demo Button */
.quickplay-box {
  width: 100%;
}

.btn-quickplay {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(46, 26, 12, 0.9) 0%, rgba(26, 14, 6, 0.96) 100%);
  border: 1.5px solid #7d592b;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.22s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  text-align: left;
}

.btn-quickplay:hover {
  border-color: #d4a753;
  background: linear-gradient(180deg, rgba(65, 37, 18, 0.95) 0%, rgba(38, 20, 9, 0.98) 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), 0 0 14px rgba(212, 167, 83, 0.25);
  transform: translateY(-1px);
}

.btn-quickplay:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.qp-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #d4a753;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.qp-title {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #ffdf85;
  letter-spacing: 0.5px;
}

.qp-desc {
  display: block;
  font-size: 11.5px;
  color: #bca48b;
  margin-top: 2px;
}

.qp-badge {
  background: linear-gradient(180deg, #875b1c 0%, #4b310d 100%);
  border: 1px solid #d4a753;
  color: #ffdf85;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 20px;
  letter-spacing: 1px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

/* Archetype Cards */
.landing-section-block {
  margin-top: 6px;
}

.section-block-label {
  font-size: 11.5px;
  font-weight: 800;
  color: #ffdf85;
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.block-num {
  color: #d4a753;
  font-weight: 900;
}

.archetype-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.archetype-card {
  background: rgba(14, 7, 3, 0.75);
  border: 1.5px solid #573a17;
  border-radius: 4px;
  padding: 10px 10px 12px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.archetype-card:hover {
  border-color: #9f7134;
  background: rgba(28, 14, 7, 0.85);
  transform: translateY(-1px);
}

.archetype-card.active {
  border-color: #d4a753;
  background: linear-gradient(180deg, rgba(65, 37, 18, 0.9) 0%, rgba(35, 18, 8, 0.95) 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 12px rgba(212, 167, 83, 0.3);
}

.arch-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.arch-icon {
  font-size: 18px;
}

.arch-name {
  font-size: 13px;
  font-weight: 800;
  color: #ffdf85;
}

.arch-perk {
  font-size: 10.5px;
  font-weight: 700;
  color: #6be092;
  line-height: 1.25;
  margin-bottom: 6px;
}

.arch-lore {
  font-size: 10px;
  color: #b8a087;
  line-height: 1.3;
}

.arch-check {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 12px;
  font-weight: 900;
  color: #d4a753;
  display: none;
}

.archetype-card.active .arch-check {
  display: block;
}

/* Topography Cards */
.topography-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.topo-card {
  background: rgba(14, 7, 3, 0.75);
  border: 1.5px solid #573a17;
  border-radius: 4px;
  padding: 10px 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.topo-card:hover {
  border-color: #9f7134;
  background: rgba(28, 14, 7, 0.85);
  transform: translateY(-1px);
}

.topo-card.active {
  border-color: #d4a753;
  background: linear-gradient(180deg, rgba(65, 37, 18, 0.9) 0%, rgba(35, 18, 8, 0.95) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(212, 167, 83, 0.25);
}

.topo-icon {
  font-size: 20px;
  display: block;
  margin-bottom: 4px;
}

.topo-name {
  font-size: 12px;
  font-weight: 700;
  color: #ffdf85;
  display: block;
}

.topo-desc {
  font-size: 9.5px;
  color: #c4b099;
  display: block;
  margin-top: 2px;
}

/* Feedback banners */
.landing-feedback {
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 12.5px;
  margin-bottom: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.feedback-error {
  background: rgba(85, 20, 20, 0.88);
  border: 1.5px solid #e74c3c;
  color: #ffd6d6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.feedback-success {
  background: rgba(20, 60, 25, 0.88);
  border: 1.5px solid #2ecc71;
  color: #d6ffd6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.feedback-info {
  background: rgba(30, 20, 10, 0.88);
  border: 1.5px solid #d4a753;
  color: #ffdf85;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

@keyframes shakeAnim {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.landing-feedback.shake {
  animation: shakeAnim 0.35s ease-in-out;
}

/* Logout / Abdicate Pill in Topbar */
.logout-pill {
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 4px;
}

.logout-pill:hover {
  border-color: #e74c3c;
  background: linear-gradient(180deg, #441414 0%, #220808 100%);
  color: #ff9e9e;
  box-shadow: 0 0 10px rgba(231, 76, 60, 0.4);
}

/* ==========================================================================
   ORANGE TOP-BAR CTA: REGISTER TO SAVE GUEST PROGRESS
   ========================================================================== */
.guest-register-pill {
  background: linear-gradient(180deg, #f39c12 0%, #d35400 100%) !important;
  border: 1.5px solid #ffd280 !important;
  color: #ffffff !important;
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 800;
  letter-spacing: 0.4px;
  box-shadow: 0 0 14px rgba(243, 156, 18, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: all 0.2s ease;
  animation: guestOrangeGlow 2.4s infinite ease-in-out;
}

.guest-register-pill .pill-value {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  font-size: 12.5px;
}

.guest-register-pill:hover {
  background: linear-gradient(180deg, #ffaa2b 0%, #e65c00 100%) !important;
  border-color: #fff0b8 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(243, 156, 18, 0.75);
}

@keyframes guestOrangeGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(243, 156, 18, 0.45), inset 0 1px 0 rgba(255,255,255,0.3); }
  50% { box-shadow: 0 0 18px rgba(243, 156, 18, 0.8), inset 0 1px 0 rgba(255,255,255,0.45); }
}

/* ==========================================================================
   GOOGLE OAUTH BUTTON & MODAL
   ========================================================================== */
.landing-oauth-row {
  margin-top: 12px;
}

.btn-google-oauth {
  width: 100%;
  height: 42px;
  background: #ffffff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: all 0.18s ease;
}

.btn-google-oauth:hover {
  background: #f8f9fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}

/* Play Without Registration (Guest Entry) */
.guest-entry-box {
  width: 100%;
}

.btn-guest-play {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  background: linear-gradient(180deg, rgba(58, 33, 12, 0.92) 0%, rgba(30, 16, 6, 0.96) 100%);
  border: 1.5px solid #91642c;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.22s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  text-align: left;
  gap: 14px;
}

.btn-guest-play:hover {
  border-color: #f39c12;
  background: linear-gradient(180deg, rgba(78, 44, 15, 0.95) 0%, rgba(44, 23, 8, 0.98) 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), 0 0 14px rgba(243, 156, 18, 0.3);
  transform: translateY(-1px);
}

.guest-icon-orb {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #5e3816 0%, #2b1606 100%);
  border: 2px solid #d4a753;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.guest-badge {
  background: linear-gradient(180deg, #e67e22 0%, #b85300 100%);
  border: 1px solid #ffcb7d;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 20px;
  letter-spacing: 0.8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

/* ==========================================================================
   SCREEN 2 HEADER (CHARACTER & VILLAGE SETUP)
   ========================================================================== */
.character-setup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: linear-gradient(180deg, #180c05 0%, #2a1609 100%);
  border-bottom: 2px solid #573917;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.setup-step-badge {
  font-size: 12.5px;
  font-weight: 800;
  color: #ffdf85;
  letter-spacing: 1.5px;
}

.setup-account-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #c9b197;
}

.setup-account-pill strong {
  color: #ffdf85;
}

.btn-link-switch {
  background: none;
  border: 1px solid #7a5422;
  border-radius: 4px;
  color: #dfcfab;
  font-family: var(--font-primary);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-link-switch:hover {
  border-color: #d4a753;
  color: #ffdf85;
}

/* Google OAuth Dialog Card */
.google-oauth-card {
  width: 420px;
  max-width: 92vw;
  background: #ffffff;
  color: #202124;
  border-radius: 8px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.65);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.google-oauth-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 15px;
  font-weight: 600;
  color: #3c4043;
}

.google-close-btn {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 22px;
  color: #5f6368;
  cursor: pointer;
  line-height: 1;
}

.google-oauth-body {
  padding: 20px 24px 24px;
}

.google-app-title {
  font-size: 14px;
  color: #5f6368;
  margin-bottom: 16px;
}

.google-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.google-field-group label {
  font-size: 12px;
  font-weight: 600;
  color: #3c4043;
}

.google-input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 14px;
  color: #202124;
  outline: none;
  user-select: text;
}

.google-input:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.google-feedback {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  margin-bottom: 12px;
  background: #fce8e6;
  color: #c5221f;
}

.google-actions-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.btn-google-cancel {
  background: none;
  border: none;
  color: #1a73e8;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-google-cancel:hover {
  background: rgba(26, 115, 232, 0.08);
}

.btn-google-continue {
  background: #1a73e8;
  color: #ffffff;
  border: none;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 22px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-google-continue:hover {
  background: #1557b0;
}