/* ─────────────────────────────────────────────────────────────────────────
   Whisperwood redesign — lantern-lit cottagecore.
   Three directions live in one stylesheet, controlled by data-direction on
   the artboard root. Time-of-day overlays via data-tod shift the whole
   palette across all three directions (morning / midday / evening).
   ───────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

/* All Whisperwood UI scopes itself under .ww so it doesn't bleed into the
   design_canvas chrome around it. */
.ww {
  --serif: "Spectral", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --sans: "Manrope", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Defaults — overridden per direction below. */
  --bg: #18120c;
  --bg-panel: #211810;
  --bg-panel-hi: #2a1f14;
  --paper: #efe2c6;
  --paper-ink: #2a1f15;
  --paper-ink-dim: #6b563d;
  --paper-edge: #d9c8a5;

  --ink: #f0e3c8;
  --ink-dim: #b8a886;
  --ink-mute: #8a7c64;

  --amber: #e8a857;
  --amber-soft: #b78444;
  --amber-glow: rgba(232, 168, 87, 0.18);
  --moss: #7a9067;
  --brass: #c19c5e;
  --brass-line: rgba(193, 156, 94, 0.28);
  --rust: #c46a3f;
  --rust-soft: #8a4a2a;
  --plum: #6b5079;

  --grain-opacity: 0.05;
  --vignette: radial-gradient(ellipse at 50% 30%, transparent 0%, transparent 40%, rgba(0,0,0,0.35) 100%);

  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

.ww * { box-sizing: border-box; }
.ww ::selection { background: var(--amber); color: #1a130a; }

/* ── Direction: Lantern ─────────────────────────────────────────────────
   Warm amber on black walnut. The pub at dusk. */
.ww[data-direction="lantern"] {
  --bg: #16100a;
  --bg-panel: #1f1610;
  --bg-panel-hi: #281d14;
  --ink: #f1e3c6;
  --ink-dim: #b8a684;
  --ink-mute: #826f55;
  --amber: #ecae5f;
  --amber-soft: #b07f3e;
  --amber-glow: rgba(236, 174, 95, 0.22);
  --moss: #738a62;
  --brass: #c8a06a;
  --brass-line: rgba(200, 160, 106, 0.32);
  --paper: #ecdfc1;
  --paper-ink: #2a1f15;
  --paper-edge: #d4c19e;
}

/* ── Direction: Almanac ─────────────────────────────────────────────────
   Parchment dominant, lower-key dark frame around it. Ranger's open journal. */
.ww[data-direction="almanac"] {
  --bg: #1a1410;
  --bg-panel: #f0e2c2;        /* big surfaces become cream */
  --bg-panel-hi: #f7eccd;
  --ink: #f3e8d0;             /* used outside the cream panels */
  --ink-dim: #b7a787;
  --ink-mute: #7a6a52;
  --amber: #cf8a3a;
  --amber-soft: #a8682b;
  --amber-glow: rgba(207, 138, 58, 0.15);
  --moss: #5c7048;
  --brass: #a07a45;
  --brass-line: rgba(160, 122, 69, 0.4);
  --paper: #efe1c2;
  --paper-ink: #2a2014;
  --paper-edge: #cdba93;
}

/* ── Direction: Grove ───────────────────────────────────────────────────
   Mossier, deeper greens, lantern light through pine. The committed direction.
   Time-of-day shifts under [data-tod] below stay dark across all three modes
   — morning is the *lightest* dark, evening is the *deepest* dark. No whites. */
.ww[data-direction="grove"] {
  --bg: #131a14;
  --bg-panel: #1a221b;
  --bg-panel-hi: #212a23;
  --ink: #dbe2cd;
  --ink-dim: #9aa687;
  --ink-mute: #6e7a5e;
  --amber: #d9a05a;
  --amber-soft: #a47536;
  --amber-glow: rgba(217, 160, 90, 0.18);
  --moss: #92a875;
  --brass: #b8a366;
  --brass-line: rgba(184, 163, 102, 0.26);
  --paper: #1a221b;
  --paper-ink: #dbe2cd;
  --paper-edge: rgba(184, 163, 102, 0.26);
}

/* ── Time of day (Grove-tuned, all dark) ────────────────────────────────
   Morning: a touch lighter, cool sage cast, dewier lanternlight.
   Midday:  neutral Grove baseline — balanced amber over mossy bg.
   Evening: deepest bg, more saturated lantern glow.
   Each one applies on top of the direction tokens above. */
.ww[data-direction="grove"][data-tod="morning"] {
  --bg: #1a241c;
  --bg-panel: #212c23;
  --bg-panel-hi: #28342a;
  --amber: #c8b97a;          /* dewier, cooler lantern */
  --amber-soft: #8e8048;
  --amber-glow: rgba(200, 185, 122, 0.18);
  --moss: #a3b88a;
  --brass: #b8b178;
  --brass-line: rgba(184, 177, 120, 0.30);
  --ink: #e0e6cf;
  --ink-dim: #a3ad8c;
}
.ww[data-direction="grove"][data-tod="midday"] {
  /* keep the Grove baseline */
}
.ww[data-direction="grove"][data-tod="evening"] {
  --bg: #0a0e0b;
  --bg-panel: #12181a;
  --bg-panel-hi: #181f1a;
  --amber: #e8b066;
  --amber-soft: #b8843e;
  --amber-glow: rgba(232, 176, 102, 0.32);
  --moss: #6f8462;
  --brass: #b89a5e;
  --brass-line: rgba(184, 154, 94, 0.30);
  --ink: #d4ddc6;
  --ink-dim: #8e9a7c;
}

/* ── Base type ──────────────────────────────────────────────────────── */
.ww h1, .ww h2, .ww h3, .ww h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.ww h1 { font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; }
.ww h2 { font-size: 28px; line-height: 1.15; }
.ww h3 { font-size: 20px; line-height: 1.2; }
.ww .display {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ww .lede {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-dim);
  font-size: 18px;
  line-height: 1.4;
}
.ww .eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}
.ww .muted { color: var(--ink-mute); }
.ww .body { font-size: 14px; line-height: 1.55; color: var(--ink-dim); }
.ww .mono { font-family: var(--mono); }

/* On cream-paper panels, swap to dark ink. */
.ww[data-direction="almanac"] .panel-paper h1,
.ww[data-direction="almanac"] .panel-paper h2,
.ww[data-direction="almanac"] .panel-paper h3 { color: var(--paper-ink); }
.ww[data-direction="almanac"] .panel-paper .lede,
.ww[data-direction="almanac"] .panel-paper .muted,
.ww[data-direction="almanac"] .panel-paper { color: #5c4a30; }

/* ── Grain overlay (subtle warm noise) ──────────────────────────────── */
.ww .grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.78  0 0 0 0 0.55  0 0 0 0.8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* Vignette / lantern glow at the top of pages. */
.ww .lantern-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 12% -10%, var(--amber-glow), transparent 60%),
    radial-gradient(50% 35% at 100% 110%, var(--amber-glow), transparent 60%);
}

