/* ==========================================================================
   League of Nations — Consolidated Stylesheet
   ==========================================================================*/

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   -------------------------------------------------------------------------- */
:root {
  /* Base palette (light mode) */
  --color-background:   #ffffff;
  --color-foreground:   #374151; /* ~gray-700, matches hsl(215 25% 27%) */
  --color-card:         #ffffff;
  --color-card-fg:      #374151;
  --color-popover:      #ffffff;
  --color-popover-fg:   #374151;

  /* Primary / secondary / accent */
  --color-primary:         #0f172a; /* ~gray-900 */
  --color-primary-fg:      #fafafa;
  --color-secondary:       #f4f4f5; /* ~gray-100 */
  --color-secondary-fg:    #0f172a;
  --color-muted:           #f4f4f5;
  --color-muted-fg:        #6b7280; /* gray-500 */
  --color-accent:          #f4f4f5;
  --color-accent-fg:       #0f172a;

  /* Semantic */
  --color-destructive:     #ef4444; /* red-500 */
  --color-destructive-fg:  #fafafa;
  --color-border:          #e4e4e7; /* ~gray-200 */
  --color-input:           #e4e4e7;
  --color-ring:            #0f172a;
  --color-success:         #22c55e; /* green-500 */
  --color-error:           #ef4444; /* red-500 */
  --color-warning:         #f97316; /* orange-500 */
  --color-link:            #d97706; /* amber-600 */

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* -----------------------------------------------------------------------
     Rarity system — one canonical colour per tier
     -----------------------------------------------------------------------
     Common    : white / gray
     Uncommon  : green-400  #4ade80
     Rare      : blue-400   #60a5fa
     Epic      : purple-500 #a855f7
     Legendary : orange-500 #f97316
  ----------------------------------------------------------------------- */

  /* Common */
  --rarity-common-text:        #111827; /* gray-900 */
  --rarity-common-text-sub:    #374151; /* gray-700 */
  --rarity-common-bg:          #ffffff;
  --rarity-common-border:      #e5e7eb; /* gray-200 */
  --rarity-common-header-bg:   #f9fafb; /* gray-50 */
  --rarity-common-header-text: #111827;
  --rarity-common-glow:        rgba(255, 255, 255, 0.8);
  --rarity-common-glow-static: rgba(255, 255, 255, 0.3);

  /* Uncommon */
  --rarity-uncommon-text:        #16a34a; /* green-600 */
  --rarity-uncommon-text-sub:    rgba(255,255,255,0.9);
  --rarity-uncommon-bg:          #f0fdf4; /* green-50 */
  --rarity-uncommon-border:      #bbf7d0; /* green-200 */
  --rarity-uncommon-header-bg:   #4ade80; /* green-400 */
  --rarity-uncommon-header-text: #ffffff;
  --rarity-uncommon-glow:        rgba(74, 222, 128, 0.8);
  --rarity-uncommon-glow-static: rgba(74, 222, 128, 0.3);

  /* Rare */
  --rarity-rare-text:        #2563eb; /* blue-600 */
  --rarity-rare-text-sub:    rgba(255,255,255,0.9);
  --rarity-rare-bg:          #eff6ff; /* blue-50 */
  --rarity-rare-border:      #bfdbfe; /* blue-200 */
  --rarity-rare-header-bg:   #60a5fa; /* blue-400 */
  --rarity-rare-header-text: #ffffff;
  --rarity-rare-glow:        rgba(96, 165, 250, 0.8);
  --rarity-rare-glow-static: rgba(96, 165, 250, 0.3);

  /* Epic */
  --rarity-epic-text:        #9333ea; /* purple-600 */
  --rarity-epic-text-sub:    rgba(255,255,255,0.9);
  --rarity-epic-bg:          #faf5ff; /* purple-50 */
  --rarity-epic-border:      #e9d5ff; /* purple-200 */
  --rarity-epic-header-bg:   #a855f7; /* purple-500 */
  --rarity-epic-header-text: #ffffff;
  --rarity-epic-glow:        rgba(168, 85, 247, 0.8);
  --rarity-epic-glow-static: rgba(168, 85, 247, 0.3);

  /* Legendary */
  --rarity-legendary-text:        #f97316; /* orange-500 */
  --rarity-legendary-text-sub:    rgba(255,255,255,0.9);
  --rarity-legendary-bg:          #fff7ed; /* orange-50 */
  --rarity-legendary-border:      #fed7aa; /* orange-200 */
  --rarity-legendary-header-bg:   #f97316; /* orange-500 */
  --rarity-legendary-header-text: #ffffff;
  --rarity-legendary-glow:        rgba(249, 115, 22, 0.8);
  --rarity-legendary-glow-static: rgba(249, 115, 22, 0.3);

  /* Sidebar */
  --sidebar-bg:        #1a2b4b;
  --sidebar-hover-bg:  #2c4270;
  --sidebar-text:      #d1d5db; /* gray-300 */
  --sidebar-icon:      #9ca3af; /* gray-400 */
  --sidebar-width:     16rem;   /* 256px / 64 Tailwind units */

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  border-color: var(--color-border);
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

/* App shell */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  position: fixed;
  inset-block: 0;
  left: 0;
  width: var(--sidebar-width);
  background-color: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 50;
}

.sidebar-nav {
  flex: 1;
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar-footer {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sidebar-version {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: var(--sidebar-icon);
  padding: 0.5rem 0;
  text-decoration: none;
  transition: color 0.15s;
}
.sidebar-version:hover {
  color: var(--color-amber, #f59e0b);
}

.sidebar-timers {
  background-color: var(--sidebar-hover-bg);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-timer-row {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  color: var(--sidebar-text);
  gap: 0.5rem;
}

/* Nav items (links + buttons) */
.nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sidebar-text);
  background: transparent;
  border: none;
  text-align: left;
  text-decoration: none;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
  cursor: pointer;
  gap: 0.75rem;
}

.nav-item:hover,
.nav-item.active {
  background-color: var(--sidebar-hover-bg);
  color: #ffffff;
  text-decoration: none;
}

.nav-item .nav-icon {
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
  font-size: 1rem;
  color: var(--sidebar-icon);
  transition: color var(--transition-fast);
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  color: #ffffff;
}

/* Child nav (indented sub-items) */
.nav-children {
  padding-left: 2rem;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
}

/* Collapsible nav group */
.nav-group__toggle {
  justify-content: flex-start;
}

.nav-group__arrow {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--sidebar-icon);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.nav-group--open > .nav-group__toggle .nav-group__arrow {
  transform: rotate(90deg);
}

.nav-group--open > .nav-children {
  display: flex;
}

.nav-item:hover .nav-group__arrow,
.nav-item.active .nav-group__arrow {
  color: #ffffff;
}

/* Discord sub-label */
.nav-item__sub {
  font-size: 0.7rem;
  color: var(--sidebar-icon);
  line-height: 1.3;
  display: block;
}

.nav-item:hover .nav-item__sub {
  color: #9ca3af;
}

/* External link indicator */
.nav-item__ext {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--sidebar-icon);
  transition: color var(--transition-fast);
}

.nav-item:hover .nav-item__ext {
  color: #ffffff;
}

/* Main content area */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  padding-bottom: 4rem;
  min-height: 100vh;
}

/* No sidebar (auth pages) */
.main-content--full {
  margin-left: 0;
}

/* Auth page background */
.auth-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.6);
}

.page-wrapper {
  position: relative;
  z-index: 10;
  min-height: 100vh;
}

/* Centred full-screen page (auth / landing pages) */
.page-wrapper--centered {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Darker background tint for landing page (vs auth 0.6) */
.auth-background--darker {
  filter: brightness(0.35) saturate(0.7);
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.2; margin: 0 0 1rem; }
h2 { font-size: 1.5rem;   font-weight: 700; line-height: 1.25; margin: 0 0 0.75rem; }
h3 { font-size: 1.25rem;  font-weight: 600; line-height: 1.3;  margin: 0 0 0.5rem; }
h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; margin: 0 0 0.5rem; }
h5 { font-size: 1rem;     font-weight: 600; line-height: 1.4;  margin: 0 0 0.5rem; }
h6 { font-size: 0.875rem; font-weight: 600; line-height: 1.4;  margin: 0 0 0.5rem; }

.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg   { font-size: 1.125rem; }
.text-xl   { font-size: 1.25rem; }
.text-2xl  { font-size: 1.5rem; }
.text-3xl  { font-size: 1.875rem; }

.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold    { font-weight: 700; }

