/* ─── Deadlock Texture Forge v2 ──────────────────────────────────────────────
   Hero-centric two-level navigation.
   Same noir-industrial palette as Sound Forge.
─────────────────────────────────────────────────────────────────────────── */

:root {
  --bg:        #1c1916;
  --bg-1:      #252119;
  --bg-2:      #2e2a22;
  --bg-3:      #3a352c;
  --ink:       #f2ead8;
  --ink-dim:   #c0ae96;
  --ink-faint: #8a7a68;
  --line:      #4a4238;
  --line-hot:  #6e5c48;

  --brass:     #d4a86a;
  --brass-hot: #f3c789;
  --brass-dim: #8a6d45;
  --sel:        #60f8b3;
  --sel-dim:    #2db878;
  --sel-glow:   rgba(96,248,179,0.5);

  --blood:     #c14a2d;
  --blood-hot: #e25c3a;

  --teal:      #4fa391;

  --font-display: "Syncopate", "Arial Narrow", sans-serif;
  --font-mono:    "IBM Plex Mono", "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brass); text-decoration: none; }
a:hover { color: var(--brass-hot); }

/* ─── overlays ───────────────────────────────────────── */

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: 0.022; 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 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 99;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.28) 100%);
}
.scanline {
  position: fixed; left: 0; right: 0; top: 54px; height: 1px;
  background: linear-gradient(to right, transparent, var(--brass-dim) 20%, var(--brass) 50%, var(--brass-dim) 80%, transparent);
  opacity: 0.35; pointer-events: none; z-index: 10;
}

/* ─── header ─────────────────────────────────────────── */

.chrome {
  position: relative; display: flex; align-items: center;
  justify-content: space-between; height: 54px; padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, var(--bg-1), var(--bg));
  z-index: 5;
}
.brand { display: flex; align-items: center; gap: 16px; }
.brand-mark {
  color: var(--brass); font-family: var(--font-display);
  letter-spacing: 0.3em; font-size: 11px;
  padding: 3px 6px 3px calc(6px + 0.3em); border: 1px solid var(--brass-dim); line-height: 1;
}
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-line-1 {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.42em; font-size: 15px; color: var(--ink);
}
.brand-line-2 {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--brass); letter-spacing: 0.28em; text-transform: uppercase;
}
.chrome-center { flex: 1; display: flex; justify-content: center; gap: 10px; }
.nav-link {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px solid var(--line); padding: 4px 10px;
  transition: color 0.15s, border-color 0.15s;
}
.nav-link:hover { color: var(--brass); border-color: var(--brass-dim); }

.donate-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 500;
  color: var(--ink-dim, #c0ae96);
  text-transform: uppercase; letter-spacing: 0.18em;
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--line-hot, #6e5c48);
  border-radius: 999px;
  background: var(--bg-2, #2e2a22);
  transition: color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.donate-btn .donate-icon { width: 13px; height: 13px; flex-shrink: 0; }
.donate-btn:hover {
  color: #f5c542; border-color: #f5c542;
  box-shadow: 0 0 14px rgba(245,197,66,0.25);
}

/* ─── layout ─────────────────────────────────────────── */

.layout {
  position: absolute; inset: 55px 0 0 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) 560px;
  height: calc(100% - 55px);
  min-width: 0;
  overflow: hidden;
}
.layout > aside, .layout > section {
  overflow: auto;
  scrollbar-color: var(--line-hot) var(--bg);
  scrollbar-width: thin;
}
aside.forge {
  overflow: hidden;
}

/* ─── sidebar (left) ─────────────────────────────────── */

.sidebar {
  border-right: 1px solid var(--line);
  background: var(--bg-1);
  display: flex; flex-direction: column;
  padding: 14px 0;
  gap: 0;
}

.sidebar-search { padding: 0 14px 14px; border-bottom: 1px solid var(--line); }
.searchbar {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--bg-2); padding: 5px 8px;
}
.searchbar .glyph { color: var(--brass-dim); font-size: 14px; line-height: 1; flex-shrink: 0; }
.searchbar input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--ink); font-family: var(--font-mono); font-size: 12px; padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.searchbar input::placeholder { color: var(--ink-faint); }



.side-footer {
  margin-top: auto; padding: 14px;
  border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-faint);
  letter-spacing: 0.06em;
  display: flex; flex-direction: column; gap: 4px;
}
.side-footer span { color: var(--ink-dim); }