/* ── Page chrome ────────────────────────────────────────────────────── */
.ww .page {
  position: relative;
  width: 100%;
  min-height: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

.ww .nav {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 18px 36px;
  border-bottom: 1px solid var(--brass-line);
  position: relative;
  z-index: 2;
}
.ww .nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ww .nav .brand .leaf { color: var(--amber); }
.ww .nav .tabs {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.ww .nav .tabs a {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: color 120ms, background 120ms;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ww .nav .tabs a:hover { color: var(--ink); background: rgba(255,255,255,0.03); }
.ww .nav .tabs a.active {
  color: var(--bg);
  background: var(--amber);
}
.ww[data-direction="almanac"] .nav .tabs a.active { color: #2a1f15; }

.ww .nav .user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-dim);
}
.ww .nav .user .guild {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--brass-line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.18);
  transition: border-color 160ms ease, background 160ms ease;
}
.ww .nav .user .guild:hover,
.ww .nav .user .guild:focus-within {
  border-color: var(--amber);
  background: rgba(0, 0, 0, 0.28);
}
.ww .nav .user .guild .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--moss); }

/* The actual <select> inside the .guild pill. Strip native chrome so the
   wrapper's brass-edged pill is what the user sees, then drop in a custom
   chevron via SVG so the affordance is still obvious. The element inherits
   the pill's font + color; only its dropdown options need explicit
   background/color (browsers paint that menu OS-natively and won't honor
   inherited values for it). */
.ww .nav .user .guild .nav-guild-select-inline {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 0 18px 0 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  /* Inline SVG chevron tinted with the amber accent — kept small so it sits
     comfortably inside the pill without crowding the guild name. The
     %23 is a URL-escaped '#' for the color. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23e8a857' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 10px 7px;
  transition: color 160ms ease;
}
.ww .nav .user .guild .nav-guild-select-inline:hover,
.ww .nav .user .guild .nav-guild-select-inline:focus {
  color: var(--amber);
}
/* Dropdown menu list. We can only partly style this — most browsers paint
   the open menu using OS-native chrome — but specifying these gives modern
   Chromium-family + Firefox a chance to honor them. Falls back to OS
   defaults elsewhere, which is acceptable. */
.ww .nav .user .guild .nav-guild-select-inline option {
  background-color: #1a1410;
  color: var(--ink);
}
/* In-nav time-of-day picker. Sits between the guild pill and the avatar.
   Compact 4-segment pill: Auto / Morning / Midday / Evening. Auto carries
   a label, the others are icon-only. Active state lights up in amber. */
.ww .tod-toggle {
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--brass-line);
  border-radius: 999px;
  gap: 2px;
  position: relative;
}
.ww .tod-toggle .seg {
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 8px;
  height: 28px;
  width: 30px;
  transition: color 160ms ease, background 160ms ease;
}
.ww .tod-toggle .seg.is-auto {
  width: auto;
  padding: 0 12px 0 10px;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}
.ww .tod-toggle .seg.is-auto .auto-now {
  color: var(--ink-mute);
  font-size: 10px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.03em;
  margin-left: 2px;
}
.ww .tod-toggle .seg:hover { color: var(--ink); }
.ww .tod-toggle .seg.active {
  color: var(--amber);
  background: var(--amber-glow);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 30%, transparent);
}
.ww .tod-toggle .seg.active .auto-now { color: var(--amber); opacity: 0.7; }
.ww .tod-toggle .seg svg { width: 14px; height: 14px; }

/* Cross-fade body bg + lanternlight when the user shifts time-of-day.
   Animating CSS custom-property colors via transition needs the @property
   declarations below, otherwise the browser swaps instantly. */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #131a14; }