/* Text colour utilities */
.text-gray-400   { color: #9ca3af; }
.text-gray-500   { color: #6b7280; }
.text-gray-600   { color: #4b5563; }
.text-gray-700   { color: #374151; }
.text-gray-900   { color: #111827; }
.text-white      { color: #ffffff; }
.text-muted      { color: var(--color-muted-fg); }

.text-green-600  { color: #16a34a; }
.text-blue-600   { color: #2563eb; }
.text-purple-600 { color: #9333ea; }
.text-orange-500 { color: #f97316; }
.text-amber-600  { color: #d97706; }
.text-red-600    { color: #dc2626; }
.text-green-500  { color: #22c55e; }

/* --------------------------------------------------------------------------
   5. RARITY SYSTEM
   -------------------------------------------------------------------------- */

/* --- Base card structure (used by equipment, loot, collection cards) --- */
.rarity-card {
  border-radius: var(--radius-xl);
  border: 1px solid;
  background-color: #ffffff;
  overflow: hidden;
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}

/* Card header (coloured band at top showing rarity) */
.rarity-card__header {
  padding: 0.75rem 1rem;
}

.rarity-card__header-title {
  font-weight: 600;
  font-size: 0.875rem;
}

.rarity-card__header-subtitle {
  font-size: 0.75rem;
  opacity: 0.9;
}

.rarity-card__body {
  padding: 1rem;
}

/* --- Common --- */
.rarity-common .rarity-card,
.rarity-card--common {
  background-color: var(--rarity-common-bg);
  border-color: var(--rarity-common-border);
}
.rarity-card--common .rarity-card__header {
  background-color: var(--rarity-common-header-bg);
  color: var(--rarity-common-header-text);
}
.rarity-card--common .rarity-card__header-subtitle {
  color: #374151; /* gray-700 — darker for white header */
}
.rarity-card--common:hover {
  box-shadow: 0 0 25px 5px var(--rarity-common-glow);
}
.rarity-card--common.rarity-card--glow {
  box-shadow: 0 0 15px 2px var(--rarity-common-glow-static);
}
.text-rarity-common  { color: var(--rarity-common-text); }
.bg-rarity-common    { background-color: var(--rarity-common-bg); }
.border-rarity-common{ border-color: var(--rarity-common-border); }

/* --- Uncommon --- */
.rarity-card--uncommon {
  background-color: var(--rarity-uncommon-bg);
  border-color: var(--rarity-uncommon-border);
}
.rarity-card--uncommon .rarity-card__header {
  background-color: var(--rarity-uncommon-header-bg);
  color: var(--rarity-uncommon-header-text);
}
.rarity-card--uncommon:hover {
  box-shadow: 0 0 25px 5px var(--rarity-uncommon-glow);
}
.rarity-card--uncommon.rarity-card--glow {
  box-shadow: 0 0 15px 2px var(--rarity-uncommon-glow-static);
}
.text-rarity-uncommon  { color: var(--rarity-uncommon-text); }
.bg-rarity-uncommon    { background-color: var(--rarity-uncommon-bg); }
.border-rarity-uncommon{ border-color: var(--rarity-uncommon-border); }

/* --- Rare --- */
.rarity-card--rare {
  background-color: var(--rarity-rare-bg);
  border-color: var(--rarity-rare-border);
}
.rarity-card--rare .rarity-card__header {
  background-color: var(--rarity-rare-header-bg);
  color: var(--rarity-rare-header-text);
}
.rarity-card--rare:hover {
  box-shadow: 0 0 25px 5px var(--rarity-rare-glow);
}
.rarity-card--rare.rarity-card--glow {
  box-shadow: 0 0 15px 2px var(--rarity-rare-glow-static);
}
.text-rarity-rare  { color: var(--rarity-rare-text); }
.bg-rarity-rare    { background-color: var(--rarity-rare-bg); }
.border-rarity-rare{ border-color: var(--rarity-rare-border); }

/* --- Epic --- */
.rarity-card--epic {
  background-color: var(--rarity-epic-bg);
  border-color: var(--rarity-epic-border);
}
.rarity-card--epic .rarity-card__header {
  background-color: var(--rarity-epic-header-bg);
  color: var(--rarity-epic-header-text);
}
.rarity-card--epic:hover {
  box-shadow: 0 0 25px 5px var(--rarity-epic-glow);
}
.rarity-card--epic.rarity-card--glow {
  box-shadow: 0 0 15px 2px var(--rarity-epic-glow-static);
}
.text-rarity-epic  { color: var(--rarity-epic-text); }
.bg-rarity-epic    { background-color: var(--rarity-epic-bg); }
.border-rarity-epic{ border-color: var(--rarity-epic-border); }

/* --- Legendary --- */
.rarity-card--legendary {
  background-color: var(--rarity-legendary-bg);
  border-color: var(--rarity-legendary-border);
}
.rarity-card--legendary .rarity-card__header {
  background-color: var(--rarity-legendary-header-bg);
  color: var(--rarity-legendary-header-text);
}
.rarity-card--legendary:hover {
  box-shadow: 0 0 25px 5px var(--rarity-legendary-glow);
}
.rarity-card--legendary.rarity-card--glow {
  box-shadow: 0 0 15px 2px var(--rarity-legendary-glow-static);
}
.text-rarity-legendary  { color: var(--rarity-legendary-text); }
.bg-rarity-legendary    { background-color: var(--rarity-legendary-bg); }
.border-rarity-legendary{ border-color: var(--rarity-legendary-border); }

/* Rarity badge (small inline label) */
.rarity-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}
.rarity-badge--common    { background-color: var(--rarity-common-border);    color: var(--rarity-common-text); }
.rarity-badge--uncommon  { background-color: var(--rarity-uncommon-header-bg); color: #ffffff; }
.rarity-badge--rare      { background-color: var(--rarity-rare-header-bg);    color: #ffffff; }
.rarity-badge--epic      { background-color: var(--rarity-epic-header-bg);    color: #ffffff; }
.rarity-badge--legendary { background-color: var(--rarity-legendary-header-bg); color: #ffffff; }

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  height: 2.25rem;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              opacity var(--transition-base);
  cursor: pointer;
  text-decoration: none;
}

.btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.btn:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* Variants */
.btn--default {
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
  box-shadow: var(--shadow-sm);
}
.btn--default:hover { background-color: #1e293b; } /* primary/90 */

.btn--destructive {
  background-color: var(--color-destructive);
  color: var(--color-destructive-fg);
  box-shadow: var(--shadow-sm);
}
.btn--destructive:hover { background-color: #dc2626; }

.btn--outline {
  border-color: var(--color-input);
  background-color: var(--color-background);
  box-shadow: var(--shadow-sm);
}
.btn--outline:hover {
  background-color: var(--color-accent);
  color: var(--color-accent-fg);
}

.btn--secondary {
  background-color: var(--color-secondary);
  color: var(--color-secondary-fg);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover { background-color: #e2e8f0; }

.btn--ghost:hover {
  background-color: var(--color-accent);
  color: var(--color-accent-fg);
}

.btn--link {
  color: var(--color-primary);
  text-underline-offset: 4px;
}
.btn--link:hover { text-decoration: underline; }

/* Amber (most common call-to-action in this project) */
.btn--amber {
  background-color: #d97706; /* amber-600 */
  color: #ffffff;
}
.btn--amber:hover { background-color: #b45309; } /* amber-700 */

/* Blue primary action */
.btn--blue {
  background-color: #3b82f6; /* blue-500 */
  color: #ffffff;
}
.btn--blue:hover { background-color: #2563eb; } /* blue-600 */

/* Green success action */
.btn--green { background-color: #16a34a; color: #fff; } /* green-600 */
.btn--green:hover { background-color: #15803d; } /* green-700 */

/* Sizes */
.btn--sm  { height: 2rem;    padding: 0 0.75rem; font-size: 0.75rem; }
.btn--lg  { height: 2.5rem;  padding: 0 2rem; }
.btn--icon{ height: 2.25rem; width: 2.25rem; padding: 0; }

/* Amber outline — secondary CTA alongside .btn--amber */
.btn--amber-outline {
  border: 2px solid #f59e0b;
  color: #f59e0b;
  background: transparent;
  padding: 0.75rem 2rem;
}
.btn--amber-outline:hover {
  background-color: #f59e0b;
  color: #000000;
  text-decoration: none;
}

/* Full-width modifier */
.btn--full { width: 100%; justify-content: center; }

/* Inline amber text link / button (e.g. "Forgot password?", "Create a Nation") */
.text-link--amber {
  color: #f59e0b;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  cursor: pointer;
  text-decoration: none;
}
.text-link--amber:hover { color: #fcd34d; text-decoration: none; }

/* --------------------------------------------------------------------------
   7. FORM ELEMENTS
   -------------------------------------------------------------------------- */

/* Input */
.input {
  display: flex;
  height: 2.25rem;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-input);
  background-color: transparent;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast);
}

textarea.input {
  display: block;
  height: auto;
  padding: 0.5rem 0.75rem;
  resize: vertical;
}

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

.input:focus-visible {
  outline: 1px solid var(--color-ring);
}

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

/* Label */
.label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
}

/* Dark-background input (auth / overlay forms) */
.input--dark {
  background-color: #374151; /* gray-700 */
  border-color: #4b5563;     /* gray-600 */
  color: #ffffff;
}
.input--dark::placeholder { color: #9ca3af; }
.input--dark:focus-visible { outline-color: #f59e0b; }

/* Form layout helpers */
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-stack { display: flex; flex-direction: column; gap: 1rem; }
.label-row  { display: flex; justify-content: space-between; align-items: center; }

/* Checkbox */
.checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Radio */
.radio {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background-color: var(--color-card);
  color: var(--color-card-fg);
  box-shadow: var(--shadow-sm);
}

.card__header {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.5rem;
}

.card__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
}

.card__description {
  font-size: 0.875rem;
  color: var(--color-muted-fg);
}

.card__content {
  padding: 1.5rem;
  padding-top: 0;
}

.card__footer {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  padding-top: 0;
}

/* Dark card — used on auth / overlay pages */
.card--dark {
  background-color: rgba(31, 41, 55, 0.92); /* gray-800/90 */
  border-color: #374151; /* gray-700 */
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   9. CARD FLIP ANIMATION
   -------------------------------------------------------------------------- */
@keyframes flipCard {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(180deg); }
}

.card-container {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.5s ease-in-out;
}

.card-back  { transform: rotateY(0deg); }
.card-front { transform: rotateY(-180deg); }

.card-container.revealed .card-back  { transform: rotateY(180deg); }
.card-container.revealed .card-front { transform: rotateY(0deg); }

.card--flipping {
  animation: flipCard 0.5s ease-in-out;
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* --------------------------------------------------------------------------
   10. TABLES
   -------------------------------------------------------------------------- */
.table-wrapper {
  position: relative;
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

thead tr {
  border-bottom: 1px solid var(--color-border);
}

tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}

tbody tr:last-child { border-bottom: none; }

tbody tr:hover { background-color: rgba(0,0,0,0.025); }

th {
  height: 3rem;
  padding: 0 1rem;
  text-align: left;
  vertical-align: middle;
  font-weight: 500;
  color: var(--color-muted-fg);
}

td {
  padding: 1rem;
  vertical-align: middle;
}

tfoot {
  border-top: 1px solid var(--color-border);
  background-color: rgba(0,0,0,0.02);
  font-weight: 500;
}

caption {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--color-muted-fg);
}

/* --------------------------------------------------------------------------
   11. TABS
   -------------------------------------------------------------------------- */
.tabs-list {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: #f3f4f6; /* gray-100 */
  padding: 0.25rem;
  color: #6b7280; /* gray-500 */
}

.tabs-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast);
  color: inherit;
}

.tabs-trigger:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.tabs-trigger.active,
.tabs-trigger[data-state="active"] {
  background-color: #ffffff;
  color: #030712; /* gray-950 */
  box-shadow: var(--shadow-sm);
}

.tabs-trigger:focus-visible {
  outline: 2px solid #9ca3af;
  outline-offset: 2px;
}

.tabs-content {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   12. MODAL / DIALOG
   -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(
    to bottom right,
    rgba(0,0,0,0.30),
    rgba(17,24,39,0.30),
    rgba(0,0,0,0.30)
  );
  backdrop-filter: blur(4px);
}

.modal-wrapper {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal {
  background-color: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 28rem;
  width: 100%;
  position: relative;
  border: 1px solid #e5e7eb;
}

.modal__content {
  padding: 1.5rem;
}

.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.modal__close:hover { color: #374151; }

.modal__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1rem;
  margin-top: 0;
}

.modal__body {
  color: #1f2937; /* gray-800 */
}

/* Dark modal — used on dark-background pages */
.modal--dark {
  background-color: #1f2937; /* gray-800 */
  border-color: #374151;     /* gray-700 */
  color: #ffffff;
}
.modal--dark .modal__title { color: #ffffff; }
.modal--dark .modal__body  { color: #d1d5db; }
.modal--dark .modal__close { color: #9ca3af; }
.modal--dark .modal__close:hover { color: #e5e7eb; }

/* --------------------------------------------------------------------------
   13. STATUS / FEEDBACK ELEMENTS
   -------------------------------------------------------------------------- */

/* Achievement toast */
.achievement-toast {
  font-size: 1.125rem !important;
  width: 25rem !important;
  padding: 1.25rem !important;
}

/* Alert / banner */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid;
  font-size: 0.875rem;
}
.alert--success {
  background-color: #f0fdf4;
  border-color: rgba(34,197,94,0.2); /* green-500/20 */
  color: #16a34a;
}
.alert--error {
  background-color: #fef2f2;
  border-color: #fecaca; /* red-200 */
  color: #dc2626;
}
.alert--warning {
  background-color: #fff7ed;
  border-color: #fed7aa; /* orange-200 */
  color: #f97316;
}
.alert--info {
  background-color: #eff6ff;
  border-color: #bfdbfe; /* blue-200 */
  color: #2563eb;
}

/* Dark-background alert variants (used on dark card / overlay pages) */
.alert--error-dark {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}
.alert--success-dark {
  background-color: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #86efac;
}

/* Progress bar */
.progress {
  width: 100%;
  height: 0.5rem;
  background-color: #e5e7eb; /* gray-200 */
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background-color: #2563eb; /* blue-600 */
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}
.badge--gray    { background-color: #e5e7eb; color: #374151; }
.badge--green   { background-color: #dcfce7; color: #16a34a; }
.badge--blue    { background-color: #dbeafe; color: #2563eb; }
.badge--red     { background-color: #fee2e2; color: #dc2626; }
.badge--orange  { background-color: #ffedd5; color: #f97316; }
.badge--purple  { background-color: #f3e8ff; color: #9333ea; }
.badge--amber   { background-color: #fef3c7; color: #d97706; }

/* --------------------------------------------------------------------------
   14. UTILITY CLASSES
   -------------------------------------------------------------------------- */

/* Display */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.block        { display: block; }
.hidden       { display: none; }

/* Flex helpers */
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.flex-1         { flex: 1 1 0%; }
.flex-shrink-0  { flex-shrink: 0; }
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }

/* Spacing */
.p-1  { padding: 0.25rem; }
.p-2  { padding: 0.5rem; }
.p-3  { padding: 0.75rem; }
.p-4  { padding: 1rem; }
.p-6  { padding: 1.5rem; }
.px-2 { padding-inline: 0.5rem; }
.px-3 { padding-inline: 0.75rem; }
.px-4 { padding-inline: 1rem; }
.px-8 { padding-inline: 2rem; }
.py-1 { padding-block: 0.25rem; }
.py-2 { padding-block: 0.5rem; }
.py-4 { padding-block: 1rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.ml-2 { margin-left: 0.5rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mx-auto { margin-inline: auto; }

/* Sizing */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.w-4     { width: 1rem; }
.h-4     { height: 1rem; }
.w-6     { width: 1.5rem; }
.h-6     { height: 1.5rem; }
.w-8     { width: 2rem; }
.h-8     { height: 2rem; }
.w-24    { width: 6rem; }
.max-w-md  { max-width: 28rem; }
.max-w-lg  { max-width: 32rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.min-h-screen { min-height: 100vh; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.inset-0  { inset: 0; }

/* Z-index */
.z-10  { z-index: 10; }
.z-50  { z-index: 50; }

/* Borders */
.border      { border: 1px solid var(--color-border); }
.border-b    { border-bottom: 1px solid var(--color-border); }
.border-t    { border-top: 1px solid var(--color-border); }
.rounded     { border-radius: var(--radius-md); }
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-full{ border-radius: var(--radius-full); }

/* Backgrounds */
.bg-white      { background-color: #ffffff; }
.bg-gray-50    { background-color: #f9fafb; }
.bg-gray-100   { background-color: #f3f4f6; }
.bg-gray-200   { background-color: #e5e7eb; }
.bg-gray-700   { background-color: #374151; }
.bg-gray-800   { background-color: #1f2937; }
.bg-gray-900   { background-color: #111827; }
.bg-blue-500   { background-color: #3b82f6; }
.bg-amber-600  { background-color: #d97706; }
.bg-red-50     { background-color: #fef2f2; }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }

/* Cursor */
.cursor-pointer  { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* Opacity */
.opacity-50 { opacity: 0.5; }

/* Transitions */
.transition       { transition: all var(--transition-base); }
.transition-colors{ transition: background-color var(--transition-base),
                                color var(--transition-base),
                                border-color var(--transition-base); }

/* Hover utilities */
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:underline:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   15. MISCELLANEOUS COMPONENT PATTERNS
   -------------------------------------------------------------------------- */

/* Resource amount display (icon + number) */
.resource-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Stat row inside a card */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--color-border);
}
.stat-row:last-child { border-bottom: none; }
.stat-row__label { color: var(--color-muted-fg); }
.stat-row__value { font-weight: 600; }

/* Section heading */
.section-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1rem;
  margin-top: 0;
}

/* Page container */
.page {
  padding: 1.5rem;
  max-width: 80rem;
}

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1rem 0;
}

/* --------------------------------------------------------------------------
   16. ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes accordion-down {
  from { height: 0; overflow: hidden; }
  to   { height: var(--accordion-content-height, auto); overflow: hidden; }
}

@keyframes accordion-up {
  from { height: var(--accordion-content-height, auto); overflow: hidden; }
  to   { height: 0; overflow: hidden; }
}

.animate-accordion-down {
  animation: accordion-down 0.2s ease-out;
}
.animate-accordion-up {
  animation: accordion-up 0.2s ease-out;
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.2s ease-out;
}

/* --------------------------------------------------------------------------
   17. RESOURCE AMOUNT COMPONENT
   -------------------------------------------------------------------------- */

/*
 * Usage: render_resource_amount($key, $amount, ['truncate'=>true, 'colour'=>'green'])
 * Colours: neutral (default, --sidebar-text), red (--color-destructive), green (--color-success)
 * Tooltip: pure CSS via ::after + data-tooltip attribute; appears above the component.
 */

.resource-amount {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  cursor: default;
}

.resource-amount__icon {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  flex-shrink: 0;
}

.resource-amount__value {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-foreground);   /* neutral: standard body text */
  line-height: 1;
}

.resource-amount--red   .resource-amount__value { color: var(--color-destructive); }
.resource-amount--green .resource-amount__value { color: var(--color-success); }

/* CSS tooltip */
.resource-amount::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 2147483647;
}

.resource-amount:hover::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   18. APP FOOTER
   -------------------------------------------------------------------------- */

/*
 * Fixed bar at the bottom of every authenticated page.
 * Spans from the sidebar's right edge to the viewport's right edge.
 * overflow: visible is required so the resource-amount tooltip (position: absolute)
 * can extend above the footer without being clipped.
 */

.app-footer {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  height: 2.375rem;
  background-color: var(--color-background);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 1rem;
  overflow: visible;
  z-index: 40;
}

/* --------------------------------------------------------------------------
   19. HOME PAGE — NATION BANNER
   -------------------------------------------------------------------------- */

.home-banner {
  position: relative;
  height: 50vh;
  min-height: 320px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

/* Continent background image */
.home-banner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.45) saturate(0.75);
}

/* Content row sits above the darkened bg */
.home-banner__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
}

/* ── Left: flag + nation name ── */
.home-banner__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* push flag + name toward the divider */
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 2.5rem;
}

.home-banner__flag {
  width: 170px;
  height: auto;
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  display: block;
  transition: filter 0.15s;
}

.home-banner__flag-btn {
  position: relative;
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.home-banner__flag-btn:hover .home-banner__flag {
  filter: brightness(0.55);
}

.home-banner__flag-btn__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  color: #ffffff;
  font-size: 1.75rem;
  pointer-events: none;
}

.home-banner__flag-btn:hover .home-banner__flag-btn__overlay {
  opacity: 1;
}

.home-banner__wallpaper-edit-btn {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 2;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.7);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8125rem;
  transition: background 0.15s, color 0.15s;
}

.home-banner__wallpaper-edit-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
}

.home-banner__nation-name {
  color: #ffffff;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  text-align: center;   /* centred under the flag */
  width: 170px;         /* match flag width so centering is relative to flag */
}

/* ── Vertical divider ── */
.home-banner__divider {
  width: 1px;
  height: 55%;
  background: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
  align-self: center;
}

/* ── Right: stats ── */
.home-banner__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 2.5rem;
  gap: 1.25rem;
}

/* Each stat row */
.home-banner__stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.home-banner__stat-label {
  font-size: 0.625rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-banner__stat-value {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

/* Premium icon next to leader name */
.home-banner__premium-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

/* Tier + population row */
.home-banner__pop-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.home-banner__tier-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.home-banner__tier-num {
  font-size: 1rem;
  font-weight: 700;
  color: #f59e0b;
}

.home-banner__pop-sep {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 300;
  font-size: 1rem;
}

.home-banner__growth {
  font-size: 0.85rem;
  font-weight: 700;
}

.home-banner__growth--pos { color: #4ade80; }
.home-banner__growth--neg { color: #f87171; }

/* GP button (clickable number) */
.home-banner__gp-btn {
  background: none;
  border: none;
  padding: 0;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  text-decoration: none;
  text-align: left;
  align-self: flex-start;
  transition: color var(--transition-fast);
}

.home-banner__gp-btn:hover {
  color: #fbbf24;
}

/* ── GP breakdown popup — rows inside the standard .modal ── */
.home-gp-popup__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0;
  font-size: 0.9375rem;
  color: #1f2937;
}

.home-gp-popup__row-label {
  color: #6b7280;
}

.home-gp-popup__row--total {
  margin-top: 0.25rem;
  font-weight: 700;
  font-size: 1rem;
  color: #111827;
}

/* ── Battle banner variant — centered title only, no left/right split ── */
.home-banner--battle .home-banner__content {
  justify-content: center;
  text-align: center;
}

.home-banner__battle-title {
  color: #ffffff;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  padding: 0 2rem;
}

/* --------------------------------------------------------------------------
   20. MILITARY — UNIT CARD (recruitment, overview, training, wars)
   -------------------------------------------------------------------------- */

/*
 * The unit card is the canonical layout for displaying a single military unit
 * (or officer) across every military page. It uses the dark-card aesthetic
 * over a light page so the unit artwork and stat bars read as dramatic.
 *
 * Structure:
 *   .unit-card
 *     .unit-card__header       — name (amber) + class badge
 *     .unit-card__image-wrap   — square frame holding the unit PNG
 *     .unit-card__body         — grid (1fr auto auto auto): stats, costs, btn
 *       .unit-card__stats      — 4-row stat block (FIR / DEF / MAN / HP)
 *       .unit-card__section    — label + resource-amount row (cost/upkeep)
 *       .unit-card__reqs       — building requirements (red if missing)
 *       .unit-card__btn (.btn --amber --full)
 *
 * Used by: military_recruitment.php. Must be reused by military_overview,
 * military_mtl, etc. Do not inline stat or button styles on the page; extend
 * this block with modifiers here.
 */

.unit-card {
  /* Span 6 row tracks (header / stats / cost / upkeep / buffs / button)
     so every section aligns horizontally with the same section in sibling cards */
  grid-row: span 6;
  display: grid;
  grid-template-rows: subgrid;
  padding: 0 1.25rem 1.25rem;
  overflow: hidden;
}

.unit-card--hidden { display: none !important; }

.unit-card__officer-spacer { min-height: 4rem; }

.unit-card__header {
  display: flex;
  align-items: flex-start;
  padding: 1rem 0 0.75rem;
}

.unit-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.3;
}

.unit-card__class {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.12);   /* subtle amber wash */
  color: #b45309;                         /* amber-700 */
  white-space: nowrap;
}

/* Plain variant — no background or accent colour, used on overview cards */
.unit-card__class--plain {
  background: none;
  color: var(--color-muted-fg);
  padding: 0;
  margin-left: auto;   /* push to right edge of the flex header */
}

/* Image frame — keeps every card's artwork aligned regardless of aspect ratio */
.unit-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.unit-card__image {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}

.unit-card__tier-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fbbf24;
  background: rgba(0, 0, 0, 0.55);
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
}

/* ── Stat bars (FIR / DEF / MAN / HP) ─────────────────────────────────────── */
.unit-card__stats {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-bottom: 0.75rem;
}

.unit-card__stat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.unit-card__stat-label {
  width: 2.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-muted-fg);
  text-transform: uppercase;
}

.unit-card__stat-track {
  flex: 1;
  height: 0.875rem;
  background: #f3f4f6;
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.unit-card__stat-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

.unit-card__stat-fill--fir { background: #ef4444; }  /* red-500 */
.unit-card__stat-fill--def { background: #3b82f6; }  /* blue-500 */
.unit-card__stat-fill--man { background: #f97316; }  /* orange-500 */
.unit-card__stat-fill--hp  { background: #22c55e; }  /* green-500 */

.unit-card__stat-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* ── Labelled resource-row section (cost / upkeep / buffs) ───────────────── */
.unit-card__section {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-bottom: 0.75rem;
}

/* Always-rendered placeholder when a section has no content this unit */
.unit-card__section--empty { padding-bottom: 0; }

.unit-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted-fg);
}

.unit-card__resources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  align-items: center;
}

/* ── Building requirements list ───────────────────────────────────────────── */
.unit-card__reqs {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8125rem;
  color: var(--color-foreground);
}

.unit-card__req {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.unit-card__req--missing { color: var(--color-destructive); }

.unit-card__req-name { color: inherit; }
.unit-card__req-level {
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
}

.unit-card__time {
  font-size: 0.75rem;
  color: var(--color-muted-fg);
  text-align: center;
  margin-top: -0.25rem;
}

/* ── Military toolbar (shared by all military pages) ──────────────────────── */
.military-page { padding: 1.5rem; }

.military-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.military-toolbar--rows {
  flex-direction: column;
  align-items: stretch;
}

.military-toolbar__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.military-toolbar__heading { flex: 1; min-width: 0; }

.military-toolbar__search { flex: 1; min-width: 8rem; }

.military-toolbar__heading h1 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.military-toolbar__heading p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-muted-fg);
}

.military-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.military-filter__label {
  font-size: 0.8125rem;
  color: var(--color-muted-fg);
  white-space: nowrap;
}

.military-filter select {
  appearance: none;
  -webkit-appearance: none;
  height: 2.25rem;
  padding: 0 2rem 0 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-input);
  background-color: var(--color-card);
  color: var(--color-foreground);
  font-size: 0.875rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast);
}

.military-filter select:focus-visible { outline: 1px solid var(--color-ring); }

/* ── Units grid ───────────────────────────────────────────────────────────── */
.units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1rem;
  align-items: start;
}

.units-grid .btn { text-transform: uppercase; }

/* ── Sale section ─────────────────────────────────────────────────────────── */
.sale-section { margin-bottom: 2rem; }

.sale-section__header { margin-bottom: 1rem; }

.sale-section__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
}

.sale-card { position: relative; }

.sale-card__badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.7rem;
  padding: 0.2rem 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 1;
}

/* ── Division panel header ────────────────────────────────────────────────── */
.division-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.division-panel__name-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.division-panel__name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-fg);
  margin: 0;
}

/* Pencil icon button — sits on a light page background */
.division-action-btn {
  background: transparent;
  border: none;
  color: var(--color-muted-fg);
  cursor: pointer;
  padding: 0.25rem 0.3rem;
  line-height: 1;
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.division-action-btn:hover {
  color: var(--color-primary);
  background: rgba(245, 158, 11, 0.1);
}

/* ── Unit buffs list ──────────────────────────────────────────────────────── */
.unit-card__buffs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.unit-card__buff {
  font-size: 0.75rem;
  color: var(--color-foreground);
  padding-left: 0.875rem;
  position: relative;
}

.unit-card__buff::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-size: 0.5rem;
  top: 0.2rem;
}

/* ── Military overview unit card (owned units) ───────────────────────────── */
/*
 * 5 subgrid tracks: header / all-bars (equip+lvl+stats+xp) / upkeep / buffs / move-action
 * Parent: .units-grid (same responsive grid as recruitment page)
 */
.unit-ov-card {
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
  padding: 0 1.25rem 1.25rem;
  overflow: hidden;
}

/* Name takes remaining space so the class badge is flush right */
.unit-ov-card .unit-card__name { flex: 1; }

/* Header already has 1rem grid-gap below it; drop the extra padding-bottom */
.unit-ov-card .unit-card__header { padding-bottom: 0; }

/* Level + XP bars + equipment, all in one subgrid track */
.unit-ov-card__levels {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-bottom: 0;
}

/* Yellow fill for level bar */
.unit-ov-card__level-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: #eab308;  /* yellow-500 */
}

/* Purple fill for XP bar */
.unit-ov-card__xp-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: #a855f7;  /* purple-500 */
}

/* Wrapper for equipment label + grid */
.unit-ov-card__equip-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Tiny 2×2 square grid — not full width */
.unit-ov-card__equip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1.5rem);
  gap: 0.25rem;
  width: fit-content;
}

.unit-ov-card__equip-slot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: #d1d5db;  /* gray-300 — empty slot */
}

.unit-ov-card__equip-slot--common    { background: var(--rarity-common-header-bg); border: 1px solid #9ca3af; }
.unit-ov-card__equip-slot--uncommon  { background: var(--rarity-uncommon-header-bg); }
.unit-ov-card__equip-slot--rare      { background: var(--rarity-rare-header-bg); }
.unit-ov-card__equip-slot--epic      { background: var(--rarity-epic-header-bg); }
.unit-ov-card__equip-slot--legendary { background: var(--rarity-legendary-header-bg); }

/* Track 5: move action — button or status badge */
.unit-ov-card__actions {
  display: flex;
  align-items: flex-start;
  padding-top: 0.5rem;
}

/* Inline status badges (IN COMBAT / TRAVELLING / IN MATCHMAKING) */
.unit-ov-card__status-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  white-space: nowrap;
}

/* ── Officer overview card (reserves only, no equipment or combat stats) ── */
.officer-ov-card {
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
  padding: 0 1.25rem 1.25rem;
  overflow: hidden;
}

.officer-ov-card .unit-card__name { flex: 1; }
.officer-ov-card .unit-card__header { padding-bottom: 0; }

/* ============================================================
   SECTION 21 — DETAILED UNIT VIEW MODAL
   Shared popup used on military_overview and military_recruitment.
   Reuses .unit-card__stat-* and .unit-card__buff* from Section 20.
   ============================================================ */

/* Clickable unit name trigger — inherits card name styles, adds hover cue */
.unit-card__name-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  line-height: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s, color 0.15s;
}
.unit-card__name-btn:hover {
  color: var(--color-primary);
  text-decoration-color: currentColor;
}

/* Modal container — wider than the default .modal max-width */
.unit-detail-modal {
  max-width: 82rem;
  width: 95%;
  padding: 0;
  overflow: hidden;
}

/* Close button override — sits over the dark banner image */
.unit-detail-modal__close {
  z-index: 2;
  color: #ffffff;
}
.unit-detail-modal__close:hover {
  color: #d1d5db;
}

/* Cinematic banner (top section) */
.unit-detail-modal__banner {
  position: relative;
  height: 200px;
  overflow: hidden;
}

/* Background image div — dimmed and desaturated like home-banner */
.unit-detail-modal__banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.45) saturate(0.75);
}

/* Gradient fade from transparent at top to dark at bottom for text legibility */
.unit-detail-modal__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
}

/* Text content sits above the gradient overlay */
.unit-detail-modal__banner-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

.unit-detail-modal__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.unit-detail-modal__subtitle {
  font-size: 1rem;
  color: #d1d5db;
  margin-top: 0.25rem;
}

/* Body: two-column grid — stats left, equipment right */
.unit-detail-modal__body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  padding: 2rem;
}

.unit-detail-modal__stats {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.unit-detail-modal__class-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.unit-detail-modal__equipment {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 1×4 row of blank equipment slot placeholders */
.unit-detail-modal__equip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.unit-detail-modal__equip-slot {
  aspect-ratio: 3 / 4;
  background: #f3f4f6;
  border: 2px dashed #d1d5db;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 1.25rem;
  cursor: default;
  user-select: none;
}

/* Clickable equip slot (user-owned unit) */
.unit-detail-modal__equip-slot--clickable {
  cursor: pointer;
  border-color: #d97706;
  color: #d97706;
  transition: background 0.15s;
}
.unit-detail-modal__equip-slot--clickable:hover {
  background: rgba(217, 119, 6, 0.08);
}

/* Equipped item mini-card inside a slot */
.unit-view-equip-card {
  height: 100%;
  font-size: 0.8125rem;
}
.unit-view-equip-card .store-equipment-card__body {
  flex: 1;
  gap: 0.3rem;
  padding: 0.375rem 0.5rem;
}
.unit-view-equip-card .store-equipment-card__name {
  font-size: 0.75rem;
}
.unit-view-equip-card .store-equipment-card__type {
  font-size: 0.625rem;
}
.unit-view-equip-card .store-equipment-card__buff {
  font-size: 0.6875rem;
}
.unit-view-equip-card__unequip-btn {
  margin-top: 0.25rem;
  width: 100%;
  background: transparent;
  border: 1px solid #d1d5db;
  color: #6b7280;
  border-radius: var(--radius-sm);
  padding: 0.125rem 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: default;
  opacity: 0.75;
}

/* Equipment picker sub-modal */
.equip-picker-modal {
  background: #fff;
  border-radius: var(--radius-lg);
  width: 90vw;
  max-width: 56rem;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.equip-picker-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem 0.75rem;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.equip-picker-modal__header-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #111827;
}
.equip-picker-modal__header-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0.25rem 0.375rem;
  line-height: 1;
  border-radius: var(--radius-sm);
}
.equip-picker-modal__header-close:hover { color: #111827; background: #f3f4f6; }
.equip-picker-modal__filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.equip-picker-modal__filters .input {
  height: 1.875rem;
  font-size: 0.8125rem;
  padding: 0.125rem 0.5rem;
  width: auto;
}
#ep-search {
  flex: 1;
  min-width: 5rem;
}
.equip-picker-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  grid-auto-rows: max-content; /* ADD THIS: Forces rows to stay their natural height */
  align-content: start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.equip-picker-modal__empty {
  padding: 1rem 1.25rem;
  color: #6b7280;
  font-size: 0.875rem;
}

/* Equipment picker card layout */
.ep-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* Let the card stretch to match the tallest card in the row */
  min-height: 5rem;
}

.ep-card__lower {
  flex: 1; /* Changed from 'auto' to '1' so this section fills the empty space */
  display: flex;
  flex-direction: column;
}
.ep-card__lower--foil {
  position: relative;
  background-image: url('public/foil.png');
  background-size: auto;
  background-repeat: repeat;
}
.ep-card__lower--foil::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.ep-card__lower--foil > * {
  position: relative;
  z-index: 1;
}
.ep-card__lower .store-equipment-card__body {
  flex: 1;
}
.ep-card__select-btn {
  margin: auto 0.75rem 0.75rem;
}

/* Narrow viewports: stack stats above equipment */
@media (max-width: 640px) {
  .unit-detail-modal__body {
    grid-template-columns: 1fr;
  }
}

/* Top-right action bar — holds rename + disband icons + close button */
.unit-detail-modal__top-actions {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Override .modal__close absolute positioning when inside the actions group */
.unit-detail-modal__top-actions .modal__close {
  position: static;
  top: auto;
  right: auto;
}

/* Icon action buttons (pencil / trash) */
.unit-detail-modal__action-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  padding: 0.25rem 0.3rem;
  line-height: 1;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.unit-detail-modal__action-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}
.unit-detail-modal__action-btn--danger:hover {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.18);
}

/* --------------------------------------------------------------------------
   22. FLOATING ACTION BUTTONS (FAB)
   Circular icon buttons fixed above the app footer on authenticated pages.
   Sit side-by-side inside .fab-cluster; add new FABs as siblings inside it.
   -------------------------------------------------------------------------- */

/*
 * Cluster wrapper — sits just above the footer (height 2.375rem).
 * New FABs are added as direct children; they sit left-to-right.
 */
.fab-cluster {
  position: fixed;
  bottom: calc(2.375rem + 0.625rem); /* footer height + gap */
  right: 0.5rem;
  display: flex;
  flex-direction: row;               /* first child = left button */
  align-items: center;
  gap: 0.5rem;
  z-index: 45;                      /* above main content, below modals */
}

/* Base FAB — 3rem circular button using sidebar palette */
.fab {
  width: 3rem;
  height: 3rem;
  aspect-ratio: 1;
  padding: 0;
  line-height: 1;
  border-radius: var(--radius-full);
  background-color: var(--sidebar-bg);    /* #1a2b4b */
  color: var(--sidebar-text);             /* #d1d5db */
  border: none;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
  flex-shrink: 0;
  text-decoration: none;
}

.fab:hover {
  background-color: var(--sidebar-hover-bg); /* #2c4270 */
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}

.fab svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* Left-side cluster — mirrors .fab-cluster but anchored to the left edge
   of the main content area (just right of the sidebar). */
.fab-cluster--left {
  right: unset;
  left: calc(var(--sidebar-width) + 0.5rem);
}

/* Badge modifier — allows an unread-count chip to overflow the button circle */
.fab--badged {
  overflow: visible;
  position: relative;
}

.fab__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.125rem;
  border-radius: var(--radius-full);
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   SECTION 23 — MISSIONS SIDE PANEL
   Full-height panel that slides in from the right edge of the
   viewport, covering the page behind a blurred backdrop. Hosts a
   vertical list of mission cards (Section 24) driven by the user's
   nations.missions JSON.
   ============================================================ */

/* Full-viewport backdrop behind the panel. Matches .modal-backdrop
   tint but sits one z-index step below so unit-detail modals opened
   from inside the panel layer on top. */
.missions-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9996;
  background: linear-gradient(
    to bottom right,
    rgba(0,0,0,0.45),
    rgba(17,24,39,0.45),
    rgba(0,0,0,0.45)
  );
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility 0s linear var(--transition-base);
}

.missions-panel-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition-base), visibility 0s;
}

/* The panel itself — neutral light surface that matches the rest of
   the app. Mission cards sit on top of this background and read as
   white-on-white with just their own border separating them. */
.missions-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(30rem, 100%);      /* 480px on desktop, full on mobile */
  background: var(--color-background); /* neutral app bg */
  color: var(--color-primary);
  box-shadow: -12px 0 28px rgba(0, 0, 0, 0.25);
  border-left: 1px solid var(--color-border);
  z-index: 9997;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  will-change: transform;
}

.missions-panel.is-open { transform: translateX(0); }

.missions-panel__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  background: #ffffff;
}

.missions-panel__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.01em;
}

.missions-panel__close {
  background: transparent;
  border: none;
  color: var(--color-muted-fg);
  font-size: 1.75rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.missions-panel__close:hover {
  color: var(--color-primary);
  background: rgba(17, 24, 39, 0.06);
}

.missions-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.missions-panel__empty {
  color: var(--color-muted-fg);
  text-align: center;
  padding: 3rem 1rem;
  font-size: 0.9375rem;
}

/* ============================================================
   SECTION 24 — MISSION CARD
   Neutral white card (no rarity wash). Header is a plain flex row
   with the mission name on the left and a small rarity chip on the
   right — mirrors the class-in-top-right pattern from .unit-card.
   ============================================================ */

.mission-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  color: #1f2937;
  flex-shrink: 0;
}

.mission-card__header {
  padding: 0.875rem 1.125rem 0.75rem;
}

.mission-card__header--common    { background-color: var(--rarity-common-header-bg); }
.mission-card__header--uncommon  { background-color: var(--rarity-uncommon-header-bg); }
.mission-card__header--rare      { background-color: var(--rarity-rare-header-bg); }
.mission-card__header--epic      { background-color: var(--rarity-epic-header-bg); }
.mission-card__header--legendary { background-color: var(--rarity-legendary-header-bg); }

.mission-card__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rarity-common-header-text);
}

.mission-card__header--uncommon  .mission-card__title,
.mission-card__header--rare      .mission-card__title,
.mission-card__header--epic      .mission-card__title,
.mission-card__header--legendary .mission-card__title { color: #ffffff; }

/* Body — padded block of rows: continent, description, units, CTA. */
.mission-card__body {
  padding: 0.875rem 1.125rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mission-card__continent {
  margin: 0 0 -0.25rem;
  font-size: 0.8125rem;
  color: var(--color-muted-fg);
  font-weight: 500;
}

.mission-card__description {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #374151;
}

.mission-card__section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mission-card__section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted-fg);
}

.mission-card__units {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.mission-card__rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
}

.mission-card__cta {
  margin-top: 0.25rem;
}

/* Inline spinner used inside CTA buttons (e.g. IN PROGRESS state). */
.btn-spinner {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btn-spin 0.65s linear infinite;
  vertical-align: middle;
  margin-right: 0.375rem;
  flex-shrink: 0;
}

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

/* ============================================================
   SECTION 25 — MISSION UNIT ROW
   Compact unit row used inside a mission card. Left: clickable unit
   name (opens detailed-unit-view modal) with class + spawn meta
   underneath. Right: 5 stat boxes — LVL / FIR / DEF / MAN / HP —
   colour-coded to match .unit-card__stat-fill--* from Section 20.
   ============================================================ */

.mission-unit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-md);
}

.mission-unit-row__info {
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.mission-unit-row__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.2;
}

.mission-unit-row__meta {
  font-size: 0.75rem;
  color: var(--color-muted-fg);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.mission-unit-row__class {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.mission-unit-row__spawn {
  font-size: 0.75rem;
  color: var(--color-muted-fg);
}

/* Five square stat boxes on the right. Colours mirror
   .unit-card__stat-fill--* in Section 20, plus the yellow LVL fill
   used in detailed_unit_view.php. */
.mission-unit-row__stats {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.mission-unit-row__stat-box {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  cursor: default;
  user-select: none;
}

.mission-unit-row__stat-box--lvl { background: #eab308; } /* yellow-500 */
.mission-unit-row__stat-box--fir { background: #ef4444; } /* red-500    */
.mission-unit-row__stat-box--def { background: #3b82f6; } /* blue-500   */
.mission-unit-row__stat-box--man { background: #f97316; } /* orange-500 */
.mission-unit-row__stat-box--hp  { background: #22c55e; } /* green-500  */

/* ═══════════════════════════════════════════════════════════════════════════
   26 — BATTLE PAGE
   ═══════════════════════════════════════════════════════════════════════ */

/* Three-column grid: defenders | middle (future log) | attackers */
.battle-columns {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  align-items: start;
}

.battle-columns__side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Division card */
.battle-division {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--color-card);
}

.battle-division__header {
  padding: 0.625rem 0.875rem;
}
.battle-division__header--defend { background: #1d4ed8; } /* blue-700  */
.battle-division__header--attack { background: #b91c1c; } /* red-700   */

.battle-division__name {
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  text-align: center;
}

.battle-division__nation {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  margin-top: 0.125rem;
  text-align: center;
}

.battle-division__units {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Matchup strength bar — thin line between banner and columns */
.battle-strength-bar {
  display: flex;
  height: 4px;
  width: 100%;
  overflow: hidden;
}

.battle-strength-bar__defend {
  background: #1d4ed8; /* blue-700 — matches defend header */
  height: 100%;
  flex-shrink: 0;
}

.battle-strength-bar__attack {
  background: #b91c1c; /* red-700 — matches attack header */
  height: 100%;
  flex: 1;
}

.battle-resolve-btn {
  gap: 0.4rem;
  align-self: center;
}

.battle-resolve-limit-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.375rem;
  max-width: 16rem;
  align-self: center;
}

.battle-resolve-limit-msg__icon {
  height: 1rem;
  width: auto;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Battle unit rows show the config type name, not class — no uppercase */
.battle-unit-row .mission-unit-row__class {
  text-transform: none;
  letter-spacing: 0;
}

/* Battle save section */
.battle-save-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-bottom: 0.625rem;
  margin-bottom: 0.375rem;
  border-bottom: 1px solid var(--color-border);
}

.battle-save-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.battle-save-action-label {
  font-size: 0.75rem;
  color: var(--color-text);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.battle-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  padding: 0.35rem 0.8rem;
}

.battle-save-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.battle-save-premium-icon {
  height: 1rem;
  width: auto;
}

.battle-save-saved-msg {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: #000000;
  font-weight: 500;
}

.battle-save-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #6b7280;
  cursor: default;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.battle-save-info::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 9999;
}

.battle-save-info:hover::after {
  opacity: 1;
}

/* Battle log column */
.battle-log {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.battle-log__empty {
  color: var(--color-text);
  font-size: 0.8125rem;
  text-align: center;
  padding: 1.5rem 0;
}

.battle-log__ongoing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0.75rem;
  color: var(--color-text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.battle-log__spinner {
  animation: spin 1s linear infinite;
}

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

/* Individual battle log entry */
.battle-log-entry {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-left-color: rgba(255, 255, 255, 0.15);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
}

.battle-log-entry--has-dice {
  padding-right: 1.75rem;
}

.battle-log-entry--informational { border-left-color: #6b7280; }
.battle-log-entry--miss           { border-left-color: #6b7280; }   /* gray-500   */
.battle-log-entry--graze          { border-left-color: #bef264; }   /* lime-300   */
.battle-log-entry--hit            { border-left-color: #fdba74; }   /* orange-300 */
.battle-log-entry--crit           { border-left-color: #ef4444; }   /* red-500    */

.battle-log-entry--role-attacker  { border-left-color: #ef4444; }   /* red-500    */
.battle-log-entry--role-defender  { border-left-color: #60a5fa; }   /* blue-400   */

.battle-log-entry__time {
  font-size: 0.6875rem;
  color: var(--color-text);
  margin-bottom: 0.2rem;
  font-variant-numeric: tabular-nums;
}

.battle-log-entry__text {
  font-size: 0.8125rem;
  color: var(--color-text);
  line-height: 1.45;
}

.battle-log-entry__dmg {
  font-weight: 700;
}

.battle-log-entry__dmg--crit {
  color: #ef4444;
}

.battle-log-entry__unit-link {
  font-size: inherit;
  font-weight: 600;
}

.battle-log-entry__unit-unknown {
  opacity: 0.5;
}

.battle-log-entry__dice-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: none;
  border: none;
  padding: 0.2rem 0.3rem;
  color: #374151;
  font-size: 0.6875rem;
  cursor: pointer;
  line-height: 1;
  border-radius: var(--radius-sm);
  opacity: 0.35;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.battle-log-entry__dice-btn:hover { opacity: 0.85; color: #111827; }

#combat-calc-wrapper .modal__content { padding: 0.875rem 1rem; }
#combat-calc-wrapper .modal__title   { font-size: 0.875rem; margin-bottom: 0.6rem; }

#combat-calc-wrapper .home-gp-popup__row {
  font-size: 0.8125rem;
  padding: 0.2rem 0;
}

.combat-calc__section {
  font-size: 0.8125rem;
  font-variant: normal;
  letter-spacing: normal;
  font-weight: 600;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 0.4rem;
  margin-top: 0.4rem;
  margin-bottom: 0.1rem;
}
.combat-calc__section:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.combat-calc__hit-badge {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
}

.combat-calc__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0.4rem 0;
}

.combat-calc__miss-note {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-align: center;
  padding: 0.3rem 0;
}

/* ============================================================
   SECTION 27 — MAIL INBOX
   Wide two-column modal: message list on the left, viewer on
   the right. Light surface — uses default .modal white bg.
   ============================================================ */

/* Sit below the generic modal stack (9999/10000) so unit-detail
   modals opened from inside the inbox always layer on top. */
#mail-panel-backdrop { z-index: 9997; }
#mail-panel-wrapper  { z-index: 9998; }

.mail-inbox {
  max-width: 62rem;
  width: 95vw;
  height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.mail-inbox__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem 1rem 1.5rem;
  padding-right: 3.5rem; /* clear the close button */
  border-bottom: 1px solid #e5e7eb;
}

.mail-inbox__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: 0.02em;
}

.mail-inbox__body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ── Left: message list ──────────────────────────────────── */

.mail-inbox__list {
  width: 36%;
  min-width: 200px;
  flex-shrink: 0;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
}

.mail-inbox__empty {
  padding: 2.5rem 1.25rem;
  color: #6b7280;
  font-size: 0.9375rem;
  text-align: center;
}

.mail-inbox__item {
  padding: 0.45rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #d1d5db;
  transition: background var(--transition-fast);
}

.mail-inbox__item:hover,
.mail-inbox__item.is-active {
  background: #f9fafb;
}

.mail-inbox__item--unread {
  background: rgba(245, 158, 11, 0.07);
}

.mail-inbox__item--unread:hover,
.mail-inbox__item--unread.is-active {
  background: rgba(245, 158, 11, 0.13);
}

.mail-inbox__item-sender {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-inbox__item-subject {
  font-size: 0.875rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-inbox__item--unread .mail-inbox__item-subject {
  font-weight: 700;
  color: #111827;
}

/* ── Right: message viewer ───────────────────────────────── */

.mail-inbox__viewer {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.mail-inbox__viewer-empty {
  margin: auto;
  color: #6b7280;
  font-size: 0.9375rem;
  text-align: center;
}

.mail-inbox__message-header {
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}

.mail-inbox__message-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}

.mail-inbox__message-subject {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  flex: 1;
}

.mail-inbox__delete-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: #9ca3af;
  font-size: 1rem;
  line-height: 1;
  transition: color var(--transition-fast);
}

.mail-inbox__delete-btn:hover {
  color: #ef4444;
}

.mail-inbox__message-from {
  font-size: 0.875rem;
  color: #6b7280;
}
.mail-inbox__sender-link {
  color: #f59e0b;
  text-decoration: none;
}
.mail-inbox__sender-link:hover {
  text-decoration: underline;
}

.mail-inbox__message-body {
  font-size: 0.9375rem;
  color: #374151;
  line-height: 1.65;
}

/* ── Compose modal ─────────────────────────────────────── */

#mail-compose-backdrop { z-index: 10001; }
#mail-compose-wrapper  { z-index: 10002; }

.mail-compose {
  max-width: 34rem;
  width: 95vw;
}

.mail-compose__recipient-wrap {
  position: relative;
}

.mail-compose__suggestions {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 12rem;
  overflow-y: auto;
  z-index: 100;
}

.mail-compose__suggestions:empty { display: none; }

.mail-compose__suggestion-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background var(--transition-fast);
}

.mail-compose__suggestion-item:last-child { border-bottom: none; }
.mail-compose__suggestion-item:hover { background: #f9fafb; }

.mail-compose__suggestion-nation {
  font-weight: 600;
  color: #111827;
  flex: 1;
}

.mail-compose__suggestion-leader {
  font-size: 0.8125rem;
  color: #9ca3af;
  white-space: nowrap;
  margin-left: 1rem;
}

.mail-compose__textarea {
  height: auto;
  min-height: 8rem;
  resize: vertical;
  font-family: inherit;
}

.mail-compose__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

/* ── Mail markup components ──────────────────────────────── */

.mail-link {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s;
}
.mail-link:hover { text-decoration-color: var(--color-link); }

.mail-unit-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-link);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s;
}

/* ═══════════════════════════════════════════════════════════════════════════
   28 — START MISSION MODAL
   ═══════════════════════════════════════════════════════════════════════ */

/* Each label+control pair */
.mission-start__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.mission-start__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Inline row: label on left, live difficulty name on right */
.mission-start__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mission-start__diff-name {
  font-size: 0.875rem;
  font-weight: 700;
  transition: color 0.15s;
}

/* Division select — full width via .input base, small tweak */
.mission-start__select {
  width: 100%;
}

/* Shown when no eligible divisions exist */
.mission-start__no-divs {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

/* ── Difficulty range slider ─────────────────────────────────────────────── */

.mission-start__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.375rem;
  border-radius: 9999px;
  outline: none;
  cursor: pointer;
  /* initial track gradient — JS overrides via .style.background */
  background: linear-gradient(to right, #22c55e 0%, #e5e7eb 0%);
}

.mission-start__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #d97706;
  border: 2px solid #f5f5f4;
  box-shadow: 0 0 0 2px #d97706;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.mission-start__slider::-moz-range-thumb {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #d97706;
  border: 2px solid #f5f5f4;
  box-shadow: 0 0 0 2px #d97706;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.mission-start__slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.4);
}
.mission-start__slider:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.4);
}

/* Five tick labels below the slider */
.mission-start__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
}

.mission-start__ticks span {
  font-size: 0.6875rem;
  color: #6b7280;
  transition: color 0.15s, font-weight 0.15s;
  text-align: center;
  flex: 1;
}
.mail-unit-link:hover { text-decoration-color: var(--color-link); }

/* ═══════════════════════════════════════════════════════════════════════════
   29 — LOOT CRATE SHOP
   ═══════════════════════════════════════════════════════════════════════ */

/* Token balance display in toolbar */
.crate-balance {
  display: flex;
  align-items: center;
}

/* One section per unit type (Infantry, Armour, …) */
.crate-section {
  margin-bottom: 2.5rem;
}

.crate-section__heading {
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.75rem;
}

/* 3-column grid — collapses to 1 on narrow viewports */
.crate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 48rem) {
  .crate-grid { grid-template-columns: 1fr; }
}

/* Card — flex column so button is always pinned to bottom */
.crate-card {
  display: flex;
  flex-direction: column;
  padding: 0 1.25rem 1.25rem;
  overflow: hidden;
}

.crate-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 0 0.75rem;
}

.crate-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.3;
}

/* Tier pill badge — top-right of the header */
.crate-card__tier-badge {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
}

.crate-card__tier-badge--small  { background: #374151;                      color: #9ca3af; }
.crate-card__tier-badge--medium { background: rgba(96,  165, 250, 0.15);    color: #60a5fa; }
.crate-card__tier-badge--epic   { background: rgba(168,  85, 247, 0.15);    color: #a855f7; }

/* Dark-gradient icon well — mirrors unit-card__image-wrap */
.crate-card__icon-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  margin-bottom: 0.875rem;
  overflow: hidden;
}

.crate-card__icon { font-size: 2.5rem; }

.crate-card__icon--small  { color: #9ca3af; }
.crate-card__icon--medium { color: #60a5fa; }
.crate-card__icon--epic   { color: #a855f7; }

/* Short description text */
.crate-card__description {
  font-size: 0.8125rem;
  color: #9ca3af;
  margin: 0 0 0.875rem;
  line-height: 1.5;
}

/* Generic labelled section (matches unit-card__section pattern) */
.crate-card__section {
  margin-bottom: 0.75rem;
}

.crate-card__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted-fg);
  margin-bottom: 0.375rem;
}

/* Guarantee drop rows */
.crate-card__guarantee-rows {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.crate-card__guarantee-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.6rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.crate-card__guarantee-row--common {
  background: var(--rarity-common-header-bg);
  color: var(--rarity-common-header-text);
}

.crate-card__guarantee-row--rare {
  background: var(--rarity-rare-header-bg);
  color: var(--rarity-rare-header-text);
}

.crate-card__guarantee-row--epic {
  background: var(--rarity-epic-header-bg);
  color: var(--rarity-epic-header-text);
}

/* Buy button — pushed to bottom via margin-top: auto */
.crate-card__btn {
  margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   30 — STORE EQUIPMENT CARD
   ═══════════════════════════════════════════════════════════════════════ */

/* Wide modal variant — overrides the default 28rem cap for multi-card grids */
.modal--wide { max-width: 68rem; }

/* Responsive grid for equipment cards inside the result popup — max 5 per row */
.store-equipment-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  grid-auto-rows: auto;
  gap: 1rem;
  padding-top: 0.25rem;
}

@media (min-width: 64rem) {
  .store-equipment-cards-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Card container */
.store-equipment-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid;
}

/* Rarity-keyed card border only — body inherits neutral card bg */
.store-equipment-card--common    { border-color: var(--rarity-common-border);    }
.store-equipment-card--uncommon  { border-color: var(--rarity-uncommon-border);  }
.store-equipment-card--rare      { border-color: var(--rarity-rare-border);      }
.store-equipment-card--epic      { border-color: var(--rarity-epic-border);      }
.store-equipment-card--legendary { border-color: var(--rarity-legendary-border); }

/* Header — solid rarity colour block */
.store-equipment-card__header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
}

.store-equipment-card__header--common    { background: var(--rarity-common-header-bg);    color: var(--rarity-common-header-text);    }
.store-equipment-card__header--uncommon  { background: var(--rarity-uncommon-header-bg);  color: var(--rarity-uncommon-header-text);  }
.store-equipment-card__header--rare      { background: var(--rarity-rare-header-bg);      color: var(--rarity-rare-header-text);      }
.store-equipment-card__header--epic      { background: var(--rarity-epic-header-bg);      color: var(--rarity-epic-header-text);      }
.store-equipment-card__header--legendary { background: var(--rarity-legendary-header-bg); color: var(--rarity-legendary-header-text); }

/* Equipment name */
.store-equipment-card__name {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}


/* Body */
.store-equipment-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
}

/* Foil variant — foil.png tiled behind body content */
.store-equipment-card__body--foil {
  position: relative;
  background-image: url('public/foil.png');
  background-size: auto;
  background-repeat: repeat;
}

.store-equipment-card__body--foil::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.68);
  pointer-events: none;
}

.store-equipment-card__body--foil > * {
  position: relative;
  z-index: 1;
}

/* Slot type label */
.store-equipment-card__type {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
}

/* Buff list */
.store-equipment-card__buffs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.store-equipment-card__buff {
  font-size: 0.875rem;
  color: #111827;
  line-height: 1.4;
}

/* ── Flip animation ────────────────────────────────────────── */

.equip-flip {
  perspective: 900px;
  cursor: pointer;
  height: 100%;
}

.equip-flip--revealed {
  cursor: default;
}

.equip-flip__inner {
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.equip-flip__front,
.equip-flip__back {
  grid-row: 1;
  grid-column: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.equip-flip__back {
  background: #000000;
  border-radius: var(--radius-md);
  border: 1px solid #1f2937;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.equip-flip__front {
  transform: rotateY(180deg);
  height: 100%;
}

.equip-flip__front .store-equipment-card {
  height: 100%;
}

.equip-flip--revealed .equip-flip__inner {
  transform: rotateY(180deg);
}

/* Rarity glow on hover while facedown — skips common */
.equip-flip[data-rarity="uncommon"]:not(.equip-flip--revealed):hover .equip-flip__back {
  box-shadow: 0 0 14px 3px var(--rarity-uncommon-glow-static);
  border-color: var(--rarity-uncommon-border);
}
.equip-flip[data-rarity="rare"]:not(.equip-flip--revealed):hover .equip-flip__back {
  box-shadow: 0 0 14px 3px var(--rarity-rare-glow-static);
  border-color: var(--rarity-rare-border);
}
.equip-flip[data-rarity="epic"]:not(.equip-flip--revealed):hover .equip-flip__back {
  box-shadow: 0 0 14px 3px var(--rarity-epic-glow-static);
  border-color: var(--rarity-epic-border);
}
.equip-flip[data-rarity="legendary"]:not(.equip-flip--revealed):hover .equip-flip__back {
  box-shadow: 0 0 14px 3px var(--rarity-legendary-glow-static);
  border-color: var(--rarity-legendary-border);
}

/* ============================================================
   31. DISCARD BAR & CARD SELECTION
   ============================================================ */

.store-equipment-card { position: relative; }

.equip-card-cb-label {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.equip-card-cb-label input[type="checkbox"] { display: none; }

.equip-card-cb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  background: #ffffff;
  border: 1.5px solid #9ca3af;
  border-radius: 3px;
  color: transparent;
  font-size: 0.6rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.equip-card-cb-label input:checked ~ .equip-card-cb-icon {
  background: var(--color-amber);
  border-color: var(--color-amber);
  color: #000;
}

.store-equipment-card--selected {
  box-shadow: inset 0 0 0 2px var(--color-amber);
}

.discard-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  background: #ffffff;
  border-top: 1px solid #d1d5db;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  color: #111827;
}

.discard-bar.is-open { transform: translateY(0); }

.discard-bar__label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #111827;
  text-transform: uppercase;
  white-space: nowrap;
}

.discard-bar__refund {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.discard-bar__btn { min-width: 9rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   32 — EQUIPMENT OVERVIEW
   ═══════════════════════════════════════════════════════════════════════ */

/* Wrapping grid — wider cards give more room for buff lists */
.overview-equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

/* Shown when no equipment or no filter matches */
.overview-equipment-grid__empty {
  grid-column: 1 / -1;
  padding: 3rem 1.25rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.9375rem;
  margin: 0;
}

/* Three-dot context menu button — sits to the right of the discard checkbox */
.equip-card-menu-btn {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.65;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}

.equip-card-menu-btn:hover { opacity: 1; }

/* Three-dot context menu button on card cards */
.card-card-menu-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.625rem;
  height: 1.625rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.65;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
  z-index: 11;
}

.card-card-menu-btn:hover { opacity: 1; }

/* Lock icon for equipped items — replaces checkbox + menu btn */
.equip-card-lock-btn {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-amber);
  opacity: 0.8;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}

.equip-card-lock-btn:hover { opacity: 1; }

/* Unit name tag shown on equipped equipment cards */
.store-equipment-card__unit-tag {
  font-size: 0.65rem;
  color: var(--color-amber);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
  margin-bottom: 0.25rem;
}

/* Global equipment context menu (position: fixed, managed by JS) */
.equip-context-menu {
  position: fixed;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 10001;
  min-width: 9rem;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.equip-context-menu.is-open { display: flex; }

.equip-context-menu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-family: inherit;
  color: #374151;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}

.equip-context-menu__item:hover { background: #f3f4f6; }

/* ═══════════════════════════════════════════════════════════════════════════
   33 — HOME PAGE — WIDGET GRID & NATION DESCRIPTION CARD
   ═══════════════════════════════════════════════════════════════════════ */

/* Three-column widget grid below the nation banner */
.home-widgets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  padding: 1.5rem;
  align-items: start;
}

/* ── Nation Description card ─────────────────────────────────────────── */

.home-desc-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem 1.5rem;
}

.home-desc-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.home-desc-card__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
}

.home-desc-card__edit-btn {
  background: none;
  border: none;
  padding: 0.2rem 0.3rem;
  cursor: pointer;
  color: #9ca3af;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}

.home-desc-card__edit-btn:hover {
  color: var(--color-amber);
  background: rgba(245, 158, 11, 0.08);
}

.home-desc-card__body {
  flex: 1;
}

.home-desc-card__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.home-desc-card__placeholder {
  color: #9ca3af;
  font-style: italic;
}

/* ── Edit description modal ──────────────────────────────────────────── */

.home-desc-modal {
  max-width: 38rem;
  width: 92%;
}

.home-desc-modal__textarea {
  width: 100%;
  min-height: 10rem;
  resize: vertical;
  padding: 0.65rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #111827;
  background: #ffffff;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.home-desc-modal__textarea:focus {
  outline: none;
  border-color: var(--color-amber);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.home-desc-modal__meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.4rem;
  margin-bottom: 1rem;
}

.home-desc-modal__char-count {
  font-size: 0.8rem;
  color: #9ca3af;
}

.home-desc-modal__save {
  width: 100%;
}

/* ── Tutorial card ───────────────────────────────────────────── */

.tutorial-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem 1.5rem;
  margin-top: 1.25rem;
}

.tutorial-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.tutorial-card__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
}

.tutorial-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tutorial-card__para {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-foreground);
}

.tutorial-card__rewards-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.tutorial-card__rewards-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
}

.tutorial-card__rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: center;
}

.tutorial-card__objectives-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--color-border);
}

.tutorial-card__objectives-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
}

.tutorial-card__objectives-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tutorial-card__objective-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-foreground);
}

.tutorial-card__objective-icon {
  font-size: 0.45rem;
  color: var(--color-muted-fg);
  flex-shrink: 0;
}

.tutorial-card__objective-item--done .tutorial-card__objective-icon {
  color: var(--color-amber);
}

.tutorial-card__btn {
  margin-top: 0.75rem;
}

/* ============================================================
   33b. REFERRAL CARD  (home page left column)
   ============================================================ */

.referral-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem 1.5rem;
  margin-top: 1.25rem;
}

.referral-card__header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.referral-card__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
}

.referral-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.referral-card__para {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-foreground);
}

.referral-card__reward-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.referral-card__reward-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-amber);
}