/* ─── center panel ───────────────────────────────────── */

.center {
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.view {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden;
}

.view-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1); flex-shrink: 0;
}
.view-title {
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 0.4em; color: var(--ink-faint); text-transform: uppercase;
}
.view-subtitle {
  font-size: 11px; color: var(--ink-faint); margin-left: auto;
}

/* ─── hero grid ──────────────────────────────────────── */

#hero-grid {
  flex: 1; overflow-y: auto; padding: 10px;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(90px, 9vw, 130px), 1fr));
  grid-auto-rows: max-content;
  gap: 8px;
  align-content: start;
  scrollbar-color: var(--line-hot) var(--bg); scrollbar-width: thin;
}

.hero-card {
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-2);
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  overflow: hidden;
  position: relative;
}
.hero-card:hover {
  border-color: var(--line-hot);
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.hero-card.has-selection {
  border-color: var(--brass);
  box-shadow: 0 0 0 1px var(--brass);
}

.hero-card-img {
  width: 100%;
  aspect-ratio: 120 / 200;
  overflow: hidden;
  background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
}
.hero-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  image-rendering: auto;
  transition: transform 0.2s;
}
.hero-card:hover .hero-card-img img { transform: scale(1.04); }
.hero-card-img .hero-no-img {
  font-size: 24px; color: var(--ink-faint);
}

.hero-card-meta {
  padding: 6px 7px 7px;
  border-top: 1px solid var(--line);
}
.hero-card-name {
  font-family: var(--font-display); font-size: 8px;
  letter-spacing: 0.22em; color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-card-sub {
  font-size: 9px; color: var(--ink-faint);
  letter-spacing: 0.05em; margin-top: 2px;
}
.hero-card.has-selection .hero-card-name { color: var(--brass); }

/* selected badge */
.hero-sel-badge {
  position: absolute; top: 5px; right: 5px;
  background: var(--brass); color: var(--bg);
  font-size: 8px; font-family: var(--font-mono);
  padding: 1px 4px; letter-spacing: 0.1em;
  display: none;
}
.hero-card.has-selection .hero-sel-badge { display: block; }



/* ─── detail view ────────────────────────────────────── */

.detail-header {
  gap: 14px;
}
.back-btn {
  background: none; border: 1px solid var(--line); color: var(--ink-dim);
  font-family: var(--font-mono); font-size: 11px;
  padding: 4px 10px; cursor: pointer; letter-spacing: 0.08em;
  transition: all 0.1s; flex-shrink: 0;
}
.back-btn:hover { color: var(--brass); border-color: var(--brass-dim); }

.detail-hero-name {
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 0.35em; color: var(--ink); text-transform: uppercase;
}

#view-detail {
  overflow-y: auto;
  scrollbar-color: var(--line-hot) var(--bg); scrollbar-width: thin;
}

.detail-section {
  padding: 0 14px 16px;
}
.detail-section-label {
  font-family: var(--font-display); font-size: 9px;
  letter-spacing: 0.4em; color: var(--ink-faint);
  text-transform: uppercase;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}

/* ─── texture tiles ──────────────────────────────────── */

.texture-grid {
  display: grid; gap: 8px;
}
.portrait-grid {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
.ability-grid {
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
}

.tex-tile {
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-2);
  position: relative; overflow: hidden;
  transition: border-color 0.1s, transform 0.1s;
  user-select: none;
}
.tex-tile:hover {
  border-color: var(--line-hot);
  transform: translateY(-1px);
}
.tex-tile.selected {
  border-color: var(--sel);
  border-width: 2px;
  box-shadow: 0 0 0 2px var(--sel), 0 0 22px var(--sel-glow), inset 0 0 16px rgba(96,248,179,0.1);
  background: rgba(96,248,179,0.12);
  transform: translateY(-2px);
}
.tex-tile.selected::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(96,248,179,0.2) 0%, rgba(96,248,179,0.04) 55%, transparent 100%);
  pointer-events: none; z-index: 1;
}
.tex-tile.selected::after {
  content: "✓";
  position: absolute; top: 3px; right: 4px;
  font-size: 11px; font-weight: 900; color: #061a10;
  background: var(--sel);
  border-radius: 50%;
  width: 16px; height: 16px;
  line-height: 16px; text-align: center;
  box-shadow: 0 0 10px var(--sel-glow);
  z-index: 4;
}