@property --bg-panel { syntax: "<color>"; inherits: true; initial-value: #1a221b; }
@property --bg-panel-hi { syntax: "<color>"; inherits: true; initial-value: #212a23; }
@property --amber { syntax: "<color>"; inherits: true; initial-value: #d9a05a; }
@property --amber-glow { syntax: "<color>"; inherits: true; initial-value: rgba(217,160,90,0.18); }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #dbe2cd; }
@property --ink-dim { syntax: "<color>"; inherits: true; initial-value: #9aa687; }
@property --moss { syntax: "<color>"; inherits: true; initial-value: #92a875; }
@property --brass { syntax: "<color>"; inherits: true; initial-value: #b8a366; }
.ww[data-direction="grove"] {
  transition:
    --bg 700ms ease,
    --bg-panel 700ms ease,
    --bg-panel-hi 700ms ease,
    --amber 700ms ease,
    --amber-glow 700ms ease,
    --ink 700ms ease,
    --ink-dim 700ms ease,
    --moss 700ms ease,
    --brass 700ms ease;
}

.ww .nav .user .av {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--amber), var(--rust));
  color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; letter-spacing: 0;
  font-family: var(--sans);
  border: 1px solid var(--brass-line);
}

/* ── Page body container ────────────────────────────────────────────── */
.ww .content {
  position: relative;
  z-index: 1;
  padding: 36px 48px 48px;
  max-width: 1240px;
  margin: 0 auto;
}

.ww .page-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; position: relative; }
.ww .page-head .title-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.ww .page-head h1 { font-size: 40px; }
.ww .page-head .count-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: var(--amber);
  color: var(--bg);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.ww[data-direction="almanac"] .page-head .count-pill { color: #2a1f15; }

/* Hairline divider w/ a centered leaf glyph. */
.ww .hr-leaf {
  display: flex; align-items: center; gap: 12px;
  color: var(--brass);
  margin: 0;
}
.ww .hr-leaf::before, .ww .hr-leaf::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--brass-line);
}
.ww .hr-leaf .leaf { font-size: 10px; opacity: 0.85; }

.ww .leaf-glyph {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.12em;
  color: currentColor;
}

/* ── Card binder (the tight grid on a dark wood/moss surface) ───────── */
.ww .binder {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--bg-panel-hi), var(--bg-panel) 70%),
    var(--bg-panel);
  border-radius: 18px;
  border: 1px solid var(--brass-line);
  padding: 28px 28px 32px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 22px 50px -32px rgba(0,0,0,0.8),
    0 2px 8px rgba(0,0,0,0.35);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
}
.ww .binder::before {
  /* very subtle horizontal wood-grain striations */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 3px,
      rgba(255,255,255,0.015) 3px,
      rgba(255,255,255,0.015) 4px
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.5  0 0 0 0 0.25  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
  background-size: auto, 240px 240px;
  mix-blend-mode: overlay;
}
.ww .binder::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(140% 90% at 50% 30%, transparent 50%, rgba(0,0,0,0.45) 100%);
}
.ww .binder-head {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--brass-line);
  z-index: 1;
}
.ww .binder-head h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  color: var(--ink);
  font-weight: 500;
}
.ww .binder-head .meta {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ww .card-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.ww .card-grid.is-six { grid-template-columns: repeat(6, 1fr); }
.ww .card-grid.is-four { grid-template-columns: repeat(4, 1fr); }

/* ── Card tile (looks like a slotted card in a binder) ──────────────── */
.ww .card-tile {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 140ms, box-shadow 140ms;
}
.ww .card-tile:hover { transform: translateY(-2px); }

.ww .card-art {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4),
    0 8px 18px -10px rgba(0,0,0,0.7);
  background: #2a1f15;
}
.ww .card-art .photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.ww .card-art .frame {
  position: absolute; inset: 0;
  padding: 8px 8px 9px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  color: #f4e6c4;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 22%, transparent 60%, rgba(0,0,0,0.75) 100%),
    radial-gradient(120% 60% at 50% 110%, rgba(0,0,0,0.5), transparent 70%);
}
.ww .card-art .frame .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.ww .card-art .name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.1;
}
.ww .card-art .stars {
  color: #ffd87a;
  letter-spacing: 1px;
  font-size: 9px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.ww .card-art .bottom {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 6px;
}
.ww .card-art .stats {
  font-family: var(--mono);
  font-size: 10px;
  color: #f4e6c4;
  display: flex; gap: 6px;
}
.ww .card-art .stats span { display: inline-flex; align-items: center; gap: 2px; }
.ww .card-art .element {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.3);
}
.ww .card-art.locked { filter: saturate(0) brightness(0.5); }
.ww .card-art.locked::after {
  content: "?";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic;
  font-size: 48px; color: rgba(244,230,196,0.35);
}

.ww .card-tile .label {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 1px;
  text-align: center;
}
.ww .card-tile .label .n {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.ww .card-tile .label .c {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

/* Wood variant kept as an alias so existing pages.jsx markup using .is-wood
   still works — visually identical to plain .binder now. */
.ww .binder.is-wood { /* no-op — base .binder is already dark wood */ }

/* ── Buttons ────────────────────────────────────────────────────────── */
.ww .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform 80ms, background 120ms, border-color 120ms;
  line-height: 1;
}
.ww .btn:active { transform: translateY(1px); }
.ww .btn-primary {
  background: var(--amber);
  color: #1a1108;
  border-color: var(--amber);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 18px -10px var(--amber);
}
.ww .btn-primary:hover { background: color-mix(in srgb, var(--amber) 88%, #fff 12%); }
.ww .btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--brass-line);
}
.ww .btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: var(--brass); }
.ww .btn-danger {
  background: transparent;
  color: var(--rust);
  border-color: color-mix(in srgb, var(--rust) 50%, transparent);
}
.ww .btn-danger:hover { background: color-mix(in srgb, var(--rust) 12%, transparent); }
/* Compact button for dense list rows (the composer's item tray). */
.ww .btn-sm { padding: 8px 13px; font-size: 13px; }

/* ── Forms ──────────────────────────────────────────────────────────── */
.ww .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.ww .field label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: flex; align-items: center; gap: 8px;
}
.ww .field input[type="text"],
.ww .field input[type="number"],
.ww .field textarea,
.ww .field select {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--brass-line);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 8px;
  font: inherit;
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  transition: border-color 120ms, background 120ms;
}
.ww .field input:focus,
.ww .field textarea:focus,
.ww .field select:focus {
  border-color: var(--amber);
  background: rgba(0,0,0,0.2);
}
.ww .field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.ww .field-help { font-size: 12px; color: var(--ink-mute); }

/* The composer's body-size slider — range inputs have no CCG precedent, so just
   tint the native control to match the theme. */
.ww input.ww-range { accent-color: var(--amber); cursor: pointer; }

.ww[data-direction="almanac"] .panel-paper .field label { color: #6e5836; }
.ww[data-direction="almanac"] .panel-paper .field input,
.ww[data-direction="almanac"] .panel-paper .field textarea,
.ww[data-direction="almanac"] .panel-paper .field select {
  background: rgba(255,255,255,0.6);
  border-color: var(--paper-edge);
  color: var(--paper-ink);
}
.ww[data-direction="almanac"] .panel-paper .field input:focus,
.ww[data-direction="almanac"] .panel-paper .field textarea:focus,
.ww[data-direction="almanac"] .panel-paper .field select:focus {
  border-color: var(--amber-soft);
  background: rgba(255,255,255,0.85);
}

.ww .swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ww .swatch {
  width: 30px; height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.4);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.ww .swatch.selected {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* Star rarity row */
.ww .rarity-row { display: flex; gap: 4px; font-size: 16px; color: var(--amber); letter-spacing: 2px; }
.ww .rarity-row.dim { color: var(--ink-mute); }

/* Budget bar */
.ww .budget {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--brass-line);
}
.ww[data-direction="almanac"] .panel-paper .budget {
  background: rgba(0,0,0,0.04);
  border-color: var(--paper-edge);
}
.ww .budget .num {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--amber);
}
.ww .budget .bar {
  flex: 1;
  height: 6px;
  background: rgba(0,0,0,0.3);
  border-radius: 999px;
  overflow: hidden;
}
.ww .budget .bar .fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--moss), var(--amber));
}