.referral-card__reward-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-foreground);
}

/* ============================================================
   34. FACTORY CARD  (collect page + home widget)
   ============================================================ */

/* ── Factory card ───────────────────────────────────────────────────────── */
.factory-card {
  display: flex;
  flex-direction: column;
}

.factory-card--hidden { display: none !important; }

.factory-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem 0.75rem;
}

.factory-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.3;
}

.factory-card__owned {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  color: var(--color-muted-fg);
  white-space: nowrap;
}

/*
 * Body: 6-row grid so every section aligns across cards in the same row.
 *   row 1 — invisible spacer (1fr) — absorbs extra height
 *   row 2 — production capacity bar
 *   row 3 — production capacity input
 *   row 4 — input resources
 *   row 5 — output resources
 *   row 6 — collect button
 */
.factory-card__body {
  padding: 0 1.25rem 1.25rem;
  display: grid;
  grid-template-rows: 1fr auto auto auto auto auto;
  gap: 0.625rem;
  flex: 1;
}

.factory-card__spacer { /* empty, 1fr */ }

.factory-card__section {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.factory-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted-fg);
}

.factory-card__resources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  align-items: center;
}

.factory-card__qty {
  width: 100%;
  box-sizing: border-box;
}

/* ── Production capacity bar ─────────────────────────────────────────────── */
.cap-bar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.cap-bar__value {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-muted-fg);
}

