/* 6OAT — Greatest of All Time
   Full-viewport atmospheric landing (no scroll). Steel + gunmetal palette. */

*, *::before, *::after { box-sizing: border-box; }

/* HTML `hidden` attribute should always win over CSS display rules. */
[hidden] { display: none !important; }

:root {
  --bg-0: #050608;
  --bg-1: #08090b;
  --bg-2: #101215;
  /* Polished-steel palette (replaces old gold). Keeping var names for continuity. */
  --gold-0: #e8ebef;   /* silver highlight */
  --gold-1: #b8bcc4;   /* light steel */
  --gold-2: #6d7178;   /* mid steel */
  --gold-3: #3a3d43;   /* dark gunmetal */
  --cream: #c8ccd1;    /* body text */
  --ember: #7a7f87;    /* muted accent */
  --ember-hot: #b8bcc4;
  --ink: #0a0b0d;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--bg-1);
  color: var(--cream);
  font-family: "Rajdhani", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  position: fixed;
  inset: 0;
  overscroll-behavior: none;
}

/* === Battlefield backdrop === */
.battlefield {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #030405 0%, #06080a 55%, #0b0d10 100%);
  pointer-events: none;
  overflow: hidden;
}

/* Terrain image — aggressively desaturated + darkened so it reads as gunmetal fog,
   not a red glow.  Removes the crimson palette without touching the source PNG. */
.battlefield::before {
  content: "";
  position: absolute;
  inset: -4%;
  background-image: url('/battlefield.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:
    calc(50% + var(--px, 0) * 18px)
    calc(50% + var(--py, 0) * 14px);
  filter:
    saturate(0.18)
    brightness(0.42)
    contrast(1.25);
  transition:
    background-position 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 1200ms ease;
  will-change: background-position;
}

/* Sharp, static dark atmospheric wash — replaces the crimson bloom */
.battlefield::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 70% at 50% 100%, rgba(10, 12, 15, 0.85) 0%, rgba(10, 12, 15, 0) 60%),
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(6, 8, 10, 0.70) 0%, rgba(6, 8, 10, 0) 55%);
  pointer-events: none;
  transition: opacity 1200ms ease;
}

/* Ember particles — retuned to cold dust/spark, low opacity */
.embers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 1200ms ease;
}

.embers span {
  position: absolute;
  bottom: -20px;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle,
    rgba(220, 225, 232, 0.8) 0%,
    rgba(140, 145, 155, 0.35) 45%,
    transparent 72%);
  border-radius: 50%;
  opacity: 0;
  animation: rise 11s linear infinite;
  will-change: transform, opacity;
}

.embers span:nth-child(1)  { left:  4%; animation-delay: 0s;   animation-duration: 10s; }
.embers span:nth-child(2)  { left:  9%; animation-delay: 2.4s; animation-duration: 12s; width: 2px; height: 2px; }
.embers span:nth-child(3)  { left: 14%; animation-delay: 5.1s; animation-duration: 11s; }
.embers span:nth-child(4)  { left: 21%; animation-delay: 1.2s; animation-duration: 13s; width: 4px; height: 4px; }
.embers span:nth-child(5)  { left: 27%; animation-delay: 3.8s; animation-duration: 10.5s; }
.embers span:nth-child(6)  { left: 33%; animation-delay: 0.6s; animation-duration: 11.5s; width: 2px; height: 2px; }
.embers span:nth-child(7)  { left: 39%; animation-delay: 4.2s; animation-duration: 12s; }
.embers span:nth-child(8)  { left: 45%; animation-delay: 6.0s; animation-duration: 11s; width: 4px; height: 4px; }
.embers span:nth-child(9)  { left: 52%; animation-delay: 2.0s; animation-duration: 13s; }
.embers span:nth-child(10) { left: 58%; animation-delay: 5.5s; animation-duration: 10s; width: 2px; height: 2px; }
.embers span:nth-child(11) { left: 63%; animation-delay: 1.8s; animation-duration: 11s; }
.embers span:nth-child(12) { left: 69%; animation-delay: 4.6s; animation-duration: 12s; width: 3px; height: 3px; }
.embers span:nth-child(13) { left: 75%; animation-delay: 0.9s; animation-duration: 11.5s; }
.embers span:nth-child(14) { left: 81%; animation-delay: 3.3s; animation-duration: 13s; width: 2px; height: 2px; }
.embers span:nth-child(15) { left: 86%; animation-delay: 5.8s; animation-duration: 10s; }
.embers span:nth-child(16) { left: 91%; animation-delay: 2.7s; animation-duration: 11s; width: 4px; height: 4px; }
.embers span:nth-child(17) { left: 96%; animation-delay: 4.9s; animation-duration: 12s; }
.embers span:nth-child(18) { left: 30%; animation-delay: 7.0s; animation-duration: 10.5s; width: 2px; height: 2px; }
.embers span:nth-child(19) { left: 55%; animation-delay: 6.5s; animation-duration: 11s; }
.embers span:nth-child(20) { left: 78%; animation-delay: 7.5s; animation-duration: 12s; width: 3px; height: 3px; }

@keyframes rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.4);  opacity: 0; }
  12%  { opacity: 0.75; }
  60%  { opacity: 0.6; transform: translate3d(8px, -55vh, 0) scale(1); }
  100% { transform: translate3d(-6px, -110vh, 0) scale(0.2); opacity: 0; }
}

/* Haze layer intentionally left empty — the fluffy warm blur was fighting the sharp
   game-UI feel. Kept the element in the DOM in case we want to reintroduce something. */
.haze { display: none; }

/* Scanline overlay — subtle CRT texture for tactical HUD feel */
.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.020) 0px,
    rgba(255, 255, 255, 0.020) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* === Idle atmosphere: when the member is logged in but no panel is
   expanded, let the battlefield breathe. Warmer saturation, more brightness,
   embers pop, corner vignette lifts. Fades back to the focused, dim state
   as soon as chat or VS is opened. Driven by body[data-panel="none"], set
   by views.js when both panels are minimized. */
body[data-panel="none"] .battlefield::before {
  filter: saturate(0.55) brightness(0.62) contrast(1.10);
}
body[data-panel="none"] .battlefield::after {
  opacity: 0.5;
}
body[data-panel="none"] .embers {
  opacity: 0.9;
}
body[data-panel="none"] .page::before {
  opacity: 0.55;
}

/* === Page layout: 3-row grid, single viewport === */
.page {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* Single column with min:0 — critical for narrow viewports. Default grid
     tracks size to content (auto), which means a long chat message or wide
     topbar-actions row would push the whole page past the viewport and clip
     it. minmax(0, 1fr) fills the width but lets the track shrink below
     content, letting flex children with min-width:0 truncate cleanly. */
  grid-template-columns: minmax(0, 1fr);
}

/* Sharp, heavy corner vignette pulls edges into shadow */
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 120% 100% at 50% 50%,
    transparent 30%,
    rgba(0, 0, 0, 0.55) 72%,
    rgba(0, 0, 0, 0.92) 100%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 1200ms ease;
}

/* === Topbar === */
.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(14px, 2.2vh, 24px) clamp(20px, 3vw, 44px);
}

/* Left group in the topbar — brand on top with the members-area dock
   nested beneath it so the dock sits visually anchored to the logo.
   When the user is logged out the dock is [hidden] and this column
   collapses back to just the brand. */
.topbar-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
  transition: filter 240ms ease;
}

.brand:hover { filter: drop-shadow(0 0 6px rgba(200, 205, 215, 0.35)); }

.brand-mark {
  width: clamp(32px, 4.2vh, 44px);
  height: auto;
}

.brand-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.brand-title {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(18px, 2.6vh, 24px);
  letter-spacing: 0.22em;
  background: linear-gradient(180deg,
    var(--gold-0) 0%,
    var(--gold-1) 45%,
    var(--gold-2) 78%,
    var(--gold-3) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.brand-subtitle {
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  font-size: clamp(9px, 1.1vh, 11px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.55);
  margin-top: 4px;
}

/* === Login button — compact chamfered steel tile === */
.login-btn {
  --cut: 10px;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: clamp(10px, 1.5vh, 13px) clamp(22px, 2.8vw, 36px);
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: clamp(11px, 1.4vh, 13px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-0);
  text-decoration: none;
  background:
    linear-gradient(180deg,
      rgba(30, 34, 40, 0.85) 0%,
      rgba(14, 16, 20, 0.90) 55%,
      rgba(8, 10, 12, 0.85) 100%) padding-box,
    linear-gradient(180deg,
      rgba(220, 224, 232, 0.55) 0%,
      rgba(120, 125, 135, 0.28) 100%) border-box;
  border: 1px solid transparent;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background 220ms ease, color 220ms ease, transform 220ms ease;
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
}

/* Bright top edge highlight — reads as a lit ridge above the button */
.login-btn::before {
  content: "";
  position: absolute;
  top: 0; left: var(--cut); right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(238, 240, 243, 0.85) 20%,
    rgba(238, 240, 243, 0.85) 80%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Sheen wash across the face */
.login-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(238, 240, 243, 0.06) 40%,
    rgba(238, 240, 243, 0.22) 50%,
    rgba(238, 240, 243, 0.06) 60%,
    transparent 100%);
  transform: skewX(-15deg);
  transition: left 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

.login-btn__label { position: relative; z-index: 2; }

.login-btn:hover {
  color: #f4f6f9;
  background:
    linear-gradient(180deg,
      rgba(42, 48, 58, 0.88) 0%,
      rgba(18, 22, 28, 0.92) 55%,
      rgba(10, 12, 16, 0.88) 100%) padding-box,
    linear-gradient(180deg,
      rgba(238, 240, 243, 1) 0%,
      rgba(150, 155, 165, 0.55) 100%) border-box;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
}

.login-btn:hover::after { left: 130%; }

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

/* === Hero: 2-col grid, copy left, portrait right === */
.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: stretch;
  padding: 0 clamp(24px, 4vw, 64px);
  gap: clamp(20px, 3vw, 48px);
  min-height: 0;
  overflow: hidden;
}

.hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 640px;
  padding-left: clamp(0px, 2vw, 32px);
  transform: translate3d(
    calc(var(--px, 0) * -4px),
    calc(var(--py, 0) * -3px),
    0
  );
  transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.hero-eyebrow {
  margin: 0 0 22px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 1.4vh, 14px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.65);
}

.hero-title {
  margin: 0;
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(40px, 5.6vw, 78px);
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Polished steel gradient — reads as chrome/gunmetal */
  background: linear-gradient(180deg,
    #eef0f3 0%,
    #c8ccd1 30%,
    #7a7f87 62%,
    #3a3d43 92%,
    #1c1e21 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.9));
}

.hero-rule {
  width: 64px;
  height: 1px;
  margin: 28px 0 24px;
  background: linear-gradient(90deg, rgba(200, 205, 215, 0.85), rgba(122, 127, 135, 0.10));
}

.hero-body {
  margin: 0 0 34px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.7vh, 16px);
  line-height: 1.55;
  color: rgba(200, 204, 209, 0.72);
  max-width: 460px;
}

/* === CTA button — chamfered steel tile with tick brackets + sheen sweep === */
.cta-btn {
  --cut: 18px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 2vh, 18px) clamp(28px, 3.4vw, 40px);
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 1.45vh, 13px);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold-0);
  text-decoration: none;
  background:
    /* Layered dark base — top slightly lighter, reads as embossed steel */
    linear-gradient(180deg,
      rgba(46, 52, 62, 0.90) 0%,
      rgba(22, 26, 32, 0.94) 45%,
      rgba(10, 12, 16, 0.90) 100%) padding-box,
    /* Bright steel border */
    linear-gradient(180deg,
      rgba(232, 235, 239, 0.72) 0%,
      rgba(140, 145, 155, 0.30) 100%) border-box;
  border: 1px solid transparent;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition:
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 240ms ease,
    color 220ms ease,
    filter 260ms ease;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
  z-index: 0;
}

/* Bright top-edge highlight ridge */
.cta-btn::before {
  content: "";
  position: absolute;
  top: 0; left: var(--cut); right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(238, 240, 243, 0.95) 15%,
    rgba(238, 240, 243, 0.95) 85%,
    transparent 100%);
  z-index: 3;
  pointer-events: none;
}

/* Subtle dark shadow along the bottom edge — depth */
.cta-btn::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: var(--cut);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.75) 15%,
    rgba(0, 0, 0, 0.75) 85%,
    transparent 100%);
  z-index: 3;
  pointer-events: none;
}

/* Sheen sweep — angled specular that traverses the face on hover */
.cta-btn__sheen {
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(238, 240, 243, 0.06) 40%,
    rgba(238, 240, 243, 0.28) 50%,
    rgba(238, 240, 243, 0.06) 60%,
    transparent 100%);
  transform: skewX(-16deg);
  transition: left 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

/* L-shaped tick brackets sit at the two sharp corners (TR + BL) —
   emphasises the tactical HUD silhouette against the two chamfered corners. */
.cta-btn__tick {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 4;
  pointer-events: none;
}
.cta-btn__tick::before,
.cta-btn__tick::after {
  content: "";
  position: absolute;
  background: rgba(238, 240, 243, 0.85);
  transition: background 240ms ease;
}
.cta-btn__tick--tr { top: 5px; right: 6px; }
.cta-btn__tick--tr::before { top: 0; right: 0; width: 100%; height: 1px; }
.cta-btn__tick--tr::after  { top: 0; right: 0; width: 1px;  height: 100%; }
.cta-btn__tick--bl { bottom: 5px; left: 6px; }
.cta-btn__tick--bl::before { bottom: 0; left: 0; width: 100%; height: 1px; }
.cta-btn__tick--bl::after  { bottom: 0; left: 0; width: 1px;  height: 100%; }

.cta-btn__mark {
  position: relative;
  z-index: 2;
  color: var(--gold-1);
  font-size: 0.9em;
  transform: translateY(-1px);
  transition: color 240ms ease, transform 240ms ease;
}

.cta-btn__label { position: relative; z-index: 2; }