/* Stat tabs (Atk/Def/Dice) */
.ww .stat-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ww .stat {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--brass-line);
  border-radius: 10px;
  padding: 14px;
}
.ww[data-direction="almanac"] .panel-paper .stat {
  background: rgba(0,0,0,0.04);
  border-color: var(--paper-edge);
}
.ww .stat .label-mini {
  font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 6px;
}
.ww[data-direction="almanac"] .panel-paper .stat .label-mini { color: #7a6244; }
.ww .stat .val {
  font-family: var(--serif); font-size: 32px; font-weight: 500;
  color: var(--ink); line-height: 1;
}
.ww[data-direction="almanac"] .panel-paper .stat .val { color: var(--paper-ink); }
.ww .stat .steppers {
  position: absolute; top: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.ww .stat .step {
  width: 22px; height: 16px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--brass-line);
  color: var(--ink-dim);
  font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* ── Submission tile (admin queue) ──────────────────────────────────── */
.ww .queue-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ww .sub-tile {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--brass-line);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
  transition: transform 140ms, border-color 140ms;
}
.ww[data-direction="almanac"] .sub-tile {
  background: var(--paper);
  border-color: var(--paper-edge);
  color: var(--paper-ink);
}
.ww .sub-tile:hover { transform: translateY(-2px); border-color: var(--amber); }
.ww .sub-tile .thumb { position: relative; aspect-ratio: 5/7; overflow: hidden; }
.ww .sub-tile .thumb .pill {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,0.55);
  color: #f4e6c4;
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
}
.ww .sub-tile .meta { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.ww .sub-tile .meta .name { font-family: var(--serif); font-size: 16px; color: var(--ink); font-weight: 500; }
.ww[data-direction="almanac"] .sub-tile .meta .name { color: var(--paper-ink); }
.ww .sub-tile .meta .sub { font-size: 12px; color: var(--ink-mute); display: flex; gap: 8px; }
.ww[data-direction="almanac"] .sub-tile .meta .sub { color: #7a6244; }
.ww .sub-tile .meta .by {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 2px;
}
.ww[data-direction="almanac"] .sub-tile .meta .by { color: #6e5836; }

/* ── Featured card hero (used inside Catalog "this week" strip) ────── */
/* ── Catalog: hero strip + horizontal "new this week" shelf ───────── */
.ww .hero-strip {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
/* Hero card overrides the default vertical featured-card layout — now it's
   side-by-side: text block on the left, portrait preview on the right at a
   sane fixed size (the hero column is wide, so a 5:7 preview at column-width
   would be ~900px tall — way too much). */
.ww .hero-strip .featured-card.is-hero {
  display: grid;
  grid-template-columns: 1fr 200px;
  grid-auto-rows: min-content;   /* don't stretch text rows */
  align-content: start;          /* pack text to the top */
  row-gap: 10px;
  column-gap: 20px;
  align-items: start;
  padding: 22px 22px 22px 24px;
}
.ww .hero-strip .featured-card.is-hero > :not(.preview) {
  /* text column flows top-down inside the grid */
  grid-column: 1;
}
.ww .hero-strip .featured-card.is-hero .preview {
  grid-column: 2;
  grid-row: 1 / -1;
  margin-top: 0;
  width: 200px;
  aspect-ratio: 5 / 7;
  align-self: center;
}
.ww .featured-card.is-clickable {
  cursor: pointer;
  transition: transform 140ms, border-color 140ms, box-shadow 140ms;
}
.ww .featured-card.is-clickable:hover {
  transform: translateY(-2px);
  border-color: var(--amber);
  box-shadow: 0 12px 28px -16px rgba(0,0,0,0.7);
}
.ww .featured-card .preview { cursor: inherit; }

.ww .new-shelf-wrap {
  position: relative;
  margin-bottom: 28px;
}
.ww .new-shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 16px;
}
.ww .new-shelf-head h2 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
}
.ww .new-shelf-head .meta {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ww .new-shelf {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  padding: 2px 24px 14px 2px;
  scroll-behavior: smooth;
  scrollbar-color: var(--brass-line) transparent;
  scrollbar-width: thin;
}
.ww .new-shelf::-webkit-scrollbar { height: 8px; }
.ww .new-shelf::-webkit-scrollbar-track { background: transparent; }
.ww .new-shelf::-webkit-scrollbar-thumb {
  background: var(--brass-line);
  border-radius: 999px;
}
.ww .new-shelf::-webkit-scrollbar-thumb:hover { background: var(--brass); }

.ww .new-card {
  flex: 0 0 172px;
  scroll-snap-align: start;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ww .new-card .art-wrap {
  position: relative;
  aspect-ratio: 5 / 7;
  transition: transform 140ms;
}
.ww .new-card:hover .art-wrap { transform: translateY(-3px); }

/* Fresh-cards get an amber edge glow so they catch the eye without
   overlapping the painted card name. */
.ww .new-card.is-fresh .art-wrap .card-art {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4),
    0 0 0 1.5px var(--amber),
    0 14px 26px -16px var(--amber-glow);
}

.ww .new-card .lbl {
  text-align: center;
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 4px;
}
.ww .new-card .lbl .n {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ww .new-card .lbl .c {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-mute);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.ww .new-card .lbl .day-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--ink-dim);
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--brass-line);
}
.ww .new-card .lbl .day-tag.is-new {
  color: #1a1108;
  background: var(--amber);
  border-color: var(--amber);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Right-edge fade hint that there's more to scroll */
.ww .new-shelf-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 14px; right: 0;
  width: 60px;
  background: linear-gradient(90deg, transparent, var(--bg) 92%);
  pointer-events: none;
}

.ww .featured-strip {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 26px;
}
.ww .featured-card {
  position: relative;
  border-radius: 14px;
  padding: 16px;
  background: var(--bg-panel);
  border: 1px solid var(--brass-line);
  overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
}
.ww .featured-card.is-hero {
  background:
    radial-gradient(60% 100% at 0% 0%, var(--amber-glow), transparent 60%),
    var(--bg-panel-hi);
}
.ww[data-direction="almanac"] .featured-card { background: var(--paper); border-color: var(--paper-edge); color: var(--paper-ink); }
.ww[data-direction="almanac"] .featured-card.is-hero {
  background:
    radial-gradient(60% 100% at 0% 0%, rgba(207,138,58,0.18), transparent 60%),
    var(--paper);
}
.ww .featured-card .eyebrow { font-size: 10px; }
.ww .featured-card .name { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink); }
.ww[data-direction="almanac"] .featured-card .name { color: var(--paper-ink); }
.ww .featured-card .by { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; }
.ww .featured-card .preview {
  margin-top: auto;
  aspect-ratio: 5/7;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.35);
}