.cap-bar__track {
  width: 100%;
  height: 0.375rem;
  background: rgba(255,255,255,0.08);
  border-radius: 9999px;
  overflow: hidden;
}

.cap-bar__fill {
  height: 100%;
  border-radius: 9999px;
}

/* ── Factory card header right group ─────────────────────────────────────── */
.factory-card__header-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* Demolish (trash) icon button */
.factory-card__demolish-btn {
  background: transparent;
  border: none;
  color: var(--color-muted-fg);
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  line-height: 1;
  font-size: 0.7rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  opacity: 0.45;
}
.factory-card__demolish-btn:hover {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.15);
  opacity: 1;
}

/* All buttons in the factories grid / widget are uppercase */
.factories-grid .btn,
.factory-widget__cards .btn { text-transform: uppercase; }

/* ── Grid ────────────────────────────────────────────────────────────────── */
.factories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1rem;
  align-items: stretch;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.factories-page { padding: 1.5rem; }

.factories-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.factories-toolbar__heading { flex: 1; min-width: 0; }

.factories-toolbar__heading h1 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.factories-toolbar__heading p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-muted-fg);
}

.factories-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.factories-filter__label {
  font-size: 0.8125rem;
  color: var(--color-muted-fg);
  white-space: nowrap;
}

.factories-filter select {
  appearance: none;
  -webkit-appearance: none;
  height: 2.25rem;
  padding: 0 2rem 0 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-input);
  background-color: var(--color-card);
  color: var(--color-foreground);
  font-size: 0.875rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast);
}