.cta-btn:hover {
  transform: translateY(-3px);
  color: #f8fafc;
  background:
    linear-gradient(180deg,
      rgba(60, 68, 80, 0.92) 0%,
      rgba(28, 34, 42, 0.96) 45%,
      rgba(12, 14, 18, 0.90) 100%) padding-box,
    linear-gradient(180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(160, 165, 175, 0.6) 100%) border-box;
  filter:
    drop-shadow(0 10px 20px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 22px rgba(200, 205, 215, 0.25));
}
.cta-btn:hover .cta-btn__sheen { left: 130%; }
.cta-btn:hover .cta-btn__tick::before,
.cta-btn:hover .cta-btn__tick::after { background: #f8fafc; }
.cta-btn:hover .cta-btn__mark { color: #f8fafc; transform: translateY(-1px) rotate(45deg); }

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

/* === Hero portrait (right column) === */
.hero-portrait {
  position: relative;
  align-self: stretch;
  min-width: 0;
  overflow: visible;
  transform: translate3d(
    calc(var(--px, 0) * -6px),
    calc(var(--py, 0) * -4px),
    0
  );
  transition: transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.hero-img {
  position: absolute;
  right: -3%;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 105%;
  object-fit: contain;
  object-position: right bottom;
  z-index: 1;
  animation: crestFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.85));
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 5%,
    #000 15%,
    #000 82%,
    rgba(0, 0, 0, 0.45) 95%,
    transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 5%,
    #000 15%,
    #000 82%,
    rgba(0, 0, 0, 0.45) 95%,
    transparent 100%);
}

@keyframes crestFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* === Alliance chat (shown when authenticated, replaces the hero) === */
.chat {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* No padding-top — the topbar already provides the vertical breathing
     room; matching VS's pattern here so both panels start flush at the
     same height. */
  padding-right: clamp(20px, 4vw, 64px);
  padding-left:  clamp(20px, 4vw, 64px);
  padding-bottom: clamp(12px, 2vh, 22px);
  min-height: 0;
}

.chat__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* Room tabs — Alliance Chat + Sandbox, rendered in the same order in
   both chat panels so switching rooms doesn't shift the header layout.
   The active tab reads bold white with a filled gold outline; the
   inactive tab is muted and clicks through to the other room. */
.chat__title-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.chat__room-tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(184, 188, 196, 0.55);
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  padding: 5px 12px;
  cursor: pointer;
  line-height: 1;
  border-radius: 2px;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.chat__room-tab:hover,
.chat__room-tab:focus-visible {
  color: rgba(246, 201, 91, 0.9);
  border-color: rgba(246, 201, 91, 0.32);
  background: rgba(246, 201, 91, 0.08);
  outline: none;
}
.chat__room-tab.is-active {
  color: #ffffff;
  font-weight: 700;
  border-color: rgba(246, 201, 91, 0.6);
  background: rgba(246, 201, 91, 0.16);
  cursor: default;
}
.chat__room-tab.is-active:hover,
.chat__room-tab.is-active:focus-visible {
  /* Already in this room — clicking is a no-op, so don't animate. */
  color: #ffffff;
  border-color: rgba(246, 201, 91, 0.6);
  background: rgba(246, 201, 91, 0.16);
}

.chat__title {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #ffffff;
}

.chat__status {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.55);
}
.chat__status[data-tone="ok"]   { color: #b6d4b6; }
.chat__status[data-tone="warn"] { color: #ffbc80; }
.chat__status[data-tone="pending"] { color: rgba(200, 205, 215, 0.7); }

/* Wrapper around the scrollable message list so the "Go to newest" button
   can be absolutely-positioned relative to the messages viewport. */
.chat__messages-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chat__messages {
  list-style: none;
  margin: 0;
  padding: 8px 8px 8px 4px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background:
    linear-gradient(180deg, rgba(6, 8, 12, 0.42), rgba(4, 6, 8, 0.32)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.22), rgba(120, 125, 135, 0.14)) border-box;
  border: 1px solid transparent;
  min-height: 0;
}

/* Small floating pill — appears when the user has scrolled up from the
   bottom of the message list. Clicking it snaps back and re-enables the
   auto-scroll behavior. */
.chat__scroll-newest {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-0);
  background:
    linear-gradient(180deg, rgba(20, 24, 30, 0.88), rgba(12, 14, 18, 0.75)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.55), rgba(120, 125, 135, 0.28)) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  cursor: pointer;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
  animation: scrollNewestIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 5;
  transition: color 200ms ease, background 200ms ease;
}
.chat__scroll-newest:hover {
  color: #f4f6f9;
  background:
    linear-gradient(180deg, rgba(24, 28, 34, 0.92), rgba(14, 16, 22, 0.80)) padding-box,
    linear-gradient(180deg, rgba(238, 240, 243, 0.95), rgba(150, 155, 165, 0.55)) border-box;
}
.chat__scroll-newest-icon {
  font-size: 14px;
  line-height: 1;
}
@keyframes scrollNewestIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.chat__msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 12px;
  background: rgba(6, 8, 12, 0.55);
  border-left: 2px solid rgba(200, 205, 215, 0.35);
  max-width: 84%;
  align-self: flex-start;
}

/* Your own messages float right with a warmer gold accent — quick visual
   distinction without over-styling. Avatar swaps to the right side too so
   it stays next to the name column. */
.chat__msg.is-own {
  align-self: flex-end;
  flex-direction: row-reverse;
  border-left: none;
  border-right: 2px solid rgba(246, 201, 91, 0.45);
  background: linear-gradient(90deg, rgba(6, 8, 12, 0.55), rgba(28, 22, 12, 0.65));
}
.chat__msg.is-own .chat__msg-head { flex-direction: row-reverse; }
.chat__msg.is-own .chat__msg-author { color: rgba(246, 201, 91, 0.92); }

/* Wrapper around the head + body + tag so the avatar column sits alongside
   at .chat__msg's flex level. min-width: 0 lets long words wrap instead of
   forcing the whole message wide. */
.chat__msg-body-wrap {
  flex: 1;
  min-width: 0;
}

/* Small circle avatar. Applied to both real images and initial-tile
   fallbacks; the fallback variant also carries an inline gradient
   background set by chat.js from a seeded palette. */
.chat__msg-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(200, 205, 215, 0.28);
  background: rgba(20, 24, 30, 0.6);
}
.chat__msg-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat__msg-avatar-initial {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--gold-0);
  line-height: 1;
  user-select: none;
}
.chat__msg.is-own .chat__msg-avatar {
  border-color: rgba(246, 201, 91, 0.42);
}

.chat__msg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.chat__msg-author {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-0);
}

.chat__msg-time {
  font-family: "Rajdhani", sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(184, 188, 196, 0.5);
  white-space: nowrap;
}

.chat__msg-body {
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--cream);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Centered day divider between chat messages. Carries data-date="YYYY-MM-DD"
   for future features (jump-to-date, filters). */
.chat__day-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  background: transparent;
  border: none;
  list-style: none;
}
.chat__day-divider::before,
.chat__day-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 205, 215, 0.22), transparent);
}
.chat__day-divider-label {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.65);
  padding: 0 2px;
  white-space: nowrap;
}

/* Small pill showing the original source language when we've swapped in a
   translation for the viewer. */
.chat__msg-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  font-family: "Rajdhani", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(184, 188, 196, 0.55);
  border: 1px solid rgba(200, 205, 215, 0.18);
}

/* Subtle "X is typing…" line just above the composer. Pulsing dot on the
   leading side, italic tracked text. Hidden via [hidden] when nobody typing. */
.chat__typing {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 16px;
  padding: 0 6px;
  margin-top: -4px;
}
.chat__typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(200, 205, 215, 0.55);
  animation: typingPulse 1.4s ease-in-out infinite;
}
@keyframes typingPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1); }
}
.chat__typing-text {
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(184, 188, 196, 0.65);
  font-style: italic;
}

.chat__composer {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* --- Attach button (paperclip) ---------------------------------------
   Styled as a subtle steel tile matching .chat__send, but square and
   icon-only. Clickable label wraps a visually-hidden file input. */
.chat__attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  cursor: pointer;
  color: rgba(200, 205, 215, 0.65);
  background:
    linear-gradient(180deg, rgba(14, 16, 20, 0.72), rgba(8, 10, 14, 0.62)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.35), rgba(120, 125, 135, 0.18)) border-box;
  border: 1px solid transparent;
  transition: color 200ms ease, background 200ms ease;
}
.chat__attach:hover {
  color: #f4f6f9;
  background:
    linear-gradient(180deg, rgba(20, 22, 28, 0.85), rgba(12, 14, 18, 0.72)) padding-box,
    linear-gradient(180deg, rgba(220, 224, 232, 0.65), rgba(140, 145, 155, 0.32)) border-box;
}
.chat__attach-icon {
  font-size: 18px;
  line-height: 1;
  transform: rotate(-30deg);
  display: inline-block;
}

/* --- Emoji picker button + popover -----------------------------------
   Same steel tile treatment as the attach button; the popover sits
   above the composer anchored to the button. Small curated grid of
   emojis; heavy pickers aren't worth their weight for our use case. */
.chat__emoji-wrap {
  position: relative;
  display: inline-flex;
}
.chat__emoji-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  cursor: pointer;
  color: rgba(200, 205, 215, 0.65);
  background:
    linear-gradient(180deg, rgba(14, 16, 20, 0.72), rgba(8, 10, 14, 0.62)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.35), rgba(120, 125, 135, 0.18)) border-box;
  border: 1px solid transparent;
  transition: color 200ms ease, background 200ms ease;
}
.chat__emoji-btn:hover,
.chat__emoji-btn[aria-expanded="true"] {
  color: #f4f6f9;
  background:
    linear-gradient(180deg, rgba(20, 22, 28, 0.85), rgba(12, 14, 18, 0.72)) padding-box,
    linear-gradient(180deg, rgba(220, 224, 232, 0.65), rgba(140, 145, 155, 0.32)) border-box;
}
.chat__emoji-icon {
  font-size: 20px;
  line-height: 1;
}

.chat__emoji-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(6, 32px);
  gap: 4px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(10, 12, 16, 0.94), rgba(6, 8, 10, 0.88)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.42), rgba(120, 125, 135, 0.22)) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
}
.chat__emoji-cell {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.chat__emoji-cell:hover,
.chat__emoji-cell:focus-visible {
  background: rgba(200, 205, 215, 0.10);
  border-color: rgba(200, 205, 215, 0.28);
  outline: none;
}

/* Jumbo rendering for pure-emoji messages — a small delight, matches the
   Discord/iMessage pattern. Cap so long emoji strings still fit. */
.chat__msg.is-emoji-only .chat__msg-body {
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

/* --- @-mention pill inside a message body ------------------------------ */
/* --- Rank badge ------------------------------------------------------
   Rendered next to any username surface — chat message header, user modal,
   presence popover, mentions dropdown, admin panel row. Tier colors match
   the in-game hierarchy while staying inside the site's steel palette.

   R5 top / gold — leader; R4 leader / bright silver; R3-R1 muted steel
   with just the numeral to differentiate. */
.rank-badge {
  display: inline-block;
  padding: 1px 5px;
  margin-left: 4px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.16em;
  line-height: 1.2;
  vertical-align: baseline;
  border: 1px solid transparent;
  color: rgba(200, 205, 215, 0.75);
  background: rgba(200, 205, 215, 0.08);
  border-color: rgba(200, 205, 215, 0.22);
}
.rank-badge--r5 {
  color: rgba(246, 201, 91, 1);
  background: rgba(246, 201, 91, 0.12);
  border-color: rgba(246, 201, 91, 0.5);
}
.rank-badge--r4 {
  color: var(--gold-0);
  background: rgba(232, 235, 239, 0.10);
  border-color: rgba(232, 235, 239, 0.42);
}
.rank-badge--r3 {
  color: rgba(184, 188, 196, 0.9);
  background: rgba(184, 188, 196, 0.08);
  border-color: rgba(184, 188, 196, 0.28);
}
.rank-badge--r2 {
  color: rgba(140, 145, 155, 0.9);
  background: rgba(140, 145, 155, 0.06);
  border-color: rgba(140, 145, 155, 0.28);
}
.rank-badge--r1 {
  color: rgba(110, 115, 125, 0.9);
  background: rgba(110, 115, 125, 0.06);
  border-color: rgba(110, 115, 125, 0.28);
}
/* Bot / AI persona pill — brighter than R5 with a subtle glow so bot
   messages read as first-class entities in the header, not rank-1 nobodies. */
.rank-badge--bot {
  padding: 1px 7px;
  letter-spacing: 0.22em;
  color: #fff5d6;
  background: rgba(246, 201, 91, 0.16);
  border-color: rgba(246, 201, 91, 0.65);
  box-shadow: 0 0 6px rgba(246, 201, 91, 0.22);
}
/* Discord-origin marker on bridged-channel messages — Discord blurple.
   Uses the same pill shape as rank pills so it slots into the badge row
   without extra layout work. */
.chat__msg-badge--discord {
  padding: 1px 7px;
  letter-spacing: 0.16em;
  color: #eaf0ff;
  background: rgba(88, 101, 242, 0.24);
  border-color: rgba(88, 101, 242, 0.7);
  box-shadow: 0 0 6px rgba(88, 101, 242, 0.22);
}
/* Live Discord-presence pill in the bridged chat header — Discord
   blurple dot + "N on Discord". Same shape/size as the alliance dock's
   presence chip so the two visual languages match. Click opens the
   member popover below it. */
.chat__discord-presence-wrap {
  position: relative;
  display: inline-flex;
  margin-right: 8px;
}
.chat__discord-presence {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid rgba(88, 101, 242, 0.55);
  border-radius: 999px;
  background: rgba(88, 101, 242, 0.14);
  color: rgba(232, 235, 239, 0.9);
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.chat__discord-presence:hover {
  background: rgba(88, 101, 242, 0.24);
  border-color: rgba(88, 101, 242, 0.75);
}
.chat__discord-presence[aria-expanded="true"] {
  background: rgba(88, 101, 242, 0.3);
  border-color: rgba(88, 101, 242, 0.9);
}
.chat__discord-presence[hidden] { display: none; }
.chat__discord-presence-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5865f2;
  box-shadow: 0 0 6px rgba(88, 101, 242, 0.75);
}
.chat__discord-presence-label { opacity: 0.75; }

/* Popover: positioned below the pill, right-aligned so it doesn't
   overflow the header on narrow layouts. Scrolls internally if the
   channel has many members online. */
.chat__discord-presence-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  max-width: 320px;
  max-height: 340px;
  overflow-y: auto;
  background: rgba(8, 10, 14, 0.98);
  border: 1px solid rgba(88, 101, 242, 0.4);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  padding: 10px 4px 10px 10px;
  z-index: 40;
  color: rgba(232, 235, 239, 0.92);
}
.chat__discord-presence-panel[hidden] { display: none; }
.chat__discord-presence-panel-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 6px;
}
.chat__discord-presence-panel-title {
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 235, 239, 0.88);
}
.chat__discord-presence-panel-sub {
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(160, 165, 175, 0.7);
}
.chat__discord-presence-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat__discord-presence-panel-empty {
  margin: 6px 6px 4px;
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  color: rgba(160, 165, 175, 0.65);
}