.tex-img-wrap {
  width: 100%; overflow: hidden;
  background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
}
/* portrait ratio 120:200 = 0.6 — taller tiles */
.portrait-grid .tex-img-wrap { aspect-ratio: 3/4; }
/* ability ratio ~1:1 */
.ability-grid .tex-img-wrap { aspect-ratio: 1; }

.tex-img-wrap img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; width: 100%; height: 100%;
}
.tex-img-wrap .tex-no-img { font-size: 16px; color: var(--ink-faint); }

/* ─── HUD circular-card context preview ────────────────────────────── */

/* Outer container – dark panel like the in-game top-bar segment */
.hud-card-preview {
  width: 100%;
  aspect-ratio: 1;           /* square tile so circle fills it nicely */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14%;
  position: relative;
  background: var(--bg-3);
}

/* Amber variant – normal top-bar card */
.hud-card--normal {
  background: radial-gradient(ellipse at 50% 110%, #6b4414 0%, #2a1e0c 80%);
  box-shadow: inset 0 -3px 10px rgba(212, 168, 106, 0.15);
}
/* Red variant – low-HP critical card */
.hud-card--critical {
  background: radial-gradient(ellipse at 50% 110%, #5c1212 0%, #1e0a0a 80%);
  box-shadow: inset 0 -3px 10px rgba(193, 74, 45, 0.25);
}
/* Gold variant – kill-streak gloat card */
.hud-card--gloat {
  background: radial-gradient(ellipse at 50% 110%, #5c4a08 0%, #1e180a 80%);
  box-shadow: inset 0 -3px 10px rgba(230, 190, 40, 0.2);
}

/* The circle that clips the portrait */
.hud-card-circle {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

/* Accent ring on the circle */
.hud-card--normal   .hud-card-circle { box-shadow: 0 0 0 2px #c8883a, 0 0 8px rgba(200,136,58,0.5); }
.hud-card--critical .hud-card-circle { box-shadow: 0 0 0 2px #c14a2d, 0 0 10px rgba(193,74,45,0.6); }
.hud-card--gloat    .hud-card-circle { box-shadow: 0 0 0 2px #e0b830, 0 0 10px rgba(224,184,48,0.55); }

/* The portrait image inside the circle */
.hud-card-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;   /* show the hero face, not the torso */
  display: block;
}

.tex-meta {
  padding: 4px 5px 5px;
  border-top: 1px solid var(--line);
}
.tex-label {
  font-size: 9px; color: var(--ink-dim); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.1s, font-weight 0.1s;
}
.tex-tile.selected .tex-label {
  color: var(--sel);
  font-weight: 700;
}

/* ─── empty state ────────────────────────────────────── */

.empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: var(--ink-faint); padding: 40px;
}
.empty-mark {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--line-hot);
}
.empty p { font-size: 12px; letter-spacing: 0.08em; text-align: center; }

/* ─── forge panel (right) ────────────────────────────── */

.forge {
  background: var(--bg-1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.forge-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: var(--ink-faint); padding: 80px 0; text-align: center;
}
.forge-empty .empty-mark {
  font-size: 36px;
  margin-bottom: 6px;
}
.forge-empty p { font-size: 12px; letter-spacing: 0.06em; line-height: 1.6; }

.forge-active {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
.forge-body {
  flex: 1; overflow-y: auto; min-height: 60px;
  scrollbar-color: var(--line-hot) var(--bg); scrollbar-width: thin;
}
.forge-footer {
  flex-shrink: 0;
  border-top: none;
}

.forge-section { padding: 14px 16px; }
.forge-section-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.forge-section-title {
  font-family: var(--font-display); font-size: 9px;
  letter-spacing: 0.4em; color: var(--ink-faint); text-transform: uppercase;
}
.forge-divider { height: 1px; background: var(--line); flex-shrink: 0; }

.selection-list {
  display: flex; flex-direction: column; gap: 4px;
}
.sel-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-dim);
}
.sel-item img {
  width: 42px; height: 42px; object-fit: contain;
  background: var(--bg-3); flex-shrink: 0;
}
.sel-item .sel-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-item .sel-item-remove { flex-shrink: 0; cursor: pointer; color: var(--ink-faint); }
.sel-item .sel-item-remove:hover { color: var(--blood-hot); }

/* Imported pill — sits inline in sel-item rows just before the remove X */
.imp-pill {
  flex-shrink: 0;
  font-family: 'Syncopate', sans-serif;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-hot);
  border: 1px solid var(--brass);
  background: rgba(212,168,106,0.10);
  padding: 2px 5px;
  border-radius: 2px;
  line-height: 1;
}
.tex-tile .imp-pill-corner.changed {
  color: var(--sel);
  border-color: var(--sel-dim);
}
.tex-tile .imp-pill-corner {
  position: absolute;
  top: 4px;
  right: 4px;
  font-family: 'Syncopate', sans-serif;
  font-size: 7px;
  letter-spacing: 0.18em;
  color: var(--brass-hot);
  background: rgba(28,25,22,0.85);
  border: 1px solid var(--brass);
  padding: 1px 4px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}

/* VPK drop overlay — covers the whole forge aside on dragover */
.forge, .forge-body, .forge-empty { position: relative; }
.vpk-drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28,25,22,0.92);
  border: 2px dashed var(--brass);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: 'Syncopate', sans-serif;
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass-hot);
  text-align: center;
  line-height: 1.8;
}
.vpk-drop-overlay.active { pointer-events: auto; }
.vpk-drop-overlay small {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  margin-top: 8px;
}