.factories-filter select:focus-visible { outline: 1px solid var(--color-ring); }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.factories-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-muted-fg);
  font-size: 0.9375rem;
}

/* ============================================================
   35. FACTORY WIDGET  (home page right column)
   ============================================================ */

.factory-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.factory-widget__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
}

.factory-widget__view-all {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-amber);
  text-decoration: none;
}

.factory-widget__view-all:hover {
  text-decoration: underline;
}

.factory-widget__empty {
  font-size: 0.8125rem;
  color: var(--color-muted-fg);
  margin: 0;
}

.factory-widget__cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ============================================================
   36. ACTION LOG WIDGET  (home page centre column)
   ============================================================ */

.action-log-card {
  display: flex;
  flex-direction: column;
}

.action-log-card__header {
  display: flex;
  align-items: center;
  padding: 1rem 1rem 0.5rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.action-log-card__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
}

.action-log-card__body {
  max-height: 320px;
  overflow-y: auto;
  padding: 0.25rem 1rem;
}

.action-log-entry {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-border);
}

.action-log-entry:last-child {
  border-bottom: none;
}

.action-log-entry__time {
  font-size: 0.6875rem;
  color: var(--color-muted-fg);
  margin-bottom: 0.25rem;
}

.action-log-entry__text {
  font-size: 0.9375rem;
  color: var(--color-foreground);
  line-height: 1.5;
}