/* Individual member row. Status dot color mirrors Discord conventions:
   online = green, idle = amber, dnd = red. Avatars stay square-rounded
   to keep the row compact. */
.discord-presence-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
}
.discord-presence-row:hover { background: rgba(255, 255, 255, 0.04); }
.discord-presence-row__avatar {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  background: rgba(88, 101, 242, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #eaf0ff;
  font-weight: 700;
  font-size: 11px;
}
.discord-presence-row__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(232, 235, 239, 0.92);
}
.discord-presence-row__status {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid;
}
.discord-presence-row.is-online .discord-presence-row__status {
  color: #b6e4b6;
  border-color: rgba(120, 200, 120, 0.55);
  background: rgba(120, 200, 120, 0.14);
}
.discord-presence-row.is-idle .discord-presence-row__status {
  color: #f2c26b;
  border-color: rgba(246, 201, 91, 0.55);
  background: rgba(246, 201, 91, 0.12);
}
.discord-presence-row.is-dnd .discord-presence-row__status {
  color: #ff9a9a;
  border-color: rgba(220, 80, 80, 0.65);
  background: rgba(220, 80, 80, 0.14);
}
/* Bridged-channels admin form — narrow member list with checkboxes,
   scrollable so long rosters don't stretch the modal. */
.bridged-form__members {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.18);
}
/* The `.modal__field label` rule above applies uppercase + wide
   letter-spacing meant for field titles like "Discord channel ID".
   These are interactive checkbox rows, so all of that has to be reset
   or the checkboxes jitter around and the owner badge wraps. */
.bridged-form__member {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 3px 0;
  color: rgba(232, 235, 239, 0.88);
  font-family: "Rajdhani", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: none;
  cursor: pointer;
}
.bridged-form__member input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: rgba(246, 201, 91, 0.9);
  cursor: pointer;
}
.bridged-form__member > span {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Owner pill inside a member row shouldn't kick the label to two lines. */
.bridged-form__member .owner-badge { margin-left: 0; flex: 0 0 auto; }

/* Owner badge — orthogonal to in-game rank. Sits next to the rank pill with
   a distinct filled-gold treatment so it reads as "site role" rather than
   just another rank tier. */
.owner-badge {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.18em;
  line-height: 1.2;
  vertical-align: baseline;
  text-transform: uppercase;
  color: #1a140a;
  background: rgba(246, 201, 91, 0.95);
  border: 1px solid rgba(246, 201, 91, 0.75);
}

/* Admin panel row: rank select sits alongside the delete button. */
.ar-row__rank {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}
.ar-row__rank > span {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.65);
}
.ar-row__rank-select {
  padding: 4px 6px;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--cream);
  background: rgba(4, 6, 8, 0.75);
  border: 1px solid rgba(200, 205, 215, 0.22);
  cursor: pointer;
}
.ar-row__rank-select:disabled { opacity: 0.5; cursor: wait; }

/* VS panel read-only state — hides upload input + save/reset controls,
   surfaces a small note in their place. R1-R3 still see the date/type
   selectors and the historical preview. */
.vs__readonly {
  margin: 0;
  padding: 8px 12px;
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.62);
  background: rgba(200, 205, 215, 0.06);
  border-left: 2px solid rgba(200, 205, 215, 0.28);
}
.vs.is-readonly .vs__field--upload { display: none; }
.vs.is-readonly .vs__actions       { display: none; }
.vs.is-readonly .vs__readonly      { display: block; }

.chat__mention {
  display: inline-block;
  padding: 0 4px;
  border-radius: 3px;
  color: rgba(220, 224, 232, 0.95);
  background: rgba(200, 205, 215, 0.10);
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease;
}
.chat__mention:hover {
  background: rgba(200, 205, 215, 0.22);
}
.chat__mention:focus-visible {
  outline: 1px solid rgba(232, 235, 239, 0.7);
  outline-offset: 2px;
}
.chat__mention.is-self {
  color: rgba(246, 201, 91, 1);
  background: rgba(246, 201, 91, 0.16);
  box-shadow: inset 0 0 0 1px rgba(246, 201, 91, 0.35);
}
.chat__mention.is-self:hover {
  background: rgba(246, 201, 91, 0.28);
}

/* --- Reactions row (pills under a message body) ---------------------- */
.chat__msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.chat__msg-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(200, 205, 215, 0.85);
  background: rgba(200, 205, 215, 0.08);
  border: 1px solid rgba(200, 205, 215, 0.22);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.chat__msg-reaction:hover {
  background: rgba(200, 205, 215, 0.15);
  border-color: rgba(200, 205, 215, 0.4);
}
.chat__msg-reaction.is-mine {
  color: var(--gold-0);
  background: rgba(246, 201, 91, 0.14);
  border-color: rgba(246, 201, 91, 0.42);
}
.chat__msg-reaction.is-mine:hover {
  background: rgba(246, 201, 91, 0.22);
}
.chat__msg-reaction-emoji {
  font-size: 14px;
  line-height: 1;
}
.chat__msg-reaction-count {
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* --- Reactions picker (opened from the message menu's React item) --- */
.chat__reactions-picker {
  position: fixed;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(6, 32px);
  gap: 4px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(10, 12, 16, 0.96), rgba(6, 8, 10, 0.92)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.45), rgba(120, 125, 135, 0.24)) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6));
}
.chat__reactions-picker-cell {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.chat__reactions-picker-cell:hover,
.chat__reactions-picker-cell:focus-visible {
  background: rgba(200, 205, 215, 0.10);
  border-color: rgba(200, 205, 215, 0.28);
  outline: none;
}

/* --- Message-actions "..." button + floating menu ------------------ */
.chat__msg-head-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* Own messages: swap the order so the "..." sits inboard (closer to the
   screen center) with the time on the outboard edge. Reads naturally
   with row-reversed .chat__msg-head — the ⋮ ends up right next to the
   author group, which is where the eye lands to act on the message. */
.chat__msg.is-own .chat__msg-head-right {
  flex-direction: row-reverse;
}
.chat__msg-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: rgba(200, 205, 215, 0.4);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 160ms ease;
  /* Hidden by default on hover-capable devices; hover-reveal keeps message
     rows visually quiet. Always visible on touch devices where hover is
     unreliable. */
  opacity: 0;
}
.chat__msg:hover .chat__msg-menu-btn,
.chat__msg-menu-btn:focus-visible {
  opacity: 1;
}
/* Bot messages always show the actions button — no hover-reveal — so
   the react / reply / delete affordance is obvious. Same visual weight
   as the hover state; hovering the row makes it a touch brighter. */
.chat__msg--bot .chat__msg-menu-btn {
  opacity: 0.72;
}
.chat__msg--bot:hover .chat__msg-menu-btn {
  opacity: 1;
}
.chat__msg-menu-btn:hover { color: #f4f6f9; }
@media (hover: none) {
  /* Touch devices: always show the affordance since there's no hover. */
  .chat__msg-menu-btn { opacity: 0.55; }
  .chat__msg-menu-btn:hover { opacity: 1; }
}

.chat__msg-menu {
  position: fixed;
  z-index: 30;
  min-width: 140px;
  padding: 4px;
  background:
    linear-gradient(180deg, rgba(10, 12, 16, 0.96), rgba(6, 8, 10, 0.92)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.45), rgba(120, 125, 135, 0.24)) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6));
}
.chat__msg-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(220, 224, 232, 0.82);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background 140ms ease, color 140ms ease;
}
.chat__msg-menu-item:hover,
.chat__msg-menu-item:focus-visible {
  background: rgba(200, 205, 215, 0.10);
  color: var(--gold-0);
  outline: none;
}
.chat__msg-menu-icon {
  font-size: 14px;
  color: rgba(200, 205, 215, 0.7);
}
/* Destructive action — Delete. Red-tinted so it visually separates from
   the benign React / Reply items and reads as a distinct, riskier choice. */
.chat__msg-menu-item--danger {
  color: rgba(240, 130, 130, 0.92);
}
.chat__msg-menu-item--danger:hover,
.chat__msg-menu-item--danger:focus-visible {
  background: rgba(180, 60, 60, 0.18);
  color: #ffb1b1;
}
.chat__msg-menu-item--danger .chat__msg-menu-icon {
  color: rgba(240, 130, 130, 0.85);
}

/* --- Replying-to preview inside a reply message --------------------- */
.chat__msg-reply-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  margin-bottom: 4px;
  border-left: 2px solid rgba(200, 205, 215, 0.4);
  background: rgba(200, 205, 215, 0.06);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
  min-width: 0;
}
.chat__msg-reply-preview:hover,
.chat__msg-reply-preview:focus-visible {
  background: rgba(200, 205, 215, 0.12);
  border-left-color: var(--gold-0);
  outline: none;
}
.chat__msg-reply-corner {
  color: rgba(184, 188, 196, 0.55);
  font-size: 12px;
  line-height: 1;
  transform: scaleX(-1); /* mirror the arrow so it points into the parent */
  flex-shrink: 0;
}
.chat__msg-reply-inner {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.chat__msg-reply-author {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-0);
  flex-shrink: 0;
}
.chat__msg-reply-snippet {
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  color: rgba(200, 205, 215, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.chat__msg-reply-lang {
  font-family: "Rajdhani", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(184, 188, 196, 0.6);
  padding: 1px 5px;
  border: 1px solid rgba(200, 205, 215, 0.22);
  flex-shrink: 0;
}
/* Own reply — warm accent on the preview border to match own-message tint. */
.chat__msg.is-own .chat__msg-reply-preview {
  border-left-color: rgba(246, 201, 91, 0.45);
}
.chat__msg.is-own .chat__msg-reply-preview:hover {
  border-left-color: rgba(246, 201, 91, 0.85);
}

/* --- Composer "Replying to" strip ---------------------------------- */
.chat__reply-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background:
    linear-gradient(180deg, rgba(14, 16, 20, 0.75), rgba(8, 10, 14, 0.62)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.28), rgba(120, 125, 135, 0.14)) border-box;
  border: 1px solid transparent;
  border-left: 2px solid var(--gold-0);
  margin-bottom: -4px;
  min-width: 0;
}
.chat__reply-icon {
  font-size: 14px;
  color: rgba(200, 205, 215, 0.7);
  transform: scaleX(-1);
  flex-shrink: 0;
}
.chat__reply-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.chat__reply-label {
  font-family: "Rajdhani", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.55);
  flex-shrink: 0;
}
.chat__reply-author {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-0);
  flex-shrink: 0;
}
.chat__reply-snippet {
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  color: rgba(200, 205, 215, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.chat__reply-cancel {
  background: transparent;
  border: none;
  color: rgba(200, 205, 215, 0.55);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
  transition: color 180ms ease;
}
.chat__reply-cancel:hover { color: #ffbc80; }

/* Brief highlight animation when a message is jumped-to (from the mentions
   dropdown). Fades in a warm outline, then decays. */
.chat__msg.is-highlighted {
  animation: msgHighlight 2.4s ease-out;
}
@keyframes msgHighlight {
  0%   { box-shadow: 0 0 0 2px rgba(246, 201, 91, 0.75); background-color: rgba(246, 201, 91, 0.06); }
  60%  { box-shadow: 0 0 0 2px rgba(246, 201, 91, 0.35); background-color: rgba(246, 201, 91, 0.03); }
  100% { box-shadow: 0 0 0 2px rgba(246, 201, 91, 0);    background-color: transparent; }
}

/* --- Composer @-autocomplete popover ---------------------------------- */
.chat__input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}
.chat__input-wrap .chat__input {
  flex: 1;
  width: 100%;
}
.chat__mention-suggest {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 12;
  list-style: none;
  margin: 0;
  padding: 4px;
  min-width: 200px;
  max-height: 220px;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(10, 12, 16, 0.94), rgba(6, 8, 10, 0.88)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.42), rgba(120, 125, 135, 0.22)) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
}
.chat__mention-suggest-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(220, 224, 232, 0.82);
  border: 1px solid transparent;
}
.chat__mention-suggest-item.is-active,
.chat__mention-suggest-item:hover {
  background: rgba(200, 205, 215, 0.10);
  border-color: rgba(200, 205, 215, 0.28);
  color: var(--gold-0);
}
.chat__mention-suggest-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(120, 125, 135, 0.35);
  flex-shrink: 0;
}
.chat__mention-suggest-dot.is-online {
  background: rgba(150, 200, 155, 0.9);
  box-shadow: 0 0 5px rgba(120, 200, 130, 0.6);
}
/* @all virtual entry — small starburst instead of a presence dot, and a
   translated "Everyone" subtitle in the muted steel color. */
.chat__mention-suggest-dot.is-all {
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
  color: rgba(246, 201, 91, 0.95);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}