/* Unknown-entries summary line at the top of forge-active */
.imp-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
  background: rgba(212,168,106,0.06);
  border: 1px solid var(--line-hot);
  border-left: 2px solid var(--brass);
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink-dim);
}
.imp-summary .imp-summary-label {
  font-family: 'Syncopate', sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--brass);
  text-transform: uppercase;
}
.imp-summary button.mini { margin-left: auto; }

/* Replace/Merge/Cancel modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  background: var(--bg-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-deco), 0 12px 48px rgba(0,0,0,0.6);
  padding: 22px 24px;
  max-width: 420px;
  width: 90%;
}
.modal-title {
  font-family: 'Syncopate', sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 12px;
}
.modal-body {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-dim);
  margin-bottom: 18px;
  line-height: 1.55;
}
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.modal-actions button {
  font-family: 'Syncopate', sans-serif;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.modal-actions button:hover { background: var(--bg-3); border-color: var(--brass); color: var(--brass-hot); }
.modal-actions button.primary { border-color: var(--brass); color: var(--brass-hot); }
.modal-actions button.danger:hover { border-color: var(--blood); color: var(--blood-hot); }

.sel-item--batch { flex-wrap: nowrap; gap: 6px; cursor: pointer; transition: background 0.1s, border-color 0.1s; }
.sel-item--batch:hover { background: var(--bg-3); }
.sel-item--batch.focused { border-color: var(--brass); background: rgba(212,168,106,0.08); }
/* same-image mode row focus */
.sel-item.focused { border-color: var(--brass); background: rgba(212,168,106,0.06); }
.sel-item:not(.sel-item--batch) { transition: background 0.1s, border-color 0.1s; }
.sel-item--batch .sel-item-label { font-size: 10px; }
.sel-item-status { flex-shrink: 0; font-size: 12px; color: var(--ink-faint); width: 12px; text-align: center; }
.sel-item-status.ok { color: var(--teal); }
.sel-item-upload { flex-shrink: 0; font-size: 9px; padding: 2px 6px; }

.dim-info { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.06em; margin-bottom: 3px; }
.rec-size { font-size: 11px; color: var(--brass-dim); letter-spacing: 0.06em; margin-bottom: 8px; }

.drop {
  border: 1px dashed var(--line-hot); background: var(--bg-2);
  cursor: pointer; min-height: 80px;
  display: flex; flex-direction: column;
  transition: border-color 0.15s, background 0.15s;
}
.drop:hover, .drop.drag-over { border-color: var(--brass-dim); background: var(--bg-3); }
.drop-inner {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; padding: 16px; text-align: center; pointer-events: none;
}
.drop-glyph { font-size: 20px; color: var(--blood); line-height: 1; transition: color 0.15s; }
.drop-glyph.ok { color: var(--teal); }
.drop p { font-size: 12px; color: var(--ink-dim); margin: 0; line-height: 1.45; }
.drop p .dim { font-size: 11px; color: var(--ink-faint); }
.drop-ready {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; gap: 8px;
}
.drop-file-info { display: flex; align-items: center; gap: 10px; }
.drop-file-info .drop-glyph { font-size: 16px; }
.drop-file-info code { font-size: 11px; color: var(--ink); display: block; }
.drop-file-info .dim { font-size: 10px; color: var(--ink-faint); margin: 2px 0 0; }