.action-log-card__empty {
  font-size: 0.8125rem;
  color: var(--color-muted-fg);
  margin: 0.75rem 0;
}

.action-log-card__footer {
  border-top: 1px solid var(--color-border);
  padding-top: 0.625rem;
  margin-top: 0.25rem;
  text-align: center;
}

.action-log-card__more-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-amber);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.action-log-card__more-btn:hover {
  opacity: 0.75;
}

/* ============================================================
   37. CARD PACK SHOP
   ============================================================ */

/* Empty state — shown when no packs are currently in range */
.pack-shop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 5rem 1rem;
  text-align: center;
}

.pack-shop-empty__icon {
  font-size: 3rem;
  color: var(--color-muted-fg);
  margin-bottom: 0.5rem;
}

.pack-shop-empty__text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

.pack-shop-empty__sub {
  font-size: 0.875rem;
  color: var(--color-muted-fg);
  margin: 0;
}

/* Pack section — wraps heading + date + card grid */
.pack-section {
  margin-bottom: 2.5rem;
}

.pack-section__info {
  margin-bottom: 0.875rem;
}

.pack-section__heading-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pack-section__heading {
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.pack-section__coming-soon {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  background: rgba(251, 191, 36, 0.15);
  color: #d97706;
}

.pack-section__dates {
  font-size: 0.8125rem;
  color: var(--color-muted-fg);
  margin: 0.3rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Card count display inside pack card */
.pack-card__card-count {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* ============================================================
   38. STORE CARD CARD
   ============================================================ */

.store-card-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: #ffffff;
  height: 100%;
}

.store-card-card--common     { border-color: var(--rarity-common-border); }
.store-card-card--uncommon   { border-color: var(--rarity-uncommon-border); }
.store-card-card--rare       { border-color: var(--rarity-rare-border); }
.store-card-card--epic       { border-color: var(--rarity-epic-border); }
.store-card-card--legendary  { border-color: var(--rarity-legendary-border); }

.store-card-card__header {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 0.625rem 2rem 0.625rem 0.875rem;
}

.store-card-card__header--common     { background: var(--rarity-common-header-bg);    color: var(--rarity-common-header-text);    }
.store-card-card__header--uncommon   { background: var(--rarity-uncommon-header-bg);  color: var(--rarity-uncommon-header-text);  }
.store-card-card__header--rare       { background: var(--rarity-rare-header-bg);      color: var(--rarity-rare-header-text);      }
.store-card-card__header--epic       { background: var(--rarity-epic-header-bg);      color: var(--rarity-epic-header-text);      }
.store-card-card__header--legendary  { background: var(--rarity-legendary-header-bg); color: var(--rarity-legendary-header-text); }

.store-card-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.store-card-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
}

.store-card-card__footer {
  padding: 0 0.875rem 0.875rem;
}

.store-card-card__body--foil {
  position: relative;
  background-image: url('public/foil.png');
  background-size: auto;
  background-repeat: repeat;
}

.store-card-card__body--foil::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.68);
  pointer-events: none;
}