.chat__mention-suggest-item.is-all .chat__mention-suggest-name {
  color: rgba(246, 201, 91, 0.95);
  font-weight: 700;
}
.chat__mention-suggest-sub {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.55);
}

/* --- Slash-command autocomplete (admins only) -------------------------
   Positioned like .chat__mention-suggest — above the composer, drop-shadow
   the same steel-glass panel so it reads as native chat UI. Wider so the
   command description has room to breathe. */
.chat__slash-suggest {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 12;
  list-style: none;
  margin: 0;
  padding: 4px;
  min-width: 300px;
  max-width: 420px;
  max-height: 260px;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(10, 12, 16, 0.94), rgba(6, 8, 10, 0.88)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.42), rgba(120, 125, 135, 0.22)) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
}
.chat__slash-suggest-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(220, 224, 232, 0.82);
  border: 1px solid transparent;
}
.chat__slash-suggest-item.is-active,
.chat__slash-suggest-item:hover {
  background: rgba(200, 205, 215, 0.10);
  border-color: rgba(200, 205, 215, 0.28);
  color: var(--gold-0);
}
.chat__slash-suggest-name {
  font-weight: 700;
  color: var(--gold-0);
  flex-shrink: 0;
}
.chat__slash-suggest-desc {
  font-size: 12px;
  color: rgba(184, 188, 196, 0.75);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Ephemeral command flash (results only visible to the runner) ----
   Slots into the same vertical stack as .chat__reply-strip and
   .chat__attachment, so it appears just above the composer. Auto-dismiss
   fades handled by JS. */
.chat__cmd-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin: 8px 0 0;
  border: 1px solid rgba(246, 201, 91, 0.32);
  background:
    linear-gradient(180deg, rgba(30, 26, 12, 0.78), rgba(20, 18, 10, 0.72)) padding-box,
    linear-gradient(180deg, rgba(246, 201, 91, 0.42), rgba(180, 148, 62, 0.22)) border-box;
  color: rgba(228, 220, 200, 0.94);
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  letter-spacing: 0.03em;
  border-radius: 2px;
}
.chat__cmd-flash-body {
  flex: 1;
  white-space: pre-wrap;
  line-height: 1.5;
}
.chat__cmd-flash-body strong { color: var(--gold-0); font-weight: 700; }
.chat__cmd-flash-close {
  background: none;
  border: none;
  color: rgba(220, 224, 232, 0.6);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.chat__cmd-flash-close:hover { color: var(--gold-0); }

/* --- Dock mentions chip + dropdown ------------------------------------ */
.dock__mentions-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.dock__mentions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.62);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 180ms ease;
}
.dock__mentions:hover { color: #f4f6f9; }
.dock__mentions-icon {
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  color: rgba(184, 188, 196, 0.85);
}
.dock__mentions-count {
  min-width: 15px;
  padding: 0 5px;
  background: rgba(246, 201, 91, 0.85);
  color: #1a140a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 13px;
  border-radius: 7px;
}

.mentions-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 300px;
  max-width: 92vw;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px 4px;
  background:
    linear-gradient(180deg, rgba(10, 12, 16, 0.94), rgba(6, 8, 10, 0.88)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.42), rgba(120, 125, 135, 0.22)) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
  z-index: 20;
}
.mentions-panel__head {
  padding: 2px 12px 8px 12px;
  border-bottom: 1px solid rgba(200, 205, 215, 0.14);
  margin-bottom: 4px;
}
.mentions-panel__title {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.68);
}
.mentions-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mentions-panel__empty {
  margin: 12px;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(184, 188, 196, 0.5);
  text-align: center;
}
.mentions-row {
  padding: 8px 12px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
  border-left: 2px solid transparent;
}
.mentions-row:hover,
.mentions-row:focus-visible {
  background: rgba(200, 205, 215, 0.06);
  outline: none;
}
.mentions-row.is-unread {
  border-left-color: rgba(246, 201, 91, 0.75);
  background: rgba(246, 201, 91, 0.06);
}
.mentions-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}
.mentions-row__author {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-0);
}
.mentions-row__time {
  font-family: "Rajdhani", sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(184, 188, 196, 0.5);
  white-space: nowrap;
}
.mentions-row__snippet {
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(200, 205, 215, 0.72);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 520px) {
  .mentions-panel {
    position: fixed;
    top: auto;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 60vh;
  }
}

/* --- Pending attachment preview strip (sits above the composer) --- */
.chat__attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background:
    linear-gradient(180deg, rgba(14, 16, 20, 0.75), rgba(8, 10, 14, 0.62)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.28), rgba(120, 125, 135, 0.14)) border-box;
  border: 1px solid transparent;
  margin-bottom: -4px; /* nestle up to the composer */
}
.chat__attachment-thumb {
  width: 32px;
  height: 32px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  border: 1px solid rgba(200, 205, 215, 0.22);
}
.chat__attachment-name {
  flex: 1;
  min-width: 0;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(184, 188, 196, 0.72);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat__attachment-remove {
  background: transparent;
  border: none;
  color: rgba(200, 205, 215, 0.55);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  transition: color 180ms ease;
}
.chat__attachment-remove:hover { color: #ffbc80; }

/* --- Chat message image attachment ------------------------------ */
.chat__msg-image-link {
  display: block;
  margin-top: 4px;
  max-width: 100%;
}
.chat__msg-image {
  display: block;
  max-width: 100%;
  /* Cap the on-screen size so a landscape screenshot doesn't dominate the
     entire message list. Users click to open full-size in a new tab. */
  max-height: 260px;
  width: auto;
  height: auto;
  border: 1px solid rgba(200, 205, 215, 0.18);
  transition: border-color 180ms ease, transform 180ms ease;
}
.chat__msg-image-link:hover .chat__msg-image {
  border-color: rgba(232, 235, 239, 0.55);
}
/* Image-only messages: hide the empty body block entirely and pull the
   image tight against the head. */
.chat__msg.has-image:not(.has-text) .chat__msg-image-link { margin-top: 6px; }

.chat__input {
  flex: 1;
  padding: 10px 12px;
  background: rgba(4, 6, 8, 0.75);
  border: 1px solid rgba(200, 205, 215, 0.22);
  color: var(--cream);
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 1.4;
  outline: none;
  resize: none;
  transition: border-color 180ms ease, background 180ms ease;
  min-height: 42px;
  max-height: 120px;
  overflow-y: auto;
}
.chat__input:focus {
  border-color: rgba(232, 235, 239, 0.65);
  background: rgba(8, 10, 14, 0.82);
}

.chat__send {
  padding: 0 22px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-0);
  background:
    linear-gradient(180deg, rgba(14, 16, 20, 0.78), rgba(8, 10, 14, 0.66)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.55), rgba(120, 125, 135, 0.30)) border-box;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
}
.chat__send:hover {
  color: #f4f6f9;
  background:
    linear-gradient(180deg, rgba(20, 22, 28, 0.85), rgba(12, 14, 18, 0.72)) padding-box,
    linear-gradient(180deg, rgba(238, 240, 243, 0.95), rgba(150, 155, 165, 0.55)) border-box;
}
.chat__send:disabled { opacity: 0.5; cursor: wait; }

/* Thin scroll bar for the message list — matches the aesthetic */
.chat__messages::-webkit-scrollbar { width: 6px; }
.chat__messages::-webkit-scrollbar-track { background: transparent; }
.chat__messages::-webkit-scrollbar-thumb { background: rgba(200, 205, 215, 0.18); }
.chat__messages::-webkit-scrollbar-thumb:hover { background: rgba(200, 205, 215, 0.35); }

/* === Chat header actions (status + minimize button) === */
.chat__header-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Shared minimize-button styling used by both the chat and VS panels.
   Deliberately tiny — a thin steel outline square with a subtle dash. */
.chat__minimize,
.vs__minimize {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  line-height: 1;
  color: rgba(184, 188, 196, 0.6);
  background: transparent;
  border: 1px solid rgba(200, 205, 215, 0.18);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.chat__minimize:hover,
.vs__minimize:hover {
  color: #f4f6f9;
  border-color: rgba(232, 235, 239, 0.55);
  background: rgba(20, 22, 28, 0.55);
}

/* === VS Score Tracker section ===
   Same overall structure as .chat — column layout, bottom-anchored actions,
   scrollable preview table in the middle. */
.vs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: clamp(20px, 4vw, 64px);
  padding-left:  clamp(20px, 4vw, 64px);
  padding-bottom: clamp(12px, 2vh, 22px);
  min-height: 0;
  overflow: hidden;
}

.vs__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vs__header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.vs__title {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.6);
}
.vs__subtitle {
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: rgba(184, 188, 196, 0.55);
}

.vs__controls {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.vs__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 140px;
}
.vs__field > span {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.6);
}
.vs__field select,
.vs__field input[type="date"],
.vs__field input[type="file"] {
  padding: 8px 10px;
  background: rgba(4, 6, 8, 0.75);
  border: 1px solid rgba(200, 205, 215, 0.22);
  color: var(--cream);
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.vs__field select:focus,
.vs__field input[type="date"]:focus,
.vs__field input[type="file"]:focus {
  border-color: rgba(232, 235, 239, 0.65);
  background: rgba(8, 10, 14, 0.82);
}
.vs__field--upload {
  flex: 1;
  min-width: 240px;
}

/* Progress bar (upload → OCR) */
.vs__progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vs__progress-bar {
  height: 5px;
  background: rgba(200, 205, 215, 0.14);
  overflow: hidden;
}
.vs__progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(232, 235, 239, 0.85), rgba(150, 155, 165, 0.55));
  transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vs__progress-label {
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(184, 188, 196, 0.7);
}

/* Per-file status list under the progress bar — the play-by-play. */
.vs__filelist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 240px;
  overflow-y: auto;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
}
.vs__file {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  background: rgba(200, 205, 215, 0.05);
  border-left: 2px solid rgba(200, 205, 215, 0.25);
  color: rgba(184, 188, 196, 0.85);
  transition: background 200ms, border-color 200ms, color 200ms;
}
.vs__file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vs__file-status {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.7);
}
.vs__file-elapsed {
  font-size: 11px;
  color: rgba(184, 188, 196, 0.55);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
}
/* State-driven colors. */
.vs__file.is-queued      { opacity: 0.65; }
.vs__file.is-resizing    { border-left-color: rgba(150, 200, 255, 0.55); }
.vs__file.is-reading     { border-left-color: rgba(150, 200, 255, 0.65); }
.vs__file.is-sending     { border-left-color: rgba(150, 200, 255, 0.85); }
.vs__file.is-ocr         { border-left-color: rgba(246, 201, 91, 0.85); color: #f6e2b0; }
.vs__file.is-ocr .vs__file-status { color: rgba(246, 201, 91, 0.95); animation: vsPulse 1.2s ease-in-out infinite; }
.vs__file.is-done        { border-left-color: rgba(140, 200, 130, 0.75); color: rgba(200, 230, 200, 0.9); }
.vs__file.is-done .vs__file-status { color: rgba(180, 220, 170, 0.9); }
.vs__file.is-error       { border-left-color: rgba(220, 100, 90, 0.8); color: rgba(255, 200, 190, 0.9); background: rgba(90, 30, 30, 0.25); }
.vs__file.is-error .vs__file-status { color: rgba(255, 160, 150, 0.95); }

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

/* Warnings block (gap detection, per-file failures) */
.vs__warnings {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vs__warning {
  padding: 6px 10px;
  background: rgba(90, 55, 20, 0.35);
  border: 1px solid rgba(255, 188, 128, 0.35);
  color: #ffd6b0;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* Preview: scrollable table of extracted rows + bottom-anchored actions. */
.vs__preview {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background:
    linear-gradient(180deg, rgba(6, 8, 12, 0.42), rgba(4, 6, 8, 0.32)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.22), rgba(120, 125, 135, 0.14)) border-box;
  border: 1px solid transparent;
  padding: 10px;
}
.vs__preview-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.65);
}
.vs__preview-count {
  color: var(--gold-0);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
}
.vs__edit-hint {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(246, 201, 91, 0.65);
  text-transform: uppercase;
}

.vs__table-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.vs__table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  color: var(--cream);
}
.vs__table thead th {
  position: sticky;
  top: 0;
  background: rgba(6, 8, 12, 0.95);
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.7);
  border-bottom: 1px solid rgba(200, 205, 215, 0.18);
}
.vs__table tbody td {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(200, 205, 215, 0.08);
}
.vs__table tbody tr:hover td {
  background: rgba(200, 205, 215, 0.05);
}
.vs__cell-rank { width: 46px; color: rgba(184, 188, 196, 0.7); font-weight: 600; }
.vs__cell-score { text-align: right; font-variant-numeric: tabular-nums; color: var(--gold-0); }

/* Sortable column headers: whole cell is a click target. Icon in the
   header slot flips ▲/▼/·· based on state. Placeholder-tag rows
   (clan_tag === "—") get a muted style so an "unaffiliated" bucket
   reads as a technical placeholder, not a real alliance. */