.preview-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.preview-slot { display: flex; flex-direction: column; gap: 4px; }
.preview-label {
  font-size: 9px; color: var(--ink-faint);
  letter-spacing: 0.18em; text-transform: uppercase; text-align: center;
}
.preview-img {
  width: 100%; object-fit: contain; background: var(--bg-3);
  border: 1px solid var(--line); min-height: 60px; max-height: 160px;
}

/* buttons */
.mini {
  background: var(--bg-3); color: var(--ink-dim);
  border: 1px solid var(--line); padding: 3px 9px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; cursor: pointer; text-transform: uppercase;
  transition: all 0.1s;
}
.mini:hover { color: var(--brass); border-color: var(--brass-dim); }

#dl-template-zip { display: block; margin-bottom: 10px; width: 100%; text-align: left; font-size: 11px; }

.forge-btn {
  display: block; width: calc(100% - 32px);
  margin: 20px 16px 16px;
  background: linear-gradient(135deg, var(--blood) 0%, #8a2510 100%);
  color: var(--ink); border: 1px solid var(--blood);
  padding: 12px 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase;
  cursor: pointer; transition: all 0.15s;
}
.forge-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--blood-hot) 0%, var(--blood) 100%);
  box-shadow: 0 0 16px rgba(193,74,45,0.35);
}
.forge-btn:disabled { opacity: 0.4; cursor: default; }
.forge-btn.loading { animation: pulse 1s ease-in-out infinite alternate; }
.forge-btn-zip {
  background: linear-gradient(135deg, #2e3f4f 0%, #1e2d3a 100%);
  color: #8fc4d8; border-color: #3a5060;
  margin-top: 0;
}
.forge-btn-zip:hover:not(:disabled) {
  background: linear-gradient(135deg, #3a5060 0%, #2e3f4f 100%);
  box-shadow: 0 0 16px rgba(79,163,145,0.25);
  color: #b8dce8;
}
.forge-btn-zip.loading {
  animation: pulse 1s ease-in-out infinite alternate;
}
@keyframes pulse { from { opacity: 0.6; } to { opacity: 1.0; } }

.log {
  margin: 0 16px 16px; padding: 10px 12px; flex-shrink: 0;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: 11px; color: var(--ink-dim);
  white-space: pre-wrap; line-height: 1.5; letter-spacing: 0.02em;
}
.log.ok { border-color: var(--teal); color: var(--teal); }
.log.err { border-color: var(--blood); color: var(--blood-hot); }

.dim { color: var(--ink-faint); }

/* ─── mode toggle ────────────────────────────────────────────────── */

.mode-toggle {
  display: flex; gap: 0;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.mode-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--ink-faint);
  padding: 6px 0;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.12s;
}
.mode-btn:hover { color: var(--ink); background: var(--bg-2); }
.mode-btn--active {
  background: var(--brass);
  color: var(--bg);
}
.mode-btn--active:hover { background: var(--brass-hot); color: var(--bg); }

/* ─── individual mode extras ─────────────────────────────────────── */

.ready-count {
  font-size: 10px;
  color: var(--ink-faint);
  text-align: right;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
  padding: 0 2px;
}
.ready-count.all-ready { color: var(--teal); }

/* ─── responsive ──────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .layout {
    grid-template-columns: minmax(0,1fr) 420px;
  }
}

@media (max-width: 860px) {
  .layout {
    grid-template-columns: minmax(0,1fr) 300px;
  }
  .brand-line-1 { font-size: 12px; }
  .brand-line-2 { font-size: 9px; }
}

/* ─── pixel-art toggle ─────────────────────────────────────────────── */
.option-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 16px 12px;
}
.option-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.option-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.option-toggle-track {
  position: relative;
  width: 32px;
  height: 18px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 9px;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
}
.option-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: var(--ink-faint);
  border-radius: 50%;
  transition: transform 0.18s, background 0.18s;
}
.option-toggle input:checked + .option-toggle-track {
  background: var(--sel-dim);
  border-color: var(--sel);
}
.option-toggle input:checked + .option-toggle-track .option-toggle-thumb {
  transform: translateX(14px);
  background: var(--sel);
}
.option-toggle-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.option-toggle input:checked ~ .option-toggle-label,
.option-toggle:has(input:checked) .option-toggle-label {
  color: var(--sel);
}
.option-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  line-height: 1.6;
  padding-left: 40px;
}