.store-card-card__body--foil > * {
  position: relative;
  z-index: 1;
}

.store-card-card__set {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
}

.store-card-card__rewards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.store-card-card__reward {
  font-size: 0.875rem;
  color: #111827;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

/* ============================================================
   39 — MY CARDS PAGE
   ============================================================ */

/* ── Cards overview grid ── */
.overview-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  padding: 1.5rem;
}

/* ── Overview card card ── */
.overview-card-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.overview-card-card--empty { opacity: 0.5; }
.overview-card-card .store-card-card { flex: 1; }

.overview-card-card__count {
  position: absolute;
  top: 0.25rem;
  right: 1.875rem;
  background: var(--color-link);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  z-index: 10;
  line-height: 1.5;
  min-width: 1.25rem;
  text-align: center;
}

/* ── Complete set card ── */
.complete-set-card {
  display: flex;
  flex-direction: column;
}
.store-card-card__header--complete {
  background: #d97706;
  color: #ffffff;
}

.equip-flip__front .store-card-card { height: 100%; }

.complete-set-card__completions {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-muted-fg);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ============================================================
   40 — CONSTRUCTION QUEUE PANEL
   Centred modal opened by [data-open-cq-panel]. Groups queue
   items by type (Buildings, Factories, Units, Officers) with
   live countdown timers. See components/construction_queue_panel.php.
   ============================================================ */

.cq-modal .modal__body {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 1rem;
}

.cq-section {
  margin-bottom: 1.25rem;
}
.cq-section:last-child {
  margin-bottom: 0;
}

.cq-section__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
  margin-bottom: 0.5rem;
}

.cq-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-border);
}
.cq-item:last-child {
  border-bottom: none;
}

.cq-item__name {
  font-size: 0.9375rem;
  color: #111827;
}

.cq-item__qty {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #d97706;
}

.cq-item__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  flex-shrink: 0;
  margin-left: 1rem;
}

.cq-item__completion {
  font-size: 0.75rem;
  color: var(--color-muted-fg);
}

.cq-item__countdown {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #d97706;
}

.cq-empty {
  text-align: center;
  font-style: italic;
  color: var(--color-muted-fg);
  padding: 2rem 0;
  font-size: 0.9375rem;
}

/* ============================================================
   41 — CRAFTING PAGE
   Equipment crafting UI. Organised by crafting building; each
   building section shows equipment recipe cards (with a CRAFT
   button) and an informational battle juice panel.
   See crafting.php and components/crafting_equipment_card.php.
   ============================================================ */

.crafting-page {
  padding: 1.5rem;
}

/* ── Toolbar ── */
.crafting-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.crafting-toolbar__heading {
  flex: 1;
  min-width: 0;
}

.crafting-toolbar__heading h1 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.crafting-toolbar__heading p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-muted-fg);
}

/* ── Building section ── */
.craft-building-section {
  margin-bottom: 2.5rem;
}

.craft-building-section__heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-border);
}

.craft-building-section__subheading {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
  margin: 0 0 0.75rem;
}

.craft-building-section__subheading--bj {
  margin-top: 1.5rem;
}

/* ── Cards grid ── */
.crafting-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

/* ── Crafting equipment card ── */
.crafting-equipment-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #ffffff;
}

.crafting-equipment-card--common    { border-color: var(--rarity-common-border); }
.crafting-equipment-card--uncommon  { border-color: var(--rarity-uncommon-border); }
.crafting-equipment-card--rare      { border-color: var(--rarity-rare-border); }
.crafting-equipment-card--epic      { border-color: var(--rarity-epic-border); }
.crafting-equipment-card--legendary { border-color: var(--rarity-legendary-border); }

/* ── Card header ── */
.crafting-equipment-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--rarity-common-header-bg);
  color: var(--rarity-common-header-text);
}

.crafting-equipment-card__header--common    { background: var(--rarity-common-header-bg);    color: var(--rarity-common-header-text); }
.crafting-equipment-card__header--uncommon  { background: var(--rarity-uncommon-header-bg);  color: var(--rarity-uncommon-header-text); }
.crafting-equipment-card__header--rare      { background: var(--rarity-rare-header-bg);      color: var(--rarity-rare-header-text); }
.crafting-equipment-card__header--epic      { background: var(--rarity-epic-header-bg);      color: var(--rarity-epic-header-text); }
.crafting-equipment-card__header--legendary { background: var(--rarity-legendary-header-bg); color: var(--rarity-legendary-header-text); }

.crafting-equipment-card__name {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  min-width: 0;
}

.crafting-equipment-card__rarity-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Card body ── */
.crafting-equipment-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  flex: 1;
}

.crafting-equipment-card__type {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
}

/* ── Stats list ── */
.crafting-equipment-card__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.crafting-equipment-card__stat {
  font-size: 0.8125rem;
  color: var(--color-primary);
}

.crafting-equipment-card__stat--random {
}

/* ── Cost section ── */
.crafting-equipment-card__cost-section {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
}

.crafting-equipment-card__cost-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
  margin-bottom: 0.35rem;
}

.crafting-equipment-card__costs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}

/* ── Craft button ── */
.crafting-equipment-card__btn {
  margin: 0 0.75rem 0.75rem;
  font-size: 0.8125rem;
}

/* ── Empty state ── */
.crafting-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-muted-fg);
  font-style: italic;
  font-size: 0.9375rem;
}

/* ============================================================
   42 — CONFLICT PAGE
   Active battles list. Each .conflict-card shows a battle's
   name, type badge, continent, a 3px strength bar (blue =
   defenders, red = attackers), and per-side belligerent lists.
   See conflict.php.
   ============================================================ */

.conflict-page {
  padding: 1.5rem;
}

.conflicts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.5rem;
  align-items: start;
}

/* ── Card container ─────────────────────────────────────────── */
.conflict-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

/* ── Header: title + type badge + continent ─────────────────── */
.conflict-card__header {
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.conflict-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.conflict-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary);
  flex: 1;
  min-width: 0;
}

.conflict-card__title-link {
  color: inherit;
  text-decoration: none;
}
.conflict-card__title-link:hover {
  text-decoration: underline;
}

.conflict-card__continent {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-muted-fg);
}

/* ── Type badges ─────────────────────────────────────────────── */
.conflict-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-md);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}
.conflict-badge--war {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}
.conflict-badge--mission {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}
.conflict-badge--peacekeeping {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}
.conflict-badge--mtl {
  background: rgba(168, 85, 247, 0.15);
  color: #9333ea;
}

/* ── Strength bar ────────────────────────────────────────────── */
.conflict-card__strength-bar {
  display: flex;
  height: 3px;
  width: 100%;
  overflow: hidden;
  background: var(--color-border);
  flex-shrink: 0;
}
.conflict-card__strength-defend {
  background: #1d4ed8;
  height: 100%;
  flex-shrink: 0;
  min-width: 2px;
}
.conflict-card__strength-attack {
  background: #b91c1c;
  height: 100%;
  flex: 1;
  min-width: 2px;
}

/* ── Sides (defenders + attackers) ──────────────────────────── */
.conflict-card__sides {
  display: flex;
  flex-direction: row;
  flex: 1;
  gap: 0;
  padding: 1.25rem;
  align-items: stretch;
}

.conflict-card__side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  min-width: 0;
}
.conflict-card__side--defend {
  border-left: 3px solid #1d4ed8;
  background: rgba(29, 78, 216, 0.04);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: none;
}
.conflict-card__side--attack {
  border-right: 3px solid #b91c1c;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border-left: none;
}

.conflict-card__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-muted-fg);
  padding: 0 0.4rem;
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface, transparent);
}