.vs__th--sortable {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.vs__th--sortable span:first-child { display: inline-block; margin-right: 6px; }
.vs__sort-icon {
  display: inline-block;
  width: 10px;
  color: rgba(200, 205, 215, 0.35);
  font-size: 10px;
  vertical-align: middle;
}
.vs__th--sortable[data-sort-dir="asc"]  .vs__sort-icon::before { content: "▲"; color: rgba(246, 201, 91, 0.95); }
.vs__th--sortable[data-sort-dir="desc"] .vs__sort-icon::before { content: "▼"; color: rgba(246, 201, 91, 0.95); }
.vs__th--sortable[data-sort-dir]:not([data-sort-dir=""]) { color: rgba(255, 245, 214, 0.95); }
.vs__cell-tag--placeholder { color: rgba(180, 185, 195, 0.35); font-style: italic; }

/* Power Tracker delta column: green for gains, muted red for losses,
   dimmed dash for no prior. Tabular numerals keep the ±M column
   aligned across rows. */
.vs__cell-power { text-align: right; font-variant-numeric: tabular-nums; color: var(--gold-0); }
.vs__cell-delta { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.vs__cell-delta--up   { color: rgba(140, 210, 130, 0.95); }
.vs__cell-delta--down { color: rgba(220, 130, 120, 0.95); }
.vs__cell-delta--zero { color: rgba(184, 188, 196, 0.55); }
.vs__cell-delta--none { color: rgba(184, 188, 196, 0.35); font-style: italic; }
.vs__cell-level { text-align: center; color: rgba(200, 205, 215, 0.78); font-variant-numeric: tabular-nums; }

/* Header action cluster: minimize button + reconcile-names launcher.
   The launcher button uses the same steel-frame styling as the audio
   dropdown so it reads as a header affordance, not a primary action. */
.vs__header-actions { display: flex; gap: 8px; align-items: center; }
.vs__header-btn {
  appearance: none;
  padding: 6px 12px;
  border: 1px solid rgba(200, 205, 215, 0.28);
  background: rgba(6, 8, 12, 0.65);
  color: var(--cream);
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease;
}
.vs__header-btn:hover { border-color: rgba(246, 201, 91, 0.65); color: #fff5d6; }

/* Wide modal for reconciliation — needs room for two columns of
   unmatched names side by side. */
.modal--wide { max-width: 860px; width: min(96vw, 860px); }

.reconcile__sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0 6px;
}
@media (max-width: 640px) {
  .reconcile__sources { grid-template-columns: 1fr; }
}
.reconcile__source {
  border: 1px solid rgba(200, 205, 215, 0.14);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.reconcile__source legend {
  padding: 0 6px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 201, 91, 0.85);
}
.reconcile__source label {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px;
  align-items: center;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(200, 205, 215, 0.85);
}
.reconcile__source select,
.reconcile__source input[type="date"] {
  min-width: 0;
  width: 100%;
  padding: 6px 8px;
  background: rgba(6, 8, 12, 0.7);
  border: 1px solid rgba(200, 205, 215, 0.2);
  color: var(--cream);
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
}
.reconcile__actions-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 6px 0 4px;
}
.reconcile__summary {
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(200, 205, 215, 0.78);
}

/* Two-column results — mirrored layout so scanning left→right lines
   up "only in A" candidates with "only in B" candidates. */
.reconcile__results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
  max-height: 380px;
  overflow-y: auto;
}
@media (max-width: 640px) {
  .reconcile__results { grid-template-columns: 1fr; max-height: 460px; }
}
.reconcile__col { min-width: 0; }
.reconcile__col-title {
  margin: 0 0 6px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.85);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(200, 205, 215, 0.12);
}
.reconcile__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reconcile__row {
  padding: 8px 10px;
  background: rgba(6, 8, 12, 0.5);
  border-left: 2px solid rgba(200, 205, 215, 0.22);
}
.reconcile__row-name {
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff5d6;
  display: flex;
  align-items: center;
  gap: 8px;
}
.reconcile__row-tag {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(184, 188, 196, 0.65);
}
.reconcile__candidates {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reconcile__cand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  color: rgba(200, 205, 215, 0.85);
  background: rgba(200, 205, 215, 0.04);
}
.reconcile__cand-name  { flex: 1 1 auto; }
.reconcile__cand-score { font-variant-numeric: tabular-nums; color: rgba(140, 200, 130, 0.85); }
.reconcile__cand-btn {
  appearance: none;
  padding: 3px 8px;
  border: 1px solid rgba(246, 201, 91, 0.5);
  background: rgba(246, 201, 91, 0.08);
  color: #fff5d6;
  font-family: "Rajdhani", sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.reconcile__cand-btn:hover { border-color: rgba(246, 201, 91, 0.95); background: rgba(246, 201, 91, 0.2); }
.reconcile__no-cand {
  padding: 4px 6px;
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  color: rgba(184, 188, 196, 0.45);
  font-style: italic;
}
.reconcile__empty {
  padding: 12px;
  text-align: center;
  color: rgba(184, 188, 196, 0.5);
  font-style: italic;
}

/* ================================================================
   Merge Analysis panel — source pickers on top, per-scenario cards
   in the middle, big unified presence pivot below.
   ================================================================ */
.merge__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.merge__sources {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.merge__src-slot {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  background: rgba(6, 8, 12, 0.4);
  border: 1px solid rgba(200, 205, 215, 0.14);
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
}
.merge__src-slot select,
.merge__src-slot input[type="date"] {
  padding: 4px 8px;
  background: rgba(6, 8, 12, 0.7);
  border: 1px solid rgba(200, 205, 215, 0.2);
  color: var(--cream);
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
}
.merge__src-label {
  color: rgba(246, 201, 91, 0.85);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
}

/* Results block */
.merge__results { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.merge__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.merge__summary-card {
  padding: 10px 14px;
  border-left: 3px solid rgba(200, 205, 215, 0.35);
  background: rgba(6, 8, 12, 0.5);
  font-family: "Rajdhani", sans-serif;
}
.merge__summary-card--all     { border-left-color: rgba(246, 201, 91, 0.9); }
.merge__summary-card--partial { border-left-color: rgba(120, 200, 220, 0.85); }
.merge__summary-card--one     { border-left-color: rgba(200, 205, 215, 0.35); }
.merge__summary-title {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.72);
  margin-bottom: 4px;
}
.merge__summary-count {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 22px;
  color: var(--gold-0);
  font-variant-numeric: tabular-nums;
}
.merge__summary-breakdown {
  font-size: 11px;
  color: rgba(200, 205, 215, 0.78);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* Per-scenario cards row */
.merge__scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.merge__scenario {
  padding: 10px 12px;
  background: rgba(6, 8, 12, 0.45);
  border: 1px solid rgba(200, 205, 215, 0.12);
  min-width: 0;
}
.merge__scenario-title {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-0);
  margin-bottom: 4px;
}
.merge__scenario-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
}
.merge__scenario-count {
  padding: 2px 8px;
  background: rgba(200, 205, 215, 0.06);
  border: 1px solid rgba(200, 205, 215, 0.12);
  color: rgba(220, 224, 232, 0.9);
  font-variant-numeric: tabular-nums;
}
.merge__scenario-count strong { color: #fff5d6; margin-left: 4px; }
.merge__scenario-count--focus { border-color: rgba(246, 201, 91, 0.65); }

/* Per-scenario metric lines (cumulative power, VS absence). Sit
   under the alliance-count badges in each scenario card. */
.merge__metric {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(200, 205, 215, 0.08);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
}
.merge__metric-label {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.65);
  min-width: 96px;
}
.merge__metric-value {
  font-family: "Cinzel", serif;
  font-weight: 700;
  color: var(--gold-0);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.merge__metric-note {
  color: rgba(200, 205, 215, 0.55);
  font-size: 11px;
}
.merge__metric-subline {
  flex-basis: 100%;
  margin-top: 2px;
  color: rgba(200, 205, 215, 0.6);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.merge__metric-sub { margin-right: 6px; }

/* Presence pivot — big scrollable table */
.merge__pivot-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.merge__pivot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.merge__pivot-title {
  margin: 0;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200, 205, 215, 0.82);
}
.merge__pivot-filters {
  display: flex;
  gap: 12px;
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(200, 205, 215, 0.85);
}
.merge__pivot-filters label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.merge__pivot-table-wrap { max-height: 460px; overflow-y: auto; }
.merge__pivot-table th, .merge__pivot-table td {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.merge__pivot-table td.merge__cell-name { text-align: left; font-weight: 600; }
.merge__pivot-table td.merge__cell-tag  { text-align: left; }
.merge__pivot-table tr.merge__row--all     td { background: rgba(246, 201, 91, 0.10); }
.merge__pivot-table tr.merge__row--partial td { background: rgba(120, 200, 220, 0.08); }
.merge__pivot-table tr.merge__row--all:hover     td { background: rgba(246, 201, 91, 0.18); }
.merge__pivot-table tr.merge__row--partial:hover td { background: rgba(120, 200, 220, 0.14); }
.merge__cell-rank { color: rgba(200, 205, 215, 0.85); font-weight: 700; }
.merge__cell-rank--missing { color: rgba(184, 188, 196, 0.25); }

/* Manual pairing — clickable row + selected-state highlight + the
   pair-actions banner that appears once one side is picked. */
.reconcile__row { cursor: pointer; transition: background 140ms ease, border-color 140ms ease; }
.reconcile__row:hover { background: rgba(200, 205, 215, 0.06); }
.reconcile__row.is-selected {
  background: rgba(246, 201, 91, 0.14);
  border-left-color: rgba(246, 201, 91, 0.95);
}
/* Candidate button rows sit inside the outer row — keep the click
   affordance on the button, not on the sub-row wrapper. */
.reconcile__cand { cursor: default; }
.reconcile__cand-btn { cursor: pointer; }

.reconcile__pair {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(246, 201, 91, 0.35);
  background: rgba(246, 201, 91, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reconcile__pair-line {
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  color: rgba(255, 245, 214, 0.92);
  letter-spacing: 0.06em;
}
.reconcile__pair-line strong {
  color: #fff5d6;
  font-weight: 700;
}
.reconcile__pair-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Whole row is a click target when the user has edit rights. Read-only
   viewers just get the normal hover. */
.vs__table.is-editable tbody tr { cursor: pointer; }
.vs__table.is-editable tbody tr:hover td { background: rgba(246, 201, 91, 0.06); }

/* Edit-history disclosure inside the vs-edit modal. Keeps the row
   compact — one line per field change with editor + timestamp. */
.modal__history { margin: 12px 0 6px; }
.modal__history summary {
  cursor: pointer;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.72);
  padding: 6px 0;
}
.modal__history-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  max-height: 160px;
  overflow-y: auto;
  border-top: 1px solid rgba(200, 205, 215, 0.08);
}
.modal__history-list li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(200, 205, 215, 0.05);
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  color: rgba(200, 205, 215, 0.82);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}
.modal__history-list li:last-child { border-bottom: 0; }
.modal__history-field {
  color: rgba(246, 201, 91, 0.85);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
}
.modal__history-meta {
  color: rgba(160, 165, 175, 0.6);
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.modal__history-empty {
  padding: 8px 0;
  color: rgba(184, 188, 196, 0.5);
  font-style: italic;
}

.vs__table-wrap::-webkit-scrollbar { width: 6px; }
.vs__table-wrap::-webkit-scrollbar-track { background: transparent; }
.vs__table-wrap::-webkit-scrollbar-thumb { background: rgba(200, 205, 215, 0.18); }
.vs__table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(200, 205, 215, 0.35); }

.vs__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.vs__save,
.vs__reset {
  padding: 8px 22px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-0);
  background:
    linear-gradient(180deg, rgba(14, 16, 20, 0.78), rgba(8, 10, 14, 0.66)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.55), rgba(120, 125, 135, 0.30)) border-box;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
}
.vs__save:hover,
.vs__reset:hover {
  color: #f4f6f9;
  background:
    linear-gradient(180deg, rgba(20, 22, 28, 0.85), rgba(12, 14, 18, 0.72)) padding-box,
    linear-gradient(180deg, rgba(238, 240, 243, 0.95), rgba(150, 155, 165, 0.55)) border-box;
}
.vs__save:disabled { opacity: 0.5; cursor: wait; }
.vs__reset {
  color: rgba(184, 188, 196, 0.72);
}

.vs__empty {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(184, 188, 196, 0.5);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(6, 8, 12, 0.30), rgba(4, 6, 8, 0.22)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.14), rgba(120, 125, 135, 0.08)) border-box;
  border: 1px dashed transparent;
}

/* === Minimalist dock ===
   Lives inside .topbar-left, right under the brand. Two text-only chips
   separated by a thin steel rule; the active view's chip picks up the
   silver highlight, the inactive one stays muted. No border, no backdrop,
   deliberately quiet — reads as part of the header rather than a widget. */
.dock {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  /* Nudge the dock so its text baseline sits under the brand-subtitle,
     visually anchored to the "GREATEST OF ALL TIME" line. */
  margin-left: calc(clamp(32px, 4.2vh, 44px) + 14px);
}
.dock__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.55);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 180ms ease;
}
.dock__chip:first-child { padding-left: 0; }
.dock__chip:hover {
  color: #f4f6f9;
}
.dock__chip.is-active {
  color: var(--gold-0);
}
.dock__chip-label { display: inline-block; }
.dock__sep {
  align-self: center;
  width: 1px;
  height: 10px;
  background: rgba(200, 205, 215, 0.24);
}
.dock__chip-badge {
  min-width: 15px;
  padding: 0 5px;
  background: rgba(220, 90, 60, 0.90);
  color: #fff8f2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 13px;
  border-radius: 7px;
}

/* Presence chip lives inside the dock, mirroring the other chips visually
   but with a small pulsing dot on the leading edge. The chip is wrapped in
   a relative-positioned container so the popover can anchor to it. */
.dock__presence-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.dock__presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 10px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.62);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 180ms ease;
}
.dock__presence:hover { color: #f4f6f9; }
.dock__presence-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(150, 200, 155, 0.85);
  box-shadow: 0 0 6px rgba(120, 200, 130, 0.55);
  animation: presencePulse 2.4s ease-in-out infinite;
}
@keyframes presencePulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1;    }
}
.dock__presence-count {
  color: var(--gold-0);
  font-weight: 700;
  letter-spacing: 0.14em;
}
.dock__presence-label { display: inline-block; }
@media (max-width: 520px) {
  .dock__presence-label { display: none; }
  .dock__presence { padding-right: 2px; }
}

/* Roster popover — anchored to the presence chip on wide screens, becomes
   a small fixed panel with side gutters on narrow ones. Steel border and
   backdrop blur to match the site's chrome. */