/* ─── install note ──────────────────────────────────────────────────── */
.install-note {
  padding: 10px 16px 0;
  font-size: 10px;
  color: var(--ink-faint);
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.install-note code {
  color: var(--brass);
  font-size: 10px;
  background: var(--bg-2);
  padding: 1px 4px;
  border-radius: 2px;
}


/* ── header right group (donate + count) ── */
.chrome-right { display: flex; align-items: center; gap: 14px; }
.header-count {
  font-size: 10px; color: var(--ink-faint, #8a7a68);
  text-transform: uppercase; letter-spacing: 0.18em;
  white-space: nowrap;
}
.header-count span { color: var(--brass, #d4a86a); }

.donate-btn.discord-btn:hover {
  color: #5865F2; border-color: #5865F2;
  box-shadow: 0 0 14px rgba(88,101,242,0.3);
}

/* ─── ranks section ──────────────────────────────────── */

/* Let the hero view scroll as a whole so the rank section sits below it. */
#view-heroes { overflow-y: auto; }
#view-heroes #hero-grid { flex: none; overflow: visible; }
#view-heroes .rank-divider { position: sticky; top: 0; z-index: 2; }

/* Rank grid mirrors #hero-grid but is class-based (not flex:1, sits below). */
.rank-grid {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(90px, 9vw, 130px), 1fr));
  grid-auto-rows: max-content;
  gap: 8px;
  align-content: start;
}

/* Rank cards reuse .hero-card; badge icons are square & contained. */
.rank-card .hero-card-img {
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 50% 45%, rgba(212,168,106,0.10), transparent 70%),
    var(--bg);
}
.rank-card .hero-card-img img { object-fit: contain; object-position: center; padding: 8px; }

/* Rank detail — name editing */
.rank-name-edit {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 4px 2px;
}
.rank-name-edit label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.rank-name-field {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--ink); background: var(--bg-2);
  border: 1px solid var(--line-hot); border-radius: 2px;
  padding: 6px 8px; min-width: 180px;
}
.rank-name-field:focus { outline: none; border-color: var(--brass); }
.rank-name-note {
  margin-top: 6px; font-size: 11px; color: var(--sel);
  letter-spacing: 0.04em; min-height: 14px;
}

.rank-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 12vw, 170px), 1fr));
  gap: 8px; align-content: start; align-items: start;
}
/* Square wrap so the badge fills the tile with no dead space below it. */
.rank-badge-grid .tex-img-wrap { aspect-ratio: 1; }
.rank-badge-grid .tex-img-wrap img { object-fit: contain; }

.rank-badge-note {
  font-size: 11px; color: var(--ink-faint); line-height: 1.5;
  margin: 2px 2px 10px; max-width: 640px;
}

.subrank-edit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px; max-width: 640px;
}
.subrank-edit label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.subrank-field { min-width: 0; }

/* ─── rank name change summary (forge panel) ─────────── */
.rank-changes {
  margin-top: 10px; border: 1px solid var(--line);
  background: var(--bg-1); border-radius: 3px; overflow: hidden;
}
.rank-changes .rc-head {
  font-family: var(--font-display); font-size: 9px;
  letter-spacing: 0.3em; color: var(--brass);
  padding: 6px 10px; border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.rc-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-bottom: 1px solid var(--line);
}
.rc-row:last-child { border-bottom: none; }
.rc-label {
  font-size: 10px; color: var(--ink-dim); min-width: 78px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.rc-detail { flex: 1; font-size: 12px; color: var(--ink); }
.rc-old { color: var(--ink-faint); text-decoration: line-through; font-size: 12px; }
.rc-new { color: var(--sel); }
.rc-sub { color: var(--ink-faint); font-size: 10px; text-transform: uppercase; }
.rc-dot { color: var(--line-hot); margin: 0 6px; }

/* editable change rows */
.rc-tag {
  font-family: var(--font-display); font-size: 8px; letter-spacing: 0.16em;
  color: var(--brass); border: 1px solid var(--brass-dim);
  padding: 2px 5px; border-radius: 2px; flex-shrink: 0; min-width: 58px; text-align: center;
}
.rc-arrow { color: var(--line-hot); flex-shrink: 0; }
.rc-new-input {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--sel); background: var(--bg-2);
  border: 1px solid var(--line-hot); border-radius: 2px; padding: 5px 7px;
}
.rc-new-input:focus { outline: none; border-color: var(--brass); background: var(--bg); }
.rc-x {
  border: 1px solid var(--line-hot); background: var(--bg-2);
  color: var(--ink-faint); cursor: pointer; font-size: 10px;
  width: 20px; height: 20px; border-radius: 2px; flex-shrink: 0;
}
.rc-x:hover { color: var(--blood-hot); border-color: var(--blood); }