.conflict-card__side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.conflict-card__side-header--defend { color: #1d4ed8; }
.conflict-card__side-header--attack { color: #b91c1c; }

.conflict-card__side-title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

.conflict-card__side-strength {
  font-size: 0.8125rem;
  color: var(--color-muted-fg);
  font-weight: 500;
  flex-shrink: 0;
}

.conflict-card__side-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.conflict-card__involved-name {
  font-size: 0.8125rem;
  color: var(--color-card-fg, var(--color-primary));
  display: block;
  line-height: 1.4;
}
.conflict-card__involved-name--empty {
  color: var(--color-muted-fg);
}
.conflict-card__involved-link {
  color: var(--color-card-fg, var(--color-primary));
  text-decoration: none;
}
.conflict-card__involved-link:hover {
  text-decoration: underline;
}

/* ── Footer: CTA button ──────────────────────────────────────── */
.conflict-card__footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.conflict-card__cta {
  width: 100%;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ── Empty state ─────────────────────────────────────────────── */
.conflict-empty {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  color: var(--color-muted-fg);
}

/* ── Section heading (Battles / Wars) ───────────────────────── */
.conflict-section {
  margin-bottom: 2.5rem;
}

.conflict-section__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted-fg);
  margin: 0 0 1rem;
}

/* ── War card — casus belli ──────────────────────────────────── */
.war-card__casus-belli {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-muted-fg);
  font-style: italic;
  line-height: 1.45;
}

/* ── War card — battle links footer ─────────────────────────── */
.war-card__battles {
  padding: 0.875rem 1.25rem 1.25rem 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.war-card__battles-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-muted-fg);
}

.war-card__battle-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.war-card__battle-link {
  font-size: 0.8125rem;
  color: var(--color-card-fg, var(--color-primary));
  text-decoration: none;
  line-height: 1.4;
}
.war-card__battle-link:hover {
  text-decoration: underline;
}

/* =============================================================
   43. SEARCH PANEL
   Modal triggered by the search FAB in the right FAB cluster.
   Light background — no dark mode.
   ============================================================= */

.search-modal {
  max-width: 32rem;
  width: 90%;
}

/* ── Section label (Nations / Alliances divider) ─────────────── */
.search-modal__section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted-fg);
  padding: 0.5rem 0.75rem 0.25rem;
}

/* ── Alliance icon placeholder ───────────────────────────────── */
.search-result-item__alliance-icon {
  width: 48px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted-fg);
  font-size: 1.125rem;
  flex-shrink: 0;
}

/* ── Input row ───────────────────────────────────────────────── */
.search-modal__input-wrap {
  position: relative;
  margin-bottom: 0.75rem;
}

.search-modal__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted-fg);
  pointer-events: none;
}

.search-modal__input {
  padding-left: 2.25rem;
}

/* ── Results list ────────────────────────────────────────────── */
.search-modal__results {
  display: flex;
  flex-direction: column;
  max-height: 22rem;
  overflow-y: auto;
  gap: 0.25rem;
}

.search-modal__hint {
  font-size: 0.875rem;
  color: var(--color-muted-fg);
  text-align: center;
  padding: 1.5rem 0;
}

/* ── Result card ─────────────────────────────────────────────── */
.search-result-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}

.search-result-item:hover {
  background: #f3f4f6;
  text-decoration: none;
}

.search-result-item__flag {
  width: 48px;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  object-fit: contain;
}

.search-result-item__info {
  flex: 1;
  min-width: 0;
}

.search-result-item__nation {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-primary);
}

.search-result-item__leader {
  font-size: 0.8125rem;
  color: var(--color-muted-fg);
}

.search-result-item__arrow {
  color: var(--color-muted-fg);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   43. ACHIEVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Alliance membership line on nation description card */
.home-desc-card__alliance-line {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

.home-desc-card__alliance-line a {
  color: var(--color-link);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.home-desc-card__alliance-line a:hover {
  color: #f59e0b;
  text-decoration: underline;
}

/* Link on nation description card */
.home-desc-card__achievements-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.home-desc-card__achievements-link:hover {
  color: #f59e0b;
  text-decoration: underline;
}

/* ── Diplomacy card ───────────────────────────────────────────────────────── */

.diplomacy-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.diplomacy-war-modal__warning {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  color: var(--color-muted-fg);
}

.diplomacy-war-modal__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.diplomacy-war-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  margin-top: 1rem;
}

/* ── Surrender modal sections ────────────────────────────────────────────── */

.surrender-section__heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.375rem;
}

.surrender-section__desc {
  font-size: 0.875rem;
  color: var(--color-muted-fg);
  margin: 0 0 0.875rem;
}

.surrender-section__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.surrender-section__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  margin-top: 0.875rem;
}

.surrender-current-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
  font-size: 0.875rem;
}

/* Achievements toolbar layout */
.achievements-toolbar {
  padding: 1.5rem 1.5rem 0;
}

.achievements-toolbar .tabs-list {
  height: auto;
  flex-wrap: wrap;
}

/* Achievement grid */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  align-items: start;
}

/* Achievement card */
.achievement-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  transition: opacity var(--transition-fast), filter var(--transition-fast);
}

.achievement-card--locked {
  opacity: 0.42;
  filter: grayscale(55%);
}

.achievement-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.achievement-card__header--common    { background-color: var(--rarity-common-header-bg); }
.achievement-card__header--uncommon  { background-color: var(--rarity-uncommon-header-bg); }
.achievement-card__header--rare      { background-color: var(--rarity-rare-header-bg); }
.achievement-card__header--epic      { background-color: var(--rarity-epic-header-bg); }
.achievement-card__header--legendary { background-color: var(--rarity-legendary-header-bg); }

.achievement-card__name {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.3;
}

.achievement-card__header--uncommon .achievement-card__name,
.achievement-card__header--rare     .achievement-card__name,
.achievement-card__header--epic     .achievement-card__name,
.achievement-card__header--legendary .achievement-card__name { color: #ffffff; }

.achievement-card__category-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d97706;
  background: rgba(217, 119, 6, 0.1);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.achievement-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem 1rem;
  flex: 1;
}

.achievement-card__desc {
  font-size: 0.875rem;
  color: var(--color-muted-fg);
  line-height: 1.45;
  margin: 0;
}

.achievement-card__pct {
  font-size: 0.75rem;
  color: var(--color-muted-fg);
  margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   44. AUCTION HOUSE
   ═══════════════════════════════════════════════════════════════════════════ */

.auction-eq-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

/* Rarity borders */
.auction-eq-card--common    { border-color: var(--rarity-common-border);    }
.auction-eq-card--uncommon  { border-color: var(--rarity-uncommon-border);  }
.auction-eq-card--rare      { border-color: var(--rarity-rare-border);      }
.auction-eq-card--epic      { border-color: var(--rarity-epic-border);      }
.auction-eq-card--legendary { border-color: var(--rarity-legendary-border); }

/* Header */
.auction-eq-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
}

.auction-eq-card__header--common    { background: var(--rarity-common-header-bg);    }
.auction-eq-card__header--uncommon  { background: var(--rarity-uncommon-header-bg);  }
.auction-eq-card__header--rare      { background: var(--rarity-rare-header-bg);      }
.auction-eq-card__header--epic      { background: var(--rarity-epic-header-bg);      }
.auction-eq-card__header--legendary { background: var(--rarity-legendary-header-bg); }

/* Name button */
.auction-eq-card__name-btn {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: var(--rarity-common-header-text);
  transition: opacity 0.15s;
}

.auction-eq-card__header--uncommon  .auction-eq-card__name-btn,
.auction-eq-card__header--rare      .auction-eq-card__name-btn,
.auction-eq-card__header--epic      .auction-eq-card__name-btn,
.auction-eq-card__header--legendary .auction-eq-card__name-btn { color: #ffffff; }

.auction-eq-card__name-btn:hover { opacity: 0.8; text-decoration: underline; }

/* Foil badge inline in header */
.auction-eq-card__foil-badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.18);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.4rem;
  white-space: nowrap;
  color: inherit;
}

/* Body */
.auction-eq-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.875rem;
  flex: 1;
}

/* Foil body variant */
.auction-eq-card__body--foil {
  position: relative;
  background-image: url('public/foil.png');
  background-size: auto;
  background-repeat: repeat;
}
.auction-eq-card__body--foil::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.68);
  pointer-events: none;
}
.auction-eq-card__body--foil > * {
  position: relative;
  z-index: 1;
}

/* Section blocks */
.auction-eq-card__section {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.auction-eq-card__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted-fg);
}

.auction-eq-card__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-link);
  text-decoration: none;
}
.auction-eq-card__link:hover { text-decoration: underline; }

.auction-eq-card__no-bids {
  font-size: 0.875rem;
  color: var(--color-muted-fg);
  font-style: italic;
}

/* Price rows */
.auction-eq-card__price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}

.auction-eq-card__price-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-foreground);
}

/* Bidding controls */
.auction-eq-card__bidding {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}

.auction-eq-card__bid-input {
  flex: 1 1 0%;
  min-width: 4rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.8125rem;
  border: 1px solid var(--color-input);
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: var(--shadow-sm);
}
.auction-eq-card__bid-input:focus-visible { outline: 1px solid var(--color-ring); }

/* Expiry line */
.auction-eq-card__expiry {
  font-size: 0.8125rem;
  color: var(--color-muted-fg);
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.auction-eq-card__expiry strong {
  color: var(--color-foreground);
  font-weight: 600;
}

/* ============================================================
   44. TRADE HISTORY WIDGET  (home page / view_nation centre column)
   ============================================================ */

.th-widget-card {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.th-widget-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 0.5rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.th-widget-card__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
}

.th-widget-card__view-all {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.th-widget-card__view-all:hover {
  color: #b45309; /* amber-700 */
  text-decoration: none;
}

.th-widget-card__body {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.125rem 1rem;
}

.th-widget-card__empty {
  font-size: 0.8125rem;
  color: var(--color-muted-fg);
  margin: 0.75rem 0;
}

/* Each trade row: main entry line + date line */
.th-widget-row {
  border-bottom: 1px solid var(--color-border);
  padding: 0.5rem 0;
}

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

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

.th-widget-entry__left {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  flex: 1;
}

.th-widget-entry__badge {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  text-transform: uppercase;
}

.th-widget-entry__badge--buy  { background: #dbeafe; color: #2563eb; }
.th-widget-entry__badge--sell { background: #dcfce7; color: #16a34a; }

.th-widget-entry__right {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.th-widget-entry__amount {
  font-size: 0.75rem;
  color: var(--color-muted-fg);
}

.th-widget-entry__date {
  font-size: 0.6875rem;
  color: var(--color-muted-fg);
  margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
   23. BAN OVERLAY
   Full-screen overlay injected by db_connection.php when the authenticated
   user's account is suspended. Sits above all page content; non-dismissable.
   -------------------------------------------------------------------------- */
.ban-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(6px);
}

.ban-overlay-wrapper {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.ban-overlay-modal {
  max-width: 26rem;
  width: 90%;
  text-align: center;
}

.ban-overlay-modal .modal__content {
  padding: 2rem 1.5rem;
}

.ban-overlay__icon {
  font-size: 3rem;
  color: #ef4444;
  margin-bottom: 1rem;
}

.ban-overlay__duration {
  color: #d97706;
  font-weight: 700;
}

.ban-overlay__reason {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
  margin: 0.25rem 0 1.75rem;
}

/* --------------------------------------------------------------------------
   24. LOGIN ACTIVITY WIDGET
   Moderator-only widget on view_nation.php. Mirrors the action-log-card
   layout: scrollable body, entry-per-row with timestamp + resolved location.
   -------------------------------------------------------------------------- */
.login-activity-card {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.login-activity-card__header {
  display: flex;
  align-items: center;
  padding: 1rem 1rem 0.5rem;
  margin-bottom: 0.25rem;
}

.login-activity-card__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
}

.login-activity-card__body {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.125rem 1rem;
}

.login-activity-card__empty {
  font-size: 0.8125rem;
  color: var(--color-muted-fg);
  margin: 0;
}

.login-activity-entry {
  border-bottom: 1px solid var(--color-border);
  padding: 0.5rem 0;
}

.login-activity-entry:last-child {
  border-bottom: none;
}

.login-activity-entry__time {
  font-size: 0.6875rem;
  color: var(--color-muted-fg);
  margin-bottom: 0.25rem;
}

.login-activity-entry__location {
  font-size: 0.8125rem;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.login-activity-entry__location i {
  color: #d97706;
  font-size: 0.75rem;
}

.login-activity-entry__ip {
  font-size: 0.6875rem;
  color: var(--color-muted-fg);
  margin-top: 0.15rem;
  padding-left: 1.1rem;
}