/* ── Admin Edit two-column ──────────────────────────────────────────── */
.ww .edit-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  align-items: start;
}
.ww .edit-preview {
  position: sticky; top: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.ww .preview-card {
  aspect-ratio: 5/7;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--brass-line);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.9);
}
.ww .diff-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  padding: 2px 7px;
  border-radius: 999px;
}
.ww .danger-zone {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--rust) 35%, transparent);
  background: color-mix(in srgb, var(--rust) 7%, transparent);
  border-radius: 12px;
}
.ww .danger-zone h3 { color: var(--rust); }

/* Submitter sidebar in edit */
.ww .submitter-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--brass-line);
  border-radius: 10px;
  padding: 14px;
}
.ww[data-direction="almanac"] .submitter-card {
  background: rgba(255,255,255,0.4);
  border-color: var(--paper-edge);
}

/* Tabs on edit page header */
.ww .tabs-row { display: flex; gap: 4px; margin-top: 14px; }
.ww .tabs-row .t {
  font-size: 12px; font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink-dim);
  cursor: pointer;
  font-family: var(--sans);
}
.ww .tabs-row .t.active { background: rgba(255,255,255,0.05); color: var(--ink); border: 1px solid var(--brass-line); }
.ww[data-direction="almanac"] .panel-paper .tabs-row .t { color: #7a6244; }
.ww[data-direction="almanac"] .panel-paper .tabs-row .t.active { background: rgba(0,0,0,0.04); color: var(--paper-ink); border-color: var(--paper-edge); }

/* Panels */
.ww .panel {
  background: var(--bg-panel);
  border: 1px solid var(--brass-line);
  border-radius: 14px;
  padding: 22px 24px;
}
/* panel-paper kept as an alias — same dark surface as .panel now. */
.ww .panel-paper {
  background: var(--bg-panel);
  border: 1px solid var(--brass-line);
  border-radius: 14px;
  padding: 22px 24px;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 22px 50px -32px rgba(0,0,0,0.8);
}

/* Photo upload dropzone */
.ww .dropzone {
  border: 1.5px dashed var(--brass-line);
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--ink-dim);
}
.ww .dropzone .icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--amber-glow);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--amber);
  margin-bottom: 6px;
}

/* "Tonight" feed item */
.ww .feed { display: flex; flex-direction: column; gap: 12px; }
.ww .feed-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--brass-line);
  font-size: 13px;
}
.ww .feed-item:last-child { border-bottom: 0; }
.ww .feed-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-top: 6px; flex-shrink: 0; }
.ww .feed-item .text { color: var(--ink-dim); }
.ww .feed-item .text strong { color: var(--ink); font-weight: 600; }
.ww .feed-item .when { color: var(--ink-mute); font-family: var(--mono); font-size: 11px; margin-left: auto; white-space: nowrap; }

/* ── Filter bar (Catalog) ─────────────────────────────────────────── */
.ww .filter-bar {
  margin-bottom: 24px;
  padding: 14px 18px;
  border: 1px solid var(--brass-line);
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ww .filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.ww .filter-row .filter-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  min-width: 64px;
  margin-right: 4px;
}
.ww .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--brass-line);
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.ww .chip:hover { color: var(--ink); border-color: var(--brass); }
.ww .chip.active {
  background: var(--amber-glow);
  border-color: var(--amber);
  color: var(--amber);
}
.ww .chip .chip-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
  padding-left: 2px;
}
.ww .chip.active .chip-count { color: var(--amber); }
.ww .chip .swatch-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.ww .chip .stars {
  color: var(--amber);
  letter-spacing: 1.5px;
  font-size: 11px;
}
.ww .chip.is-clear {
  margin-left: auto;
  border-style: dashed;
  color: var(--ink-mute);
}

/* Element-list items become clickable when piped into the filter */
.ww .element-list li.is-clickable { cursor: pointer; }
.ww .element-list li.is-clickable:hover { color: var(--ink); }
.ww .element-list li.is-active .el-name { color: var(--amber); font-weight: 600; }

.ww .empty-filter {
  padding: 36px 24px;
  text-align: center;
  color: var(--ink-mute);
  border: 1px dashed var(--brass-line);
  border-radius: 14px;
  font-family: var(--serif);
  font-style: italic;
  margin-bottom: 28px;
}

/* ── Team section (My Collection) ─────────────────────────────────── */
.ww .team-section {
  margin-bottom: 28px;
  padding: 22px 24px 24px;
  border: 1px solid var(--brass-line);
  border-radius: 16px;
  background: var(--bg-panel);
  position: relative;
  overflow: hidden;
}
.ww .team-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 100% 0%, var(--amber-glow), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(146,168,117,0.08), transparent 60%);
  pointer-events: none;
}
.ww .team-section > * { position: relative; }

.ww .team-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 16px;
}
.ww .team-section-head h2 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
}
.ww .team-section-head .head-meta {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.ww .team-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--brass-line);
}
.ww .team-tab {
  padding: 6px 12px 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--brass-line);
  color: var(--ink-dim);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 120ms, background 120ms, border-color 120ms;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ww .team-tab:hover { color: var(--ink); border-color: var(--brass); }
.ww .team-tab .pip {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
}
.ww .team-tab.active {
  background: var(--amber-glow);
  color: var(--amber);
  border-color: var(--amber);
}
.ww .team-tab.active .pip { color: var(--amber); opacity: 0.7; }
.ww .team-tab.is-add {
  background: rgba(255,255,255,0.02);
  border-style: dashed;
}
.ww .team-tab.is-add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ww .team-body { display: flex; flex-direction: column; gap: 16px; }

.ww .team-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ww .team-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed transparent;
  padding: 2px 4px;
  outline: none;
  min-width: 180px;
}
.ww .team-name:hover { border-bottom-color: var(--brass-line); }
.ww .team-name:focus { border-bottom-color: var(--amber); color: var(--ink); }
.ww .team-name-row .name-hint {
  font-size: 12px;
  color: var(--ink-mute);
  font-family: var(--sans);
}

.ww .team-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.ww .team-slot {
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ww .team-slot .slot-art {
  position: relative;
  aspect-ratio: 5/7;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 140ms, border-color 140ms;
}
.ww .team-slot:hover .slot-art { transform: translateY(-2px); }
.ww .team-slot.is-empty .slot-art {
  background: rgba(0,0,0,0.30);
  border: 1.5px dashed var(--brass-line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--ink-mute);
}
.ww .team-slot.is-empty:hover .slot-art {
  border-color: var(--amber);
  color: var(--amber);
}
.ww .team-slot .plus {
  font-family: var(--serif);
  font-size: 36px;
  font-style: italic;
  line-height: 1;
}
.ww .team-slot.is-filled .slot-art {
  box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 10px 20px -14px rgba(0,0,0,0.9);
}
.ww .team-slot .slot-num {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-mute);
  background: transparent;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  z-index: 2;
}
/* Hide the slot-number on filled slots so it doesn't overlap the painted
   card name. Empty slots keep it as a guide. */