/* ─── grouped rank editing (forge panel) ─────────────── */
.rc-group { border-top: 1px solid var(--line); }
.rc-group:first-of-type { border-top: none; }

/* Header = editable rank name (+ compact material) */
.rc-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: var(--bg-2);
}
.rc-name-input {
  flex: 1; min-width: 0;
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink); background: transparent;
  border: 1px solid transparent; border-radius: 2px; padding: 4px 6px;
}
.rc-name-input:hover { border-color: var(--line-hot); }
.rc-name-input:focus { outline: none; border-color: var(--brass); background: var(--bg); }
.rc-name-input.changed { color: var(--sel); }
.rc-mat-input {
  width: 92px; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-dim); background: transparent;
  border: 1px solid transparent; border-radius: 2px; padding: 4px 6px;
}
.rc-mat-input:hover { border-color: var(--line-hot); }
.rc-mat-input:focus { outline: none; border-color: var(--brass); background: var(--bg); }
.rc-mat-input.changed { color: var(--sel); }
.rc-revert { font-size: 13px; }

.rc-badge-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-top: 1px solid var(--line);
}
.rc-badge-thumb {
  width: 34px; height: 34px; object-fit: contain;
  background: var(--bg); border: 1px solid var(--line); border-radius: 2px;
  flex-shrink: 0;
}
.rc-badge-label { flex: 1; font-size: 12px; color: var(--ink); }
.rc-badge-status { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 5px; border-radius: 2px; }
.rc-badge-status.ok  { color: var(--sel); border: 1px solid var(--sel-dim); }
.rc-badge-status.imp { color: var(--brass); border: 1px solid var(--brass-dim); }

.rc-fields {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  padding: 8px 10px 10px; border-top: 1px solid var(--line);
}
.rc-field { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 120px; }
.rc-field > span {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.rc-field .rank-name-field { min-width: 0; width: 100%; font-size: 12px; padding: 5px 7px; }
.rc-field-reset { align-self: flex-end; }

.rc-subrank-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 8px 10px 10px; border-top: 1px solid var(--line);
}
.rc-subrank-grid .rc-field { flex: none; min-width: 0; }

/* ─── hideout artwork grid ───────────────────────────── */
/* Single masonry (CSS columns): every artwork shows WHOLE at its own aspect
   ratio and the varying heights pack tightly with no dead space. The grid is
   mirrored (rtl) so the tall vertical portraits sit on the RIGHT and the wide
   paintings on the left. Columns are a touch wider so the paintings read
   larger. */
.hideout-grid {
  padding: 10px;
  display: block;
  direction: rtl;
  column-width: clamp(135px, 14vw, 178px);
  column-gap: 10px;
}
.hideout-grid .tex-tile {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 10px;
  width: 100%;
  display: inline-block;   /* keeps tiles from splitting across columns */
  direction: ltr;          /* keep tile content (labels) left-to-right */
}
.hideout-grid .tex-img-wrap img { object-fit: contain; }
/* Compact, unobtrusive caption under each artwork. */
.hideout-grid .tex-meta { padding: 3px 5px; }
.hideout-grid .tex-label { font-size: 10px; color: var(--ink-faint); }
.hideout-grid .tex-tile.selected .tex-label { color: var(--sel); }

.atlas-badge {
  position: absolute;
  left: 6px; bottom: 6px;
  padding: 2px 7px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink, #e8e8ea);
  background: rgba(20, 22, 28, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  pointer-events: none;
  backdrop-filter: blur(3px);
}
.tex-tile.has-selection .atlas-badge {
  background: rgba(90, 130, 245, 0.92);
  border-color: rgba(255, 255, 255, 0.3);
}