.presence-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px 4px;
  background:
    linear-gradient(180deg, rgba(10, 12, 16, 0.94), rgba(6, 8, 10, 0.88)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.42), rgba(120, 125, 135, 0.22)) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
  z-index: 20;
}
.presence-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px 8px 12px;
  border-bottom: 1px solid rgba(200, 205, 215, 0.14);
  margin-bottom: 6px;
}
.presence-panel__title {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.68);
}
.presence-panel__sub {
  font-family: "Rajdhani", sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(184, 188, 196, 0.5);
}
.presence-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.presence-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.presence-row__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: 4px; /* line-up under the old 14px dot column */
}
.presence-row__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.presence-row.is-online .presence-row__dot {
  background: rgba(150, 200, 155, 0.9);
  box-shadow: 0 0 5px rgba(120, 200, 130, 0.6);
}
.presence-row.is-offline .presence-row__dot {
  background: rgba(120, 125, 135, 0.35);
}
.presence-row.is-online .presence-row__name {
  color: var(--cream);
}
.presence-row.is-offline .presence-row__name {
  color: rgba(184, 188, 196, 0.45);
}
.presence-row__status {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.42);
}
.presence-row.is-online .presence-row__status { color: rgba(150, 200, 155, 0.75); }
.presence-panel::-webkit-scrollbar { width: 6px; }
.presence-panel::-webkit-scrollbar-track { background: transparent; }
.presence-panel::-webkit-scrollbar-thumb { background: rgba(200, 205, 215, 0.18); }

@media (max-width: 520px) {
  .presence-panel {
    position: fixed;
    top: auto;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 60vh;
  }
}

/* === Bottom bar === */
.bottom-bar {
  /* Pin the footer to the last grid row of .page so it stays anchored to
     the bottom even when both members-area panels are minimized (auto-
     placement would otherwise drop it into the empty 1fr middle row and
     stretch it upward). */
  grid-row: 3;
  position: relative;
  z-index: 3;
  padding: clamp(10px, 1.6vh, 16px) clamp(20px, 3vw, 44px);
  text-align: center;
}

.copyright {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  font-size: clamp(10px, 1.15vh, 12px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.45);
}

/* === Language switcher (topbar dropdown) === */
.lang-switcher {
  position: relative;
}
.lang-switcher__btn {
  --cut: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 12px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-0);
  background:
    linear-gradient(180deg, rgba(14, 16, 20, 0.7), rgba(8, 10, 14, 0.60)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.40), rgba(120, 125, 135, 0.24)) border-box;
  border: 1px solid transparent;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.lang-switcher__btn:hover { color: #f4f6f9; }
.lang-switcher__caret { font-size: 8px; opacity: 0.7; }

.lang-switcher__list {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background:
    linear-gradient(180deg, rgba(14, 16, 20, 0.94), rgba(8, 10, 14, 0.92)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.45), rgba(120, 125, 135, 0.24)) border-box;
  border: 1px solid transparent;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.6));
  z-index: 20;
}
.lang-switcher__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--cream);
  text-align: start;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.lang-switcher__option:hover {
  background: rgba(200, 205, 215, 0.10);
  color: #f4f6f9;
}
.lang-switcher__option.is-active {
  background: rgba(200, 205, 215, 0.14);
  color: var(--gold-0);
}
.lang-switcher__native {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.lang-switcher__en {
  font-family: "Rajdhani", sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.55);
}

/* === Language gate modal (first visit) — minimalist, everything visible in one view === */
.modal--lang { width: min(560px, 94vw); }
.modal--lang .modal__form {
  padding: clamp(18px, 3vw, 28px);
  gap: 8px;
}
.modal--lang .modal__eyebrow  { text-align: center; margin-bottom: -2px; }
.modal--lang .modal__title {
  text-align: center;
  margin: 0;
  font-size: clamp(20px, 2.6vw, 24px);
  letter-spacing: 0.04em;
}
.modal--lang .modal__intro {
  text-align: center;
  max-width: 440px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.4;
}

.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  margin-top: 6px;
  /* No overflow: layout must fit — cards are compact enough for 11+ items */
}

.lang-grid__option {
  --cut: 7px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 11px;
  background:
    linear-gradient(180deg, rgba(14, 16, 20, 0.72), rgba(8, 10, 14, 0.58)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.28), rgba(120, 125, 135, 0.14)) border-box;
  border: 1px solid transparent;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  color: var(--cream);
  text-align: start;
  cursor: pointer;
  font-family: inherit;
  transition:
    transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 200ms ease;
}

.lang-grid__option:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(22, 26, 32, 0.85), rgba(12, 14, 18, 0.68)) padding-box,
    linear-gradient(180deg, rgba(238, 240, 243, 0.90), rgba(160, 165, 175, 0.5)) border-box;
}

.lang-grid__option:active { transform: translateY(0); }

/* Currently-active language card: subtle gold accent border */
.lang-grid__option.is-active {
  background:
    linear-gradient(180deg, rgba(24, 28, 34, 0.85), rgba(12, 14, 18, 0.7)) padding-box,
    linear-gradient(180deg, rgba(246, 201, 91, 0.65), rgba(140, 100, 40, 0.35)) border-box;
}
.lang-grid__option.is-active::before {
  content: "";
  position: absolute;
  top: 0; left: var(--cut); right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(246, 201, 91, 0.9) 50%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.lang-grid__native {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.15;
  background: linear-gradient(180deg, #eef0f3 0%, #b8bcc4 65%, #7a7f87 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.lang-grid__en {
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.5);
}

.lang-grid__footnote {
  margin: 6px 0 0;
  text-align: center;
  font-family: "Rajdhani", sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.4);
}

/* === RTL adjustments ===
   Flex containers already auto-flip when dir="rtl" is set on <html>. These
   are the specific rules that hard-coded direction and need a swap. */
html[dir="rtl"] .hero-copy { text-align: right; }
html[dir="rtl"] .hero-rule { margin-inline-start: auto; margin-inline-end: 0; }

/* Select styling inside modals */
.modal__field select {
  width: 100%;
  padding: 11px 13px;
  background: rgba(4, 6, 8, 0.72);
  border: 1px solid rgba(200, 205, 215, 0.20);
  color: var(--cream);
  font-family: "Rajdhani", sans-serif;
  font-size: 15px;
  letter-spacing: 0.03em;
  outline: none;
  transition: border-color 180ms ease, background 180ms ease;
  cursor: pointer;
}
.modal__field select:focus {
  border-color: rgba(232, 235, 239, 0.65);
  background: rgba(8, 10, 14, 0.85);
}

/* === Topbar user menu (shown when logged in) === */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}


.user-menu {
  --cut: 8px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  font-family: "Rajdhani", sans-serif;
  background:
    linear-gradient(180deg, rgba(14, 16, 20, 0.75), rgba(8, 10, 14, 0.62)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.42), rgba(120, 125, 135, 0.24)) border-box;
  border: 1px solid transparent;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.user-menu__name {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--gold-0);
}

.user-menu__logout,
.user-menu__admin,
.user-menu__profile {
  background: transparent;
  border: none;
  color: rgba(184, 188, 196, 0.6);
  font-family: inherit;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 0;
  transition: color 200ms ease;
}
.user-menu__logout:hover,
.user-menu__admin:hover,
.user-menu__profile:hover { color: #f4f6f9; }
.user-menu__admin { color: rgba(232, 235, 239, 0.75); }
.user-menu__admin:hover { color: #ffffff; }


/* === Modals ================================================== */
.modal {
  --cut: 14px;
  padding: 0;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(14, 16, 20, 0.94), rgba(8, 10, 14, 0.92)) padding-box,
    linear-gradient(180deg, rgba(220, 224, 232, 0.55), rgba(120, 125, 135, 0.30)) border-box;
  color: var(--cream);
  width: min(460px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.75));
}

.modal[open] { animation: modalReveal 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes modalReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  animation: modalReveal 220ms ease;
}

.modal__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 34px);
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  color: rgba(200, 205, 215, 0.6);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 200ms ease;
}
.modal__close:hover { color: #f4f6f9; }

.modal__eyebrow {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.65);
}

.modal__title {
  margin: 0 0 4px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: 0.05em;
  background: linear-gradient(180deg, #eef0f3 0%, #b8bcc4 60%, #6d7178 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.modal__intro {
  margin: 0 0 4px;
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(200, 205, 215, 0.72);
}

.modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal__field label {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.82);
}
.modal__hint {
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(160, 165, 175, 0.55);
  text-transform: none;
}
.modal__field input,
.modal__field textarea {
  width: 100%;
  padding: 11px 13px;
  background: rgba(4, 6, 8, 0.72);
  border: 1px solid rgba(200, 205, 215, 0.20);
  color: var(--cream);
  font-family: "Rajdhani", sans-serif;
  font-size: 15px;
  letter-spacing: 0.03em;
  outline: none;
  transition: border-color 180ms ease, background 180ms ease;
  resize: vertical;
}
.modal__field input:focus,
.modal__field textarea:focus {
  border-color: rgba(232, 235, 239, 0.65);
  background: rgba(8, 10, 14, 0.85);
}

.modal__static {
  padding: 11px 13px;
  background: rgba(4, 6, 8, 0.4);
  border: 1px solid rgba(200, 205, 215, 0.10);
  color: rgba(220, 225, 232, 0.82);
  font-family: "Rajdhani", sans-serif;
  font-size: 15px;
  letter-spacing: 0.03em;
}

.modal__error {
  margin: 0;
  padding: 9px 12px;
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #ff9a9a;
  background: rgba(140, 25, 25, 0.16);
  border: 1px solid rgba(200, 60, 60, 0.32);
}
.modal__success {
  margin: 0;
  padding: 9px 12px;
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #b6d4b6;
  background: rgba(70, 120, 70, 0.18);
  border: 1px solid rgba(120, 180, 120, 0.32);
}

.modal__submit {
  margin-top: 6px;
  align-self: flex-start;
}
.modal__submit:disabled { opacity: 0.5; cursor: wait; }

/* === Player-profile modal (read-only card) ==================== */
.modal--user { width: min(360px, 92vw); }

/* Screen-reader-only heading — the visible name/avatar identify the modal
   for sighted users; assistive tech still gets the labelled-by target. */
.modal__title--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}
.user-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(200, 205, 215, 0.32);
  background: rgba(20, 24, 30, 0.6);
}
.user-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.user-card__avatar-initial {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 0.04em;
  color: var(--gold-0);
  line-height: 1;
  user-select: none;
}

.user-card__ident {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.user-card__name {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.14em;
  color: var(--gold-0);
  word-break: break-word;
}
.user-card__badges {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.user-card__badge {
  display: inline-block;
  padding: 2px 8px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.72);
  border: 1px solid rgba(200, 205, 215, 0.28);
}
.user-card__badge.is-admin {
  color: rgba(246, 201, 91, 0.95);
  border-color: rgba(246, 201, 91, 0.45);
}
.user-card__badge.is-you {
  color: rgba(184, 220, 200, 0.9);
  border-color: rgba(150, 200, 155, 0.42);
}
/* AI persona pill — brighter gold + subtle glow so the bot reads as a
   distinct, first-class entity in the roster/profile UI rather than a
   member with weird defaults. */
.user-card__badge.is-bot {
  color: #fff5d6;
  background: rgba(246, 201, 91, 0.14);
  border-color: rgba(246, 201, 91, 0.65);
  box-shadow: 0 0 8px rgba(246, 201, 91, 0.22);
}

/* Free-text persona / bio paragraph. Only rendered when the user has one
   (populated today by 6OAT Bot; extensible to human members later). */
.user-card__bio {
  width: 100%;
  margin: 10px 0 4px 0;
  padding: 10px 12px;
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(228, 220, 200, 0.94);
  background: rgba(20, 24, 30, 0.55);
  border-left: 2px solid rgba(246, 201, 91, 0.45);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.user-card__meta {
  margin: 6px 0 0 0;
  padding: 8px 0 0 0;
  width: 100%;
  border-top: 1px solid rgba(200, 205, 215, 0.14);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.user-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.user-card__row dt {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.6);
}
.user-card__row dd {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--cream);
}

.user-card__state {
  margin: 0;
  padding: 20px 0;
  text-align: center;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.55);
}
.user-card__state--error { color: #ffbc80; }

/* Clickable name / avatar in chat — the underlying spans opt in via
   [data-user-id], added by chat.js render only when author_user_id is set. */
.chat__msg-author[data-user-id],
.chat__msg-avatar[data-user-id] {
  cursor: pointer;
}
.chat__msg-author[data-user-id]:hover {
  color: #f4f6f9;
}
.chat__msg-avatar[data-user-id]:hover {
  border-color: rgba(232, 235, 239, 0.6);
}
.chat__msg-author[data-user-id]:focus-visible,
.chat__msg-avatar[data-user-id]:focus-visible {
  outline: 1px solid rgba(232, 235, 239, 0.7);
  outline-offset: 2px;
}

/* === Profile modal =========================================== */
.profile-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px 0;
}
.profile-preview__frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(200, 205, 215, 0.28);
  background: rgba(20, 24, 30, 0.6);
}
.profile-preview__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-preview__initial {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 0.04em;
  color: var(--gold-0);
  line-height: 1;
  user-select: none;
}
.profile-preview__hint {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.55);
  text-align: center;
}

.profile-file {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.profile-file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.profile-file__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-0);
  background:
    linear-gradient(180deg, rgba(14, 16, 20, 0.78), rgba(8, 10, 14, 0.66)) padding-box,
    linear-gradient(180deg, rgba(200, 205, 215, 0.55), rgba(120, 125, 135, 0.30)) border-box;
  border: 1px solid transparent;
  transition: color 200ms ease, background 200ms ease;
}
.profile-file:hover .profile-file__btn {
  color: #f4f6f9;
  background:
    linear-gradient(180deg, rgba(20, 22, 28, 0.85), rgba(12, 14, 18, 0.72)) padding-box,
    linear-gradient(180deg, rgba(238, 240, 243, 0.95), rgba(150, 155, 165, 0.55)) border-box;
}
.profile-file__name {
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(184, 188, 196, 0.72);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
/* Focus ring for keyboard users — the visually-hidden file input's focus
   surfaces on the styled button. */
.profile-file input[type="file"]:focus-visible ~ .profile-file__btn {
  outline: 1px solid rgba(232, 235, 239, 0.8);
  outline-offset: 2px;
}

/* === Admin panel (wide modal) === */
.modal--wide { width: min(760px, 96vw); }
.modal--wide .modal__form { padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 34px) clamp(18px, 2.5vw, 28px); }