.ww .team-slot.is-filled .slot-num { display: none; }
.ww .team-slot .slot-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.75);
  color: var(--ink);
  border: 1px solid var(--brass-line);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 120ms, background 120ms;
  z-index: 3;
}
.ww .team-slot:hover .slot-remove { opacity: 1; }
.ww .team-slot .slot-remove:hover { background: var(--rust); }
.ww .team-slot .slot-label {
  text-align: center;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink);
  line-height: 1.2;
  min-height: 1.2em;
}
.ww .team-slot.is-empty .slot-label {
  color: var(--ink-mute);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-style: normal;
}

.ww .team-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--brass-line);
  font-size: 13px;
  color: var(--ink-dim);
}
.ww .team-stats .stat-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ww .team-stats .stat-block .lbl {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ww .team-stats .stat-block .v {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.ww .team-stats .element-mix {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.ww .team-stats .element-mix .mix-pip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  background: rgba(0,0,0,0.25);
  padding: 3px 8px;
  border-radius: 999px;
}
.ww .team-stats .element-mix .mix-pip .sw {
  width: 7px; height: 7px;
  border-radius: 2px;
}
.ww .team-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* ── Team card picker (modal) ─────────────────────────────────────── */
.ww .picker-card {
  width: min(880px, 100%);
  max-height: calc(100vh - 80px);
  background: var(--bg-panel);
  border: 1px solid var(--brass-line);
  border-radius: 18px;
  padding: 26px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  box-shadow: 0 60px 120px -30px rgba(0,0,0,0.9);
  animation: card-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ww .picker-card .picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ww .picker-card h2 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  font-weight: 500;
}
.ww .picker-card .picker-sub {
  font-size: 13px;
  color: var(--ink-mute);
  font-family: var(--sans);
}
.ww .picker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  overflow-y: auto;
  padding: 2px 4px;
  scrollbar-color: var(--brass-line) transparent;
  scrollbar-width: thin;
}
.ww .picker-grid::-webkit-scrollbar { width: 8px; }
.ww .picker-grid::-webkit-scrollbar-track { background: transparent; }
.ww .picker-grid::-webkit-scrollbar-thumb {
  background: var(--brass-line);
  border-radius: 999px;
}
.ww .picker-tile {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.ww .picker-tile .pt-art {
  aspect-ratio: 5/7;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.4);
  transition: transform 140ms;
}
.ww .picker-tile:hover .pt-art { transform: translateY(-2px); }
.ww .picker-tile .pt-name {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink);
  line-height: 1.2;
}
.ww .picker-tile .pt-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.ww .picker-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-mute);
  font-family: var(--serif);
  font-style: italic;
}

/* ── Trades page ──────────────────────────────────────────────────── */
.ww .trade-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--brass-line);
  margin-bottom: 24px;
  padding-bottom: 14px;
}
.ww .trade-tabs .tab {
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-dim);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 120ms, background 120ms;
}
.ww .trade-tabs .tab:hover { color: var(--ink); }
.ww .trade-tabs .tab.active {
  background: var(--amber-glow);
  border-color: var(--amber);
  color: var(--amber);
}
.ww .trade-tabs .tab .pip {
  font-family: var(--mono);
  font-size: 10px;
  background: rgba(0,0,0,0.35);
  color: var(--ink-mute);
  padding: 1px 7px;
  border-radius: 999px;
}
.ww .trade-tabs .tab.active .pip { color: var(--amber); }

.ww .trade-section { margin-bottom: 28px; }
.ww .trade-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}
.ww .trade-section-head h2 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
}
.ww .trade-section-head .meta {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.ww .trade-row {
  background: var(--bg-panel);
  border: 1px solid var(--brass-line);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.ww .trade-row.is-incoming { border-left: 3px solid var(--amber); }
.ww .trade-row.is-outgoing { border-left: 3px solid var(--moss); }
.ww .trade-row.is-browse   { border-left: 3px solid var(--brass-line); }
.ww .trade-row.is-history  { border-left: 3px solid color-mix(in srgb, var(--moss) 50%, transparent); opacity: 0.92; }

.ww .trade-row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.ww .trade-row-head .av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--moss), var(--amber));
  color: #1a1108;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.ww .trade-row-head .who {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
}
.ww .trade-row-head .when {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
}
.ww .trade-row-head .actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.ww .trade-row-head .actions .btn { padding: 6px 14px; font-size: 13px; }

.ww .trade-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}
.ww .trade-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ww .trade-side .side-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ww .trade-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ww .trade-mini {
  width: 100px;
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.ww .trade-mini .mini-art {
  aspect-ratio: 5/7;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.4);
  transition: transform 140ms;
  box-shadow: 0 4px 12px -8px rgba(0,0,0,0.7);
}
.ww .trade-mini:hover .mini-art { transform: translateY(-2px); }
.ww .trade-mini .mini-name {
  font-family: var(--serif);
  font-size: 11px;
  color: var(--ink);
  line-height: 1.2;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ww .trade-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--brass-line);
  background: rgba(0,0,0,0.35);
  color: var(--amber);
  font-size: 18px;
  flex-shrink: 0;
}

/* "They want: any X" pattern card — used when a trade offer accepts any
   card matching a filter rather than a specific named card. */
.ww .trade-wildcard {
  flex: 1;
  min-width: 100px;
  max-width: 220px;
  border: 1.5px dashed var(--brass-line);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0,0,0,0.22);
}
.ww .trade-wildcard .ttl {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ww .trade-wildcard .pattern {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
}
.ww .trade-wildcard .chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 4px;
}
.ww .trade-wildcard .chips .ch {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.3);
  color: var(--ink-dim);
  border: 1px solid var(--brass-line);
}

.ww .trade-note {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--brass-line);
  border-radius: 8px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.5;
}

.ww .browse-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px) {
  .ww .browse-grid { grid-template-columns: 1fr; }
}

.ww .trade-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-mute);
  border: 1px dashed var(--brass-line);
  border-radius: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
}
.ww .trade-empty .small {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-style: normal;
}