.admin-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(200, 205, 215, 0.14);
  margin-bottom: 4px;
}
.admin-tab {
  padding: 9px 18px;
  background: transparent;
  border: none;
  color: rgba(184, 188, 196, 0.5);
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 200ms ease, border-color 200ms ease;
}
.admin-tab:hover { color: rgba(232, 235, 239, 0.85); }
.admin-tab.is-active {
  color: var(--gold-0);
  border-bottom-color: rgba(232, 235, 239, 0.7);
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 6px;
}

.admin-empty {
  padding: 32px 12px;
  text-align: center;
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: rgba(184, 188, 196, 0.55);
}

.ar-row {
  padding: 14px 16px;
  background: rgba(6, 8, 12, 0.55);
  border: 1px solid rgba(200, 205, 215, 0.14);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ar-row__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.ar-row__ign {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, #eef0f3 0%, #b8bcc4 60%, #6d7178 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.ar-row__email {
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(184, 188, 196, 0.65);
  margin-top: 2px;
}

.ar-row__date {
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.5);
  white-space: nowrap;
}

.ar-row__message {
  margin: 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.28);
  border-left: 2px solid rgba(200, 205, 215, 0.25);
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(200, 205, 215, 0.78);
}

.ar-row__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding-top: 4px;
}

.ar-row__label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 180px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.72);
}

.ar-row__username {
  padding: 9px 11px;
  background: rgba(2, 4, 6, 0.75);
  border: 1px solid rgba(200, 205, 215, 0.22);
  color: var(--cream);
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color 180ms ease;
}
.ar-row__username:focus { border-color: rgba(232, 235, 239, 0.65); }

.ar-row__buttons {
  display: flex;
  gap: 8px;
}

.ar-row__approve,
.ar-row__deny {
  padding: 9px 18px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.ar-row__approve {
  background: rgba(56, 104, 60, 0.22);
  color: #c8e0c8;
  border-color: rgba(120, 180, 120, 0.42);
}
.ar-row__approve:hover:not(:disabled) {
  background: rgba(56, 104, 60, 0.38);
  color: #e6f4e6;
  border-color: rgba(160, 220, 160, 0.65);
}

.ar-row__deny {
  background: rgba(140, 25, 25, 0.22);
  color: #ff9a9a;
  border-color: rgba(200, 60, 60, 0.42);
}
.ar-row__deny:hover:not(:disabled) {
  background: rgba(140, 25, 25, 0.38);
  color: #ffb8b8;
  border-color: rgba(220, 90, 90, 0.65);
}

.ar-row__approve:disabled,
.ar-row__deny:disabled { opacity: 0.5; cursor: wait; }

.ar-row__result {
  margin-top: 4px;
  padding: 14px;
  background: rgba(56, 104, 60, 0.14);
  border: 1px solid rgba(120, 180, 120, 0.35);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ar-row__result-title {
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #d0e4d0;
}
.ar-row__result-title strong { color: #eef0f3; }

.ar-row__pw-box {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(200, 205, 215, 0.28);
}

.ar-row__pw {
  flex: 1;
  padding: 4px 8px;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 18px;
  letter-spacing: 0.12em;
  color: #eef0f3;
  user-select: all;
  background: transparent;
  outline: none;
}

.ar-row__copy {
  padding: 4px 14px;
  background: transparent;
  border: 1px solid rgba(200, 205, 215, 0.35);
  color: var(--cream);
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
.ar-row__copy:hover {
  color: #f4f6f9;
  border-color: rgba(232, 235, 239, 0.7);
}

.ar-row__hint {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(184, 188, 196, 0.55);
}

.ar-row__summary {
  padding-top: 4px;
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.55);
}

/* Small pill next to a username in the Users tab — "You" / "Admin" */
.user-row__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.72);
  border: 1px solid rgba(200, 205, 215, 0.24);
  vertical-align: middle;
}

/* === Reduce motion === */
@media (prefers-reduced-motion: reduce) {
  .embers span,
  .hero-img,
  .battlefield::before {
    animation: none !important;
    transition: none !important;
  }
  .hero-copy,
  .hero-portrait,
  .battlefield::before,
  .hero-img {
    transform: none !important;
  }
}

/* === Narrow viewports === */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 0 clamp(16px, 4vw, 32px);
  }
  .hero-copy {
    max-width: 100%;
    padding-left: 0;
    text-align: center;
    z-index: 3;
  }
  .hero-portrait {
    position: absolute;
    inset: 0;
    opacity: 0.45;
    pointer-events: none;
    z-index: 1;
  }
  .hero-title { font-size: clamp(36px, 9vw, 62px); }
  .hero-rule  { margin-left: auto; margin-right: auto; }
  .cta-btn    { margin: 0 auto; }
}

@media (max-height: 600px) {
  .hero-title   { font-size: clamp(30px, 5vw, 52px); }
  .hero-eyebrow { margin-bottom: 12px; }
  .hero-rule    { margin: 16px 0 14px; }
  .hero-body    { margin-bottom: 20px; }
}

/* === Mobile phone breakpoint ================================================
   Two things go wrong on ~375-430px phones without this block:
   1. The topbar's intrinsic content (brand + dock + Profile/Admin/Logout +
      lang switcher) is wider than the viewport. With grid-template-columns:
      minmax(0, 1fr) on .page we no longer expand the grid track, but the
      topbar's flex children can still overflow horizontally unless we let
      them wrap. Allow flex-wrap on the topbar and topbar-actions, and drop
      the redundant Profile button (own-avatar tap opens the same modal).
   2. Chat messages get cramped — trim outer padding and relax .chat__msg
      max-width so long messages have room to breathe. */
@media (max-width: 640px) {
  .topbar {
    padding: 10px 12px;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .brand           { gap: 10px; }
  .brand-mark      { width: 30px; }
  .brand-title     { font-size: 18px; }
  /* "Greatest of All Time" isn't essential once auth'd — drop it on small
     screens so the dock has room right under the brand. */
  .brand-subtitle  { display: none; }
  .topbar-left     { gap: 4px; min-width: 0; }
  /* Dock indent (matching the brand-name column on desktop) is unnecessary
     when the brand is compressed on mobile — pull it back to the left edge. */
  .dock            { margin-left: 0; flex-wrap: wrap; }
  .dock__chip      { padding: 2px 8px; letter-spacing: 0.22em; }
  .dock__presence  { letter-spacing: 0.22em; }

  .topbar-actions {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
  }
  .user-menu       { gap: 10px; min-width: 0; }
  /* Own username lives in the profile modal — hide the topbar copy on
     mobile so it doesn't shove Admin/Logout off-screen. */
  .user-menu__name { display: none; }
  /* Profile action is redundant on mobile — the same modal opens by tapping
     your own avatar in chat. Reclaim horizontal space in the menu. */
  .user-menu__profile { display: none; }
  .user-menu__admin,
  .user-menu__logout { font-size: 10px; letter-spacing: 0.18em; }

  .chat,
  .vs {
    padding-right: 10px;
    padding-left:  10px;
    min-width: 0;
  }
  .chat__messages { padding: 6px 4px 6px 2px; min-width: 0; }
  .chat__msg {
    max-width: 96%;
    gap: 8px;
    padding: 6px 10px;
    min-width: 0;
  }
  .chat__msg-avatar { width: 28px; height: 28px; }
  .chat__msg-author { font-size: 11px; letter-spacing: 0.12em; }
  .chat__msg-body   { font-size: 13px; }
  .chat__composer   { gap: 6px; }
  .chat__send       { padding: 0 14px; letter-spacing: 0.22em; }

  .vs__controls     { gap: 10px; }
  .vs__field        { min-width: 0; flex: 1 1 140px; }
}

/* === Train Lottery schedule modal ============================== */

/* Modal-scoped inline label (not the uppercase field label). The generic
   .modal__field label rule would uppercase-transform this too if we
   didn't scope it back. */
.modal__label {
  display: inline-block;
  margin-bottom: 6px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.82);
}

/* Enable/disable toggle — checkbox + label together in a row. */
.schedule__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: rgba(228, 232, 240, 0.92);
  cursor: pointer;
  text-transform: none;
}
.schedule__toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: rgba(246, 201, 91, 0.9);
  cursor: pointer;
}

/* Day pickers — a row of small chip-style checkboxes. */
.schedule__days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.schedule__day {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  min-width: 44px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(184, 188, 196, 0.6);
  background: rgba(4, 6, 8, 0.55);
  border: 1px solid rgba(200, 205, 215, 0.22);
  border-radius: 2px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.schedule__day input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.schedule__day:hover { color: rgba(246, 201, 91, 0.9); border-color: rgba(246, 201, 91, 0.32); }
.schedule__day:has(input:checked) {
  color: #ffffff;
  border-color: rgba(246, 201, 91, 0.6);
  background: rgba(246, 201, 91, 0.16);
}

/* Time-of-day row — hour + minute + timezone side by side. */
.schedule__time-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.schedule__time-row .modal__field { flex: 0 0 auto; min-width: 0; }
.schedule__time-row .schedule__timezone { flex: 1 1 200px; min-width: 200px; }
.schedule__time-row select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(4, 6, 8, 0.72);
  border: 1px solid rgba(200, 205, 215, 0.22);
  color: var(--cream);
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  letter-spacing: 0.03em;
  outline: none;
}
.schedule__time-row select:focus {
  border-color: rgba(232, 235, 239, 0.6);
  background: rgba(8, 10, 14, 0.85);
}

.schedule__discord-note {
  padding: 8px 12px;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgba(184, 188, 196, 0.7);
  background: rgba(4, 6, 8, 0.45);
  border-left: 2px solid rgba(200, 205, 215, 0.2);
}

/* Save-status text — small tone-tinted line above the actions row. */
.modal__status {
  margin: 0;
  padding: 6px 10px;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(184, 188, 196, 0.8);
  background: rgba(4, 6, 8, 0.45);
  border-left: 2px solid rgba(200, 205, 215, 0.2);
}
.modal__status[data-tone="ok"]      { color: #b6d4b6; border-color: rgba(120, 180, 120, 0.5); }
.modal__status[data-tone="warn"]    { color: #ff9a9a; border-color: rgba(200, 60, 60, 0.5); }
.modal__status[data-tone="pending"] { color: rgba(246, 201, 91, 0.85); border-color: rgba(246, 201, 91, 0.4); }

/* Buttons row — Cancel + Save. Reuses .modal__btn / .modal__btn--primary. */
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.modal__btn {
  appearance: none;
  padding: 10px 20px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(220, 224, 232, 0.82);
  background: transparent;
  border: 1px solid rgba(200, 205, 215, 0.35);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.modal__btn:hover { color: var(--gold-0); border-color: rgba(246, 201, 91, 0.55); }
.modal__btn:disabled { opacity: 0.5; cursor: wait; }
.modal__btn--primary {
  color: #ffffff;
  border-color: rgba(246, 201, 91, 0.6);
  background: rgba(246, 201, 91, 0.14);
}
.modal__btn--primary:hover {
  border-color: rgba(246, 201, 91, 0.9);
  background: rgba(246, 201, 91, 0.22);
}

/* Split action row: destructive action pushed to the left, primary
   actions (cancel/save) grouped on the right. Standard "delete lives
   opposite save" pattern that keeps the dangerous button out of the
   thumb path when tapping save. */
.modal__actions--split {
  justify-content: space-between;
  align-items: center;
}
.modal__actions-primary {
  display: flex;
  gap: 10px;
}
.modal__btn--danger {
  color: rgba(255, 180, 170, 0.9);
  border-color: rgba(220, 100, 90, 0.55);
}
.modal__btn--danger:hover {
  color: #ffe0dc;
  border-color: rgba(255, 130, 120, 0.95);
  background: rgba(180, 60, 50, 0.18);
}

/* ================================================================
   Mobile layout — phone-first tightening.
   ================================================================
   Two breakpoints below the existing 640px/520px rules:
     - 480px: primary phone treatment. Bottom-sheet modals, dock
       horizontal scroll, control-row stacking, sticky Merge pivot
       columns, popover drawers.
     - 360px: extra-compact devices (small Androids, iPhone SE 1st
       gen). Icon-only bells, tighter type.

   Below 640px is already a light shrink (topbar wrap, dock chip
   letter-spacing tightened, subtitle hidden). These new blocks
   layer under that — they don't replace it.

   All new rules stay inside media queries; nothing here reaches
   desktop viewports.
   ================================================================ */

/* Icon-only rendering machinery for header/menu buttons. Kept
   outside a media query so aria hooks + focus states behave the
   same everywhere; visibility is toggled inside the mobile block. */
.vs__header-btn-icon { display: none; }
.vs__header-btn      { display: inline-flex; align-items: center; gap: 6px; }

/* Dock chip strip wrapper — flex row that becomes a horizontal
   scroll container on narrow phones. The bells (mentions +
   presence) live OUTSIDE this wrapper so they stay pinned to the
   right regardless of chip-strip scroll position. */
.dock__scroll {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}


/* ================================================================
   Mobile layout — phone-first design.
   ================================================================
   PIXEL BUDGET at 375×812:
     topbar        ~52px
     dock strip    ~40px
     panel header  ~40px  (title + actions, NO subtitle)
     filter row    ~44px  (VS/Power/Merge only)
     -----------------
     ~176px used → ~636px content area (78%)

   Two breakpoints:
     - ≤480px : primary phone treatment
     - ≤360px : ultra-compact tuning for iPhone SE 1st gen etc.
   ================================================================ */

/* Icon-only rendering machinery (used by ≤480 to hide labels). */
.vs__header-btn-icon { display: none; }
.vs__header-btn      { display: inline-flex; align-items: center; gap: 6px; }

/* Dock chip-strip wrapper — flex row that becomes horizontal-scroll
   on narrow phones. Bells (mentions + presence) live OUTSIDE this
   wrapper so they stay pinned regardless of chip-strip position. */
.dock__scroll {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}

/* ================================================================
   ≤480px — primary phone block
   ================================================================ */
@media (max-width: 480px) {

  /* ---- Topbar: single-row, ~52px total ----
     - Brand mark stays; "6OAT" wordmark stays but small
     - Auth actions (Admin, Logout) become icon-only tap targets
     - No subtitle, no separator spans, no long letter-spacing
  */
  .topbar {
    padding: 6px 8px;
    row-gap: 4px;
    /* Force single row so brand + dock + auth actions all fit at 375px.
       Dock scroll-strip absorbs overflow; auth actions stay icon-tight. */
    flex-wrap: nowrap;
    gap: 6px;
  }
  .brand         { gap: 4px; flex: 0 0 auto; }
  .brand-mark    { width: 22px; }
  .brand-title   { font-size: 13px; letter-spacing: 0.04em; }
  /* On the tightest phones, hide the wordmark entirely — the shield
     icon alone identifies the site. */
  .brand-name    { display: none; }
  .brand-subtitle { display: none; }
  .topbar-left   { gap: 4px; min-width: 0; flex: 1 1 auto; }
  .topbar-actions {
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .user-menu       { gap: 4px; min-width: 0; }
  .user-menu__name { display: none; }
  .user-menu__profile { display: none; }
  .user-menu__admin,
  .user-menu__logout {
    padding: 5px 8px;
    font-size: 9px;
    letter-spacing: 0.08em;
    line-height: 1;
  }
  /* Language switcher: keep it visible but tight. */
  .lang-switcher__btn { padding: 4px 6px; }
  .lang-switcher__code { font-size: 10px; }

  /* ---- Dock strip: full-width row below the topbar ----
     Chip labels stay readable but the strip scrolls horizontally
     when it overflows. Bells stay pinned to the right.
  */
  .dock {
    margin-left: 0;
    flex-wrap: nowrap;
    width: 100%;
    align-items: center;
    gap: 2px;
    padding: 2px 0;
  }
  .dock__sep { display: none; }  /* the divider ticks are noise on phones */
  .dock__scroll {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
    padding: 0 4px;
  }
  .dock__scroll::-webkit-scrollbar { display: none; }
  .dock__scroll .dock__chip {
    scroll-snap-align: start;
    flex: 0 0 auto;
    padding: 6px 10px;
    letter-spacing: 0.12em;
    font-size: 10px;
    /* Active-state underline is more mobile-native than color-only. */
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
  }
  .dock__scroll .dock__chip.is-active {
    border-bottom-color: rgba(246, 201, 91, 0.9);
    color: var(--gold-0);
  }
  /* Bells pinned right, compact. */
  .dock__mentions,
  .dock__presence {
    flex: 0 0 auto;
    padding: 6px 6px;
    letter-spacing: 0.10em;
    font-size: 10px;
  }
  .dock__presence-label { display: none; }
  .dock__presence-dot   { width: 5px; height: 5px; }

  /* ---- Popovers → full-width bottom drawers ----
     Extends the ≤520px mentions/presence rule to also cover the
     language switcher. Bottom-drawer respects the iPhone home bar.
  */
  .mentions-panel,
  .presence-panel,
  .lang-switcher__list {
    position: fixed;
    top: auto;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: 60vh;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }

  /* ================================================================
     CHAT
     ================================================================ */
  .chat__title-group {
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .chat__title-group::-webkit-scrollbar { display: none; }
  .chat__slash-suggest,
  .chat__mention-suggest {
    max-width: min(360px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
  }
  .chat__msg-menu {
    max-width: calc(100vw - 16px);
    min-width: 0;
  }

  /* ================================================================
     VS / Power / Merge share the .vs shell
     ================================================================ */
  .vs { padding: 6px 10px 10px; gap: 8px; }

  /* Panel header: title on one line, minimize + reconcile icons
     tucked to the right. Subtitle KILLED on mobile — the panel name
     alone is enough context. */
  .vs__header { gap: 4px; }
  .vs__header-row  { gap: 6px; align-items: center; }
  .vs__title       { font-size: 14px; letter-spacing: 0.14em; line-height: 1.2; }
  .vs__subtitle    { display: none; }
  .vs__header-actions { gap: 4px; }
  .vs__header-btn         { padding: 5px 7px; border-width: 1px; }
  .vs__header-btn-label   { display: none; }
  .vs__header-btn-icon    { display: inline-block; }
  .vs__minimize { padding: 4px 8px; }

  /* Controls: horizontal-scroll pill row so multiple filters fit in
     a single band instead of stacking full-width. Each field becomes
     a compact chip; label sits above input in a tight column. */
  .vs__controls {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 4px;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
  }
  .vs__controls::-webkit-scrollbar { display: none; }
  .vs__field {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 60vw;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px;
    background: rgba(6, 8, 12, 0.5);
    border: 1px solid rgba(200, 205, 215, 0.15);
  }
  .vs__field > span:first-child {
    font-size: 8.5px;
    letter-spacing: 0.14em;
    color: rgba(184, 188, 196, 0.6);
    text-transform: uppercase;
  }
  .vs__field input,
  .vs__field select {
    background: transparent;
    border: 0;
    color: var(--cream);
    font-size: 12px;
    padding: 2px 0;
    min-width: 0;
  }
  .vs__field--upload { max-width: none; }
  .vs__field--upload input[type="file"] { font-size: 11px; }

  /* Table: tighter padding + smaller sort icons so the last column
     doesn't get clipped. */
  .vs__table thead th { padding: 5px 5px; font-size: 10px; letter-spacing: 0.10em; }
  .vs__table tbody td { padding: 4px 5px; font-size: 12px; }
  .vs__th--sortable span:first-child { margin-right: 3px; }
  .vs__sort-icon { width: 8px; font-size: 8px; }
  .vs__cell-rank { width: 28px; }
  .vs__cell-score { font-size: 11px; }
  .vs__edit-hint { display: none; }

  /* Power column trims */
  .vs__cell-power { padding-left: 3px; padding-right: 3px; }
  .vs__cell-delta { padding-left: 3px; padding-right: 3px; min-width: 40px; font-size: 11px; }
  .vs__cell-level { padding-left: 3px; padding-right: 3px; width: 30px; }

  /* Preview head compact */
  .vs__preview-head { flex-wrap: wrap; gap: 4px; font-size: 10px; }
  .vs__preview-count { font-size: 12px; }

  /* Actions row (Save/Reset): pin to bottom of panel */
  .vs__actions { position: sticky; bottom: 0; background: linear-gradient(to top, rgba(6,8,12,0.98) 60%, transparent); padding: 6px 0; }

  /* ================================================================
     MERGE ANALYSIS
     ================================================================ */
  .merge__controls {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .merge__sources { flex-direction: column; gap: 4px; }
  .merge__src-slot {
    display: grid;
    grid-template-columns: 68px 1fr 130px;
    gap: 6px;
    padding: 6px 8px;
    align-items: center;
  }
  .merge__src-slot .merge__src-label { font-size: 9px; letter-spacing: 0.10em; }
  .merge__src-slot select,
  .merge__src-slot input[type="date"] { font-size: 12px; padding: 3px 6px; }

  /* Summary cards → horizontal-scroll strip. */
  .merge__summary {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
  }
  .merge__summary::-webkit-scrollbar { display: none; }
  .merge__summary-card {
    flex: 0 0 60%;
    scroll-snap-align: start;
    padding: 8px 10px;
  }
  .merge__summary-count { font-size: 20px; }

  /* Scenario cards → horizontal-scroll strip. */
  .merge__scenarios {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
  }
  .merge__scenarios::-webkit-scrollbar { display: none; }
  .merge__scenario {
    flex: 0 0 78%;
    scroll-snap-align: start;
    padding: 8px 10px;
  }
  .merge__scenario-title { font-size: 11px; letter-spacing: 0.10em; }
  .merge__scenario-counts { gap: 4px; font-size: 11px; }
  .merge__scenario-count { padding: 1px 6px; font-size: 11px; }
  .merge__metric-label { min-width: 76px; font-size: 9px; letter-spacing: 0.10em; }
  .merge__metric-value { font-size: 13px; }
  .merge__metric-subline { font-size: 10px; }

  /* Pivot table: horizontal scroll with sticky Player + Tag. */
  .merge__pivot-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .merge__pivot-title { font-size: 12px; letter-spacing: 0.10em; }
  .merge__pivot-filters { flex-wrap: wrap; row-gap: 3px; gap: 8px; font-size: 10px; }
  .merge__pivot-table-wrap {
    overflow-x: auto;
    max-height: 55dvh;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
  }
  .merge__pivot-table th,
  .merge__pivot-table td {
    padding: 4px 5px;
    font-size: 10px;
    background: rgba(6, 8, 12, 0.98);
  }
  .merge__pivot-table thead th { z-index: 3; }
  .merge__pivot-table th:nth-child(1),
  .merge__pivot-table td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 96px;
    max-width: 120px;
    text-align: left;
    box-shadow: 3px 0 4px -3px rgba(0, 0, 0, 0.7);
  }
  .merge__pivot-table thead th:nth-child(1) { z-index: 4; }
  .merge__pivot-table th:nth-child(2),
  .merge__pivot-table td:nth-child(2) {
    position: sticky;
    left: 96px;
    z-index: 2;
    min-width: 48px;
    max-width: 60px;
    text-align: left;
    box-shadow: 3px 0 4px -3px rgba(0, 0, 0, 0.7);
  }
  .merge__pivot-table thead th:nth-child(2) { z-index: 4; }
  .merge__pivot-table tr.merge__row--all td:nth-child(1),
  .merge__pivot-table tr.merge__row--all td:nth-child(2)     { background: rgb(41, 36, 22); }
  .merge__pivot-table tr.merge__row--partial td:nth-child(1),
  .merge__pivot-table tr.merge__row--partial td:nth-child(2) { background: rgb(20, 33, 40); }

  /* ================================================================
     MODALS — bottom sheet
     ================================================================ */
  .modal,
  dialog.modal {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: 100vw;
    max-width: 100vw;
    max-height: 92dvh;
    border-radius: 12px 12px 0 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    animation: modalSheetUp 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes modalSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0);    }
  }
  .modal__form {
    max-height: none;
    padding: 14px 14px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .modal__title { font-size: 16px; letter-spacing: 0.10em; }
  .modal__eyebrow { font-size: 9px; letter-spacing: 0.24em; }
  .modal__actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(6, 8, 12, 0.98) 55%, rgba(6, 8, 12, 0.8) 90%, transparent);
    padding-top: 8px;
    margin-top: 6px;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }
  .modal__actions--split {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 6px;
  }
  .modal__actions--split .modal__actions-primary {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
  .modal__actions--split .modal__btn--danger {
    align-self: stretch;
    margin-top: 4px;
  }
  .modal__btn { padding: 11px 14px; font-size: 12px; }
  .modal--wide,
  .modal--user,
  .modal--lang { max-width: 100vw; width: 100vw; }
  .modal__field { margin-bottom: 6px; }
  .modal__field label { font-size: 9px; letter-spacing: 0.16em; }
  .modal__field input,
  .modal__field select,
  .modal__field textarea { width: 100%; font-size: 13px; }

  /* Admin modal */
  .admin-tabs {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab { padding: 8px 12px; letter-spacing: 0.12em; font-size: 10px; flex: 0 0 auto; }
  .admin-list { max-height: calc(92dvh - 200px); padding-right: 0; }
  .ar-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  .ar-row__rank { flex-direction: row; flex-wrap: wrap; }
  .bridged-form__members { max-height: 180px; }

  /* User profile view */
  .user-card__bio { max-height: 30dvh; overflow-y: auto; }

  /* Edit modal history */
  .modal__history-list { max-height: 25dvh; }

  /* Reconcile modal */
  .reconcile__sources { grid-template-columns: 1fr; }
  .reconcile__results { grid-template-columns: 1fr; max-height: 50dvh; }
  .reconcile__source { padding: 8px 10px; }
  .reconcile__source label { grid-template-columns: 68px 1fr; font-size: 11px; }
  .reconcile__pair {
    position: sticky;
    bottom: 60px;
    z-index: 1;
    margin-top: 6px;
  }
  .reconcile__cand-btn { min-height: 36px; padding: 6px 12px; }
  .reconcile__cand-name { font-size: 13px; }
  .lang-grid > * { min-height: 44px; }
}

/* ================================================================
   ≤360px — ultra-compact
   ================================================================ */
@media (max-width: 360px) {
  .brand-title    { font-size: 12px; }
  .brand-mark     { width: 22px; }
  .dock__scroll .dock__chip { padding: 5px 8px; letter-spacing: 0.08em; font-size: 9px; }
  .dock__mentions,
  .dock__presence { padding: 5px 5px; font-size: 9px; }
  .user-menu__admin,
  .user-menu__logout { padding: 4px 6px; font-size: 8px; letter-spacing: 0.06em; }
  .vs__table thead th,
  .vs__table tbody td { padding: 3px 4px; font-size: 10px; }
  .merge__pivot-table th:nth-child(1),
  .merge__pivot-table td:nth-child(1) { min-width: 80px; max-width: 100px; }
  .merge__pivot-table th:nth-child(2),
  .merge__pivot-table td:nth-child(2) { left: 80px; min-width: 44px; max-width: 50px; }
  .merge__summary-card { flex-basis: 72%; }
  .merge__scenario     { flex-basis: 84%; }
}

/* ================================================================
   Mini-game iframe frame
   ================================================================
   The game runs in its own container reached via /game/. Positioning
   mirrors the pre-split .game-overlay (fixed fullscreen, above .page
   but below the topbar/dock so the user can always click a dock chip
   to escape). Fades in/out via .is-visible; hidden attr keeps it out
   of the tab order + accessibility tree when not showing. */
.game-frame {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  border: 0;
  background: #2f1e10;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
  display: block;
}
.game-frame.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.game-frame[hidden] { display: none; }
body[data-game="running"] { overflow: hidden; }