/* History rows are slimmer — less ceremony */
.ww .history-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--brass-line);
  border-radius: 10px;
  margin-bottom: 8px;
  background: rgba(0,0,0,0.15);
}
.ww .history-row .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--moss), var(--amber));
  color: #1a1108;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ww .history-row .who {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  min-width: 140px;
}
.ww .history-row .swap {
  flex: 1;
  font-size: 13px;
  color: var(--ink-dim);
  font-family: var(--sans);
  line-height: 1.5;
}
.ww .history-row .swap .card-name {
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
}
.ww .history-row .when {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  margin-left: auto;
}

/* ── Propose Trade modal ──────────────────────────────────────────── */
.ww .propose-card {
  width: min(960px, 100%);
  max-height: calc(100vh - 80px);
  background: var(--bg-panel);
  border: 1px solid var(--brass-line);
  border-radius: 18px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  position: relative;
  animation: card-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 60px 120px -30px rgba(0,0,0,0.9);
}
.ww .propose-card .propose-head h2 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 500;
  margin: 0;
}
.ww .propose-card .propose-head .sub {
  font-size: 13px;
  color: var(--ink-mute);
}

.ww .propose-recipient {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ww .propose-recipient label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ww .propose-recipient input {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--brass-line);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 14px;
  width: 280px;
}
.ww .propose-recipient input:focus { outline: none; border-color: var(--amber); }
.ww .propose-recipient .helper {
  font-size: 12px;
  color: var(--ink-mute);
}

.ww .propose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.ww .propose-side {
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--brass-line);
  border-radius: 12px;
  padding: 14px 16px 16px;
}
.ww .propose-side .side-head {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.ww .propose-side .side-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 12px;
}
.ww .propose-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.ww .propose-slot {
  position: relative;
  aspect-ratio: 5/7;
  border-radius: 8px;
  background: rgba(0,0,0,0.30);
  border: 1.5px dashed var(--brass-line);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  font-family: var(--serif);
  font-size: 24px;
  transition: border-color 120ms, color 120ms;
}
.ww .propose-slot:hover { border-color: var(--amber); color: var(--amber); }
.ww .propose-slot.is-filled {
  border-style: solid;
  border-color: rgba(0,0,0,0.4);
  /* Override the empty-state flex centering so CardArt can fill the slot
     dimensions instead of collapsing to its intrinsic (zero) size. */
  display: block;
}
.ww .propose-slot.is-filled .card-art {
  width: 100%;
  height: 100%;
}
.ww .propose-slot.is-filled:hover { border-color: var(--amber); }
.ww .propose-slot .remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.8);
  color: var(--ink);
  border: 1px solid var(--brass-line);
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.ww .propose-slot:hover .remove { opacity: 1; }
.ww .propose-slot .remove:hover { background: var(--rust); }

.ww .propose-note { display: flex; flex-direction: column; gap: 6px; }
.ww .propose-note label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ww .propose-note textarea {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--brass-line);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  min-height: 60px;
  resize: vertical;
  line-height: 1.4;
}
.ww .propose-note textarea:focus { outline: none; border-color: var(--amber); }

.ww .propose-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--brass-line);
  padding-top: 16px;
}

/* ── Currency badge (right side of nav) ─────────────────────────────── */
.ww .nav .currency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  background:
    linear-gradient(180deg, rgba(217,160,90,0.10), rgba(217,160,90,0)),
    rgba(0,0,0,0.25);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--brass-line));
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  cursor: default;
  position: relative;
}
.ww .nav .currency .mark {
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px var(--amber-glow));
}
.ww .nav .currency .amount {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.ww .nav .currency .name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-dim);
}

/* ── Admin dropdown ─────────────────────────────────────────────────── */
.ww .nav .dropdown { position: relative; }
.ww .nav .dropdown-trigger {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 120ms, background 120ms;
}
.ww .nav .dropdown-trigger:hover { color: var(--ink); background: rgba(255,255,255,0.03); }
.ww .nav .dropdown-trigger.is-active-section { color: var(--amber); }
.ww .nav .dropdown-trigger.is-open {
  color: var(--ink);
  background: rgba(255,255,255,0.05);
}
.ww .nav .dropdown-trigger .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: var(--amber);
  color: #1a1108;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  margin-left: 2px;
}
.ww .nav .dropdown-trigger .chev { transition: transform 160ms; }
.ww .nav .dropdown-trigger.is-open .chev { transform: rotate(180deg); }

.ww .dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: var(--bg-panel);
  border: 1px solid var(--brass-line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8), 0 4px 12px rgba(0,0,0,0.4);
  z-index: 50;
  animation: dropdown-in 140ms ease;
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ww .dropdown-menu .item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms;
}
.ww .dropdown-menu .item:hover { background: rgba(255,255,255,0.04); }
.ww .dropdown-menu .item.active { background: var(--amber-glow); color: var(--amber); }
.ww .dropdown-menu .item .icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-dim);
  flex-shrink: 0;
}
.ww .dropdown-menu .item.active .icon { background: rgba(0,0,0,0.25); color: var(--amber); }
.ww .dropdown-menu .item .meta {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1;
  min-width: 0;
}
.ww .dropdown-menu .item .meta .ttl { font-weight: 600; }
.ww .dropdown-menu .item .meta .sub { font-size: 11px; color: var(--ink-mute); }
.ww .dropdown-menu .item .pill {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--amber);
  color: #1a1108;
}
.ww .dropdown-menu hr {
  border: 0;
  height: 1px;
  background: var(--brass-line);
  margin: 6px 4px;
}

/* Disabled tab (Game when admin has it off) */
.ww .nav .tabs a.disabled {
  color: var(--ink-mute);
  cursor: not-allowed;
  opacity: 0.55;
  position: relative;
}
.ww .nav .tabs a.disabled:hover { background: transparent; color: var(--ink-mute); }
.ww .nav .tabs a.disabled .lock {
  display: inline-flex; vertical-align: middle; margin-left: 4px;
  opacity: 0.8;
}

/* ── Card viewer modal (lightbox) ─────────────────────────────────── */
.ww .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 6, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  animation: overlay-in 200ms ease;
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.ww .modal-card {
  position: relative;
  width: min(960px, 100%);
  max-height: calc(100vh - 80px);
  background: var(--bg-panel);
  border: 1px solid var(--brass-line);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  box-shadow: 0 60px 120px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.02) inset;
  animation: card-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ww .modal-card .art {
  position: relative;
  background: radial-gradient(120% 80% at 50% 30%, rgba(217,160,90,0.06), transparent 70%), #0d110e;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ww .modal-card .art .frame-wrap {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 5/7;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.9), 0 0 0 1px rgba(0,0,0,0.4);
}
.ww .modal-card .info {
  padding: 32px 32px 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ww .modal-card .info h2 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
}
.ww .modal-card .info .meta-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ww .modal-card .info .meta-row .pip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--brass-line);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-dim);
}
.ww .modal-card .info .flavor {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.5;
  margin: 6px 0 0;
}

/* Submitter pill inside the modal */
.ww .modal-card .info .submitter-line {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 6px;
  padding: 6px 12px 6px 6px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--brass-line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-dim);
  align-self: flex-start;
}
.ww .modal-card .info .submitter-line .av-small {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--moss), var(--amber));
  color: #1a1108;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Village-by-element panel (Catalog sidebar) */
.ww .village-panel-body {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
}
.ww .village-panel-body .donut { flex-shrink: 0; }
.ww .element-list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 14px;
  font-size: 12px;
  font-family: var(--sans);
}
.ww .element-list li {
  display: flex; align-items: center; gap: 7px;
  color: var(--ink-dim);
}
.ww .element-list .sw {
  width: 9px; height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.ww .element-list .el-name { flex: 1; }
.ww .element-list .el-count {
  font-family: var(--mono);
  color: var(--ink);
  font-weight: 600;
}
.ww .modal-card .info .stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.ww .modal-card .info .stat-grid .stat-box {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--brass-line);
  border-radius: 10px;
  padding: 12px 14px;
}
.ww .modal-card .info .stat-grid .stat-box .lbl {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ww .modal-card .info .stat-grid .stat-box .v {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  margin-top: 2px;
  line-height: 1;
}
.ww .modal-card .info .ownership {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--brass-line);
  font-size: 13px;
  color: var(--ink-dim);
  display: flex; flex-direction: column; gap: 4px;
}
.ww .modal-card .info .ownership .big {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
}
.ww .modal-card .info .actions {
  display: flex; gap: 10px;
  margin-top: 18px;
}

.ww .modal-card .close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--brass-line);
  background: rgba(0,0,0,0.4);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 120ms, transform 120ms;
}
.ww .modal-card .close:hover { background: rgba(0,0,0,0.7); transform: scale(1.05); }

.ww .modal-card .esc-hint {
  position: absolute;
  bottom: 14px; right: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.ww .kbd {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid var(--brass-line);
  border-radius: 4px;
  color: var(--ink-dim);
  background: rgba(0,0,0,0.3);
}

/* ── Site Controls page ─────────────────────────────────────────────── */
.ww .controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ww .controls-grid .panel { padding: 22px 24px; }
.ww .controls-grid h3 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
}
.ww .controls-grid .panel > .body { margin: 0 0 16px; }

.ww .ctrl-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--brass-line);
}
.ww .ctrl-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ww .ctrl-row .meta {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ww .ctrl-row .meta .ttl {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.ww .ctrl-row .meta .sub {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.45;
}

/* Toggle switch */
.ww .toggle {
  width: 44px; height: 24px;
  border-radius: 999px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--brass-line);
  position: relative;
  cursor: pointer;
  transition: background 200ms, border-color 200ms;
  flex-shrink: 0;
}
.ww .toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink-mute);
  transition: left 200ms, background 200ms;
}
.ww .toggle.on {
  background: color-mix(in srgb, var(--amber) 22%, transparent);
  border-color: var(--amber);
}
.ww .toggle.on::after { left: 22px; background: var(--amber); }

/* Inline text field inside a control row */
.ww .ctrl-row .inline-field {
  display: flex; align-items: center; gap: 8px;
}
.ww .ctrl-row input[type="text"],
.ww .ctrl-row input[type="number"] {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--brass-line);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  width: 140px;
}
.ww .ctrl-row input:focus { outline: none; border-color: var(--amber); }

.ww .status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ww .status-pill.ok      { background: rgba(146, 168, 117, 0.16); color: var(--moss); }
.ww .status-pill.off     { background: rgba(184, 100, 60, 0.16); color: var(--rust); }
.ww .status-pill .dot    { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }


/* ── Maintenance banner ─────────────────────────────────────────────────
   Site-wide notice surfaced by MainLayout when SiteControls.MaintenanceMode is true.
   The design's prototype had the toggle but never drew the banner; this fills that gap. */
.ww .maintenance-banner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 36px;
    background: linear-gradient(180deg, rgba(184, 100, 60, 0.18), rgba(184, 100, 60, 0.08));
    border-bottom: 1px solid color-mix(in srgb, var(--rust) 40%, transparent);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.02em;
}
.ww .maintenance-banner .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rust);
    box-shadow: 0 0 8px var(--rust);
    flex-shrink: 0;
}
.ww .maintenance-banner strong { color: var(--rust); margin-right: 6px; }

/* ── Native <select> dropdown popups ─────────────────────────────────────
   Light-ink on dark-panel to match the Grove chrome instead of leaving the
   options to inherit a green-on-white system mush. Custom-properties don't
   reliably apply to <option> elements across browsers, so literal hex.
   Selected entry lights up amber so the user sees which one's active. */
.ww select option {
    color: #dbe2cd;
    background-color: #1a221b;
}
.ww select option:hover {
    background-color: #212a23;
}
.ww select option:checked {
    color: #1a1108;
    background-color: #d9a05a;
}

/* Bare stat-row inputs (Submit / EditCard / EditTemplate). Spectral serif numerics on
   transparent background; replaces inline style on every input + select. */
.ww .stat-input {
    width: 100%;
    background: transparent;
    border: 0;
    outline: 0;
    font-family: var(--serif);
    color: var(--ink);
    padding: 0;
}
.ww .stat-input.is-large { font-size: 32px; }
.ww .stat-input.is-small { font-size: 20px; }

/* ── Form split (editor pages) ───────────────────────────────────────────
   Two-column editor layout: fixed control rail + flexible preview. Replaces
   the inline grid on Cards Create/EditCard/EditTemplate; stacks on phones. */
.ww .form-split {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 32px;
  align-items: start;
}
.ww .form-split.narrow-rail { grid-template-columns: 380px 1fr; }

/* ── Mobile (card editor pages only) ─────────────────────────────────────
   The desktop layout is sacred at every window width — no global responsive
   rules. The one mobile adaptation: the two-column card editor (the CCG
   submit page and its admin siblings) stacks on actual mobile devices.
   hover:none + pointer:coarse means a touch-first device; a desktop browser
   dragged skinny keeps the original fixed columns. */
@media (hover: none) and (pointer: coarse) and (max-width: 860px) {
  .ww .form-split,
  .ww .form-split.narrow-rail {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}