/* ============================================================
   From the Real — Art References in FromSoftware Games
   styles.css — all visual styling
   ============================================================ */

/* Fonts are loaded via <link rel="stylesheet"> tags in index.html
   to avoid a blocking @import waterfall. */

/* --- CSS Custom Properties --- */
:root {
  --bg: #0e0c14;
  --surface: #16131f;
  --border: #2a2438;
  --text: #e8e4dc;
  --text-muted: #7a7490;
  --accent: #c9a96e;
  --accent-hover: #d4b87d;
  --confirmed: #4a7c59;
  --community: #c9a96e;
  --suspected: #5a5870;

  /* Game pill colors */
  --game-bloodborne: #8b2635;
  --game-dark-souls: #3d4a6b;
  --game-dark-souls-2: #4a5568;
  --game-dark-souls-3: #553d6b;
  --game-demons-souls: #6b4a3d;
  --game-elden-ring: #7a6b3d;
  --game-sekiro: #3d6b4a;

  /* Spacing */
  --page-pad: 48px;
  --table-row-h: 52px;
  --table-row-h-full: auto;
}

/* --- Base Reset --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: auto;
  min-height: 100%;
  /* overflow-x: clip prevents horizontal scroll without creating a scroll
     container — so position:sticky on the filter-bar works correctly */
  overflow-x: clip;
}

body {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 400;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* App wrapper */
.app {
  display: block;
  background-color: var(--bg);
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* --- Navigation --- */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px var(--page-pad);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.site-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.02em;
}

.site-logo {
  display: flex;
  align-items: center;
  margin: -4px 0;          /* pull into nav padding for optical balance */
}

.site-logo img {
  height: 40px;            /* scales proportionally, ~120px wide at 3:1 ratio */
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 32px;
}

.nav-links a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--text);
}

/* --- Hero Section --- */
.hero {
  padding: 80px var(--page-pad) 48px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.hero-content-wrap {
  max-width: 1400px;
  width: 100%;
}

.hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(48px, 6vw, 80px);
  font-style: italic;
  font-weight: 400;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.hero-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 520px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.hero-stats {
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* --- Filter Bar --- */
.filter-bar {
  padding: 0 var(--page-pad);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.filter-content {
  width: 90%;
  max-width: none;
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 14px 0;
}

/* All filter groups in a wrapping row — 2 rows max enforced by JS */
.filter-groups {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 28px 36px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Game group: wrap after 4 pills (Bloodborne / DS / DS2 / DS3, then rest) */
.filter-group[data-filter="game"] .filter-pills {
  max-width: 410px;
}

/* Type group: wrap after Manga so Music/Painting/Print/Sculpture go to line 2 */
.filter-group[data-filter="type"] .filter-pills {
  max-width: 470px;
}

/* Cluster: keeps Type + Confidence side by side, never wrapping apart */
.filter-group-cluster {
  display: flex;
  gap: 36px;
  align-items: flex-start;
}

/* View group — stretches to match the tallest sibling so the vertical
   toggle can fill its full height automatically */
.filter-group--view {
  gap: 8px;
  align-self: stretch;
}

/* Make the toggle fill whatever height the view group has after its label */
.filter-group--view .view-toggle {
  flex: 1;
  min-height: 0;
}

/* Search + clear — rightmost slot, padded down to sit level with pills */
.filter-end-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 36px;
  padding-top: 26px; /* label row (~18px) + gap (8px) so search lines up with pills */
}

/* ---- Scrolled state — hide labels, remove end-wrap spacer ---- */
.filter-bar.scrolled .filter-label { display: none; }
.filter-bar.scrolled .filter-end-wrap { padding-top: 0; }

.pill {
  font-size: 13px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.pill:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

.pill.active {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.clear-filters {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
  background: none;
  border: none;
  font-family: inherit;
}

.clear-filters:hover {
  color: var(--accent);
}

.search-box input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  width: 220px;
  outline: none;
  transition: border-color 0.2s ease;
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.search-box input:focus {
  border-color: var(--accent);
}

/* --- View Toggle --- */
.view-toggle {
  display: flex;
  flex-direction: column; /* vertical by default; overridden at lv4 */
  border: 1px solid var(--border);
  overflow: hidden;
  width: 36px; /* fixed width for vertical stack */
}

.view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex: 1;           /* share toggle height equally */
  height: auto;      /* driven by flex, not fixed */
  min-height: 28px;  /* floor so buttons don't collapse when label is hidden */
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border); /* horizontal divider for vertical stack */
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
}

.view-btn:last-child {
  border-bottom: none;
}

.view-btn-icon {
  display: block;
  width: 10px;
  height: auto;
}

.view-btn:hover {
  color: var(--text);
  background: rgba(201, 169, 110, 0.05);
}

.view-btn.active {
  color: var(--accent);
  background: rgba(201, 169, 110, 0.1);
}

/* --- Result Count --- */
.result-bar {
  padding: 16px var(--page-pad) 12px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.result-bar-inner {
  max-width: 1400px;
  width: 100%;
}

.result-count {
  font-size: 13px;
  color: var(--text-muted);
}

/* --- Content Area --- */
.content-area {
  padding: 0 var(--page-pad);
  display: flex;
  justify-content: center;
  overflow: visible;
}

.content-inner {
  width: 90%;
  max-width: none;
  overflow: visible;
  display: block;
}

/* --- View wrappers --- */
#viewSimple,
#viewFull {
  display: block;
  overflow: visible;
}

/* --- Table Container (Simple & Full views) ---
   Horizontal scroll kicks in when the table's min-width exceeds the
   wrapper width (below ~1340px). The <thead> lives OUTSIDE this
   wrapper (in .sticky-thead) because overflow-x: auto makes this a
   scroll container which would capture sticky scope for any thead
   inside it. */
.table-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Min-widths ensure columns stay legible and trigger horizontal scroll
   on the wrapper when the viewport is narrower than the table's natural
   footprint. Values match the sum of declared column widths in each view.
   Applied to both the body table (inside .table-scroll) and the header
   table (inside .sticky-thead) so the two line up column-for-column. */
.view-simple .table-scroll table,
.view-simple .sticky-thead table { min-width: 1250px; }
.view-full .table-scroll table,
.view-full .sticky-thead table   { min-width: 1840px; }

/* --- Sticky thead wrapper ---
   The header lives outside .table-scroll because overflow-x:auto there
   establishes a scroll container that would scope the thead's sticky
   to the wrapper (so the thead would scroll away with the page instead
   of pinning below the filter bar). Here the sticky is on the wrapper
   itself, whose scope is the viewport. The inner div is translated
   horizontally via JS to mirror .table-scroll's scrollLeft so the
   header stays aligned with the body when the user scrolls sideways. */
.sticky-thead {
  position: sticky;
  top: var(--filter-h, 0px);
  z-index: 10;
  background: var(--bg);
  overflow: hidden;    /* clip the wider inner when body isn't scrolled to 0 */
  width: 100%;
}

.thead-inner {
  will-change: transform;
}

.sticky-thead table {
  margin: 0;
}

/* --- Sticky horizontal scrollbar proxy ---
   A thin wrapper that sits right after the table and stays pinned to
   the viewport bottom via position:sticky while you're scrolling the
   table vertically. Its inner ghost div is set (via JS) to match the
   real table width, so dragging this proxy's scrollbar scrolls the
   real .table-scroll left/right. Hidden when there's nothing to scroll. */
.h-scroll-proxy {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--bg);
  border-top: 1px solid var(--border);
  z-index: 9;
  display: none;               /* toggled to 'block' by JS when needed */
}

.h-scroll-proxy.has-overflow {
  display: block;
}

.h-scroll-ghost {
  height: 1px;                 /* just needs to exist; width is set from JS */
}

/* --- Table Header ---
   Sticky behavior is on the .sticky-thead wrapper (see above); this
   thead is just the table header row sitting inside that wrapper. */
thead tr {
  background: var(--bg);
}

thead th {
  background: var(--bg);
}

th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  position: relative;
  user-select: none;
}

th.sortable {
  cursor: pointer;
}

th.sortable:hover {
  color: var(--text);
}

.sort-icon {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s ease;
  color: var(--text-muted);
}

th.sortable:hover .sort-icon {
  color: var(--text-muted);
}

th.sort-asc .sort-icon,
th.sort-desc .sort-icon {
  opacity: 1;
  color: var(--accent);
}

/* --- Table Row --- */
tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s ease;
  cursor: pointer;
  height: var(--table-row-h);
}

tbody tr.row-expanded {
  height: auto;
  border-bottom: none;
}

.detail-row,
.detail-row:nth-child(even) {
  cursor: default;
  background-color: transparent;
}

.detail-row:hover {
  background-color: transparent !important;
}

td.detail-cell {
  padding: 0 16px 12px 16px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: normal;
  overflow: visible;
}

.detail-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  gap: 0;
}

.detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  flex: 1;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.detail-sep {
  margin: 0 12px;
  color: var(--border);
}

.detail-label {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
}

tbody tr:nth-child(even) {
  background-color: var(--surface);
}

tbody tr:hover {
  background-color: rgba(201, 169, 110, 0.05);
}

td {
  padding: 10px 16px;
  vertical-align: middle;
  overflow: hidden;
}

/* --- Column Widths: Simple View --- */
.view-simple .col-num {
  width: 40px;
  text-align: right;
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.view-simple .col-title,
.view-full .col-title {
  width: 220px;
  max-width: 220px;
  font-weight: 500;
  color: var(--text);
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
  line-height: 1.4;
}

.col-artist {
  width: 100px;
  color: var(--text-muted);
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
}

.col-games {
  width: 160px;
}

.col-type {
  width: 90px;
}

.col-influence {
  width: 90px;
}

.col-confidence {
  width: 90px;
}

.col-location {
  width: 160px;
  overflow: hidden;
}

.location-place {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.location-venue-text {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* --- Column Widths: Full View additions --- */
.col-venue {
  width: 200px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col-connection {
  width: 380px;
  overflow: visible;
}

.connection-inner {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  word-break: break-word;
}

tr.row-expanded .connection-inner {
  display: block;
  overflow: visible;
}


.col-source {
  width: 80px;
  color: var(--text-muted);
  overflow-wrap: anywhere;   /* long URLs wrap instead of blowing the column */
}

.col-tags {
  width: 160px;
}

.col-model-count {
  width: 70px;
  text-align: center;
}

/* Full view row height auto */
.view-full tbody tr {
  height: auto;
}

/* Full view inherits table-layout: fixed from the base rule so declared
   column widths are respected. When the viewport is narrower than the
   table's min-width the .table-scroll wrapper provides horizontal scroll. */

.view-full td {
  padding: 14px 16px;
  vertical-align: top;
}

/* Full view: connection column no truncation */
.view-full .col-connection {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: normal;
  overflow-wrap: break-word;
}

thead .col-num {
  width: 40px;
}

/* --- Game Pills --- */
.game-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.game-pill {
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.game-bloodborne       { background: rgba(139, 38, 53, 0.2); color: #c47a7a; border: 1px solid rgba(139, 38, 53, 0.3); }
.game-dark-souls       { background: rgba(61, 74, 107, 0.2); color: #7a9ec4; border: 1px solid rgba(61, 74, 107, 0.3); }
.game-dark-souls-ii    { background: rgba(74, 85, 104, 0.2); color: #9fb0c4; border: 1px solid rgba(74, 85, 104, 0.3); }
.game-dark-souls-iii   { background: rgba(85, 61, 107, 0.2); color: #b07ac4; border: 1px solid rgba(85, 61, 107, 0.3); }
.game-demons-souls     { background: rgba(107, 74, 61, 0.2); color: #c4a07a; border: 1px solid rgba(107, 74, 61, 0.3); }
.game-elden-ring       { background: rgba(122, 107, 61, 0.2); color: #c9a96e; border: 1px solid rgba(122, 107, 61, 0.3); }
.game-sekiro           { background: rgba(61, 107, 74, 0.2); color: #7ac4a0; border: 1px solid rgba(61, 107, 74, 0.3); }
.game-default          { background: rgba(80, 80, 100, 0.18); color: var(--text-muted); border: 1px solid var(--border); }

/* --- Badge / Pill Components --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 2px;
  background: rgba(42, 36, 56, 0.5);
  color: var(--text-muted);
  white-space: nowrap;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.badge-dot.confirmed  { background-color: var(--confirmed); }
.badge-dot.community  { background-color: var(--community); }
.badge-dot.suspected  { background-color: var(--suspected); }

/* Type badges with subtle left border */
.type-painting       { border-left: 2px solid #8b7355; }
.type-architecture   { border-left: 2px solid #6b7b8c; }
.type-sculpture      { border-left: 2px solid #7a6b8a; }
.type-literature     { border-left: 2px solid #8a6b6b; }
.type-mythology      { border-left: 2px solid #6b8a7a; }
.type-photography    { border-left: 2px solid #8a8a6b; }
.type-manga          { border-left: 2px solid #9b7a5a; }
.type-music          { border-left: 2px solid #5a7a8a; }
.type-film           { border-left: 2px solid #7a5a8a; }
.type-illustration   { border-left: 2px solid #6a8a5a; }
.type-print          { border-left: 2px solid #8a7a5a; }
.type-other          { border-left: 2px solid #6a6a7a; }

/* --- Tag pills (for Full view) --- */
.tag-pill {
  display: inline-block;
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 2px;
  background: rgba(42, 36, 56, 0.4);
  color: var(--text-muted);
  margin: 1px 3px 1px 0;
  white-space: nowrap;
}

/* --- Source link --- */
.source-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.source-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.source-text {
  font-size: 12px;
  color: var(--text-muted);
  display: inline-block;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* --- Model Count badge --- */
.model-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  width: 28px;
  height: 22px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}

.model-count.high    { background: rgba(74, 124, 89, 0.2); color: #7ac48a; }
.model-count.medium  { background: rgba(201, 169, 110, 0.2); color: var(--accent); }
.model-count.low     { background: rgba(42, 36, 56, 0.4); color: var(--text-muted); }

/* --- Empty State --- */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  display: none;
}

.empty-state.visible {
  display: block;
}

.empty-state h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.empty-state a {
  font-size: 13px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

.empty-state a:hover {
  color: var(--accent-hover);
}

/* --- Loading State --- */
.loading-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

/* --- Inspiration View (Card Grid) --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding-top: 8px;
  padding-bottom: 40px;
  overflow: visible;
  align-content: start;
  width: 100%;
}

#viewInspiration {
  display: block;
  overflow: visible;
  padding-bottom: 60px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.card:hover {
  border-color: rgba(201, 169, 110, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-image-placeholder {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(122, 116, 144, 0.3);
  text-transform: capitalize;
}

.card-body {
  padding: 16px;
}

.card-games {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.card-games .game-pill {
  font-size: 12px;
  padding: 1px 6px;
}

.card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}

.card-artist {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-influence {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}

.card-connection {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.55;
}

.card-confidence {
  display: flex;
  align-items: center;
  gap: 5px;
}

.card-confidence .badge-dot {
  width: 5px;
  height: 5px;
}

/* --- Card Modal --- */
.card-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.card-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  cursor: pointer;
}

.card-modal-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 4px;
}

.card-modal-close {
  position: fixed;
  top: 24px;
  right: 28px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  z-index: 2;
  transition: color 0.15s ease;
  font-family: inherit;
}

.card-modal-close:hover { color: #fff; }

.card-modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

/* Modal image */
.cmo-image {
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--bg);
}

.cmo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Modal body */
.cmo-body {
  padding: 20px;
}

.cmo-games {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.cmo-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 4px;
}

.cmo-artist {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.cmo-year {
  color: var(--text-muted);
}

.cmo-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 16px;
}

.cmo-loc {
  font-size: 12px;
  color: var(--text-muted);
  padding: 3px 0;
}

.cmo-connection {
  font-size: 13px;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 16px;
}

.cmo-source {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cmo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
}

.cmo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.cmo-url {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}

.cmo-url:hover {
  text-decoration: underline;
  color: var(--accent-hover);
}

.cmo-copy-link {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color 0.15s;
}

.cmo-copy-link:hover {
  color: var(--text);
}

/* --- Fade-in animation removed — caused HiDPI compositing blur --- */
.fade-in {
  opacity: 1;
}

/* --- Utility: hide --- */
.hidden {
  display: none !important;
}

/* --- Image column --- */
.col-image {
  width: 100px;
  padding: 4px 8px;
  overflow: hidden;
}

.thumb-wrap {
  width: 84px;
  height: 52px;
  overflow: hidden;
  border-radius: 2px;
  cursor: zoom-in;
  background: var(--surface);
}

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

.thumb-wrap:hover .thumb-img {
  transform: scale(1.08);
}

/* --- Image Modal --- */
.img-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}

.img-modal-content {
  position: relative;
  z-index: 1;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-modal-content img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  display: block;
  border-radius: 2px;
}

.img-modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s ease;
  font-family: inherit;
}

.img-modal-close:hover {
  color: #fff;
}

/* ============================================================
   Responsive filter bar — 3-row pill detection
   JS adds these classes when a group's pills would need a 3rd row.
   Each group gets a custom multi-select dropdown instead.
   When ALL groups are dropdowns, the view toggle flips horizontal.
   ============================================================ */

/* --- Custom Multi-Select Dropdown --- */
.filter-dropdown {
  display: none; /* hidden until JS activates the group */
  position: relative;
}

/* Trigger button — same height/padding rhythm as a pill */
.fdd-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  user-select: none;
}

.fdd-trigger:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

.fdd-trigger.active {
  border-color: var(--accent);
  color: var(--accent);
}

/* Chevron rotates when open */
.fdd-chevron {
  display: inline-flex;
  align-items: center;
  transition: transform 0.18s ease;
  line-height: 1;
  transform-origin: center;
}

.fdd-chevron svg {
  width: 11px;
  height: auto;
  display: block;
}

.fdd-trigger:hover .fdd-chevron {
  opacity: 1;
}

/* Flip (mirror vertically) when dropdown is open — no rotation. */
.filter-dropdown.open .fdd-chevron {
  opacity: 1;
  transform: scaleY(-1);
}

/* Dropdown panel */
.fdd-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  z-index: 200;
  display: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  /* Subtle top accent line */
  border-top: 1px solid rgba(201, 169, 110, 0.25);
}

.filter-dropdown.open .fdd-panel {
  display: block;
}

/* Individual items inside panel */
.fdd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 14px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.fdd-item:hover {
  background: rgba(201, 169, 110, 0.06);
  color: var(--text);
}

/* Checkbox indicator */
.fdd-item-check {
  width: 12px;
  height: 12px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.fdd-item.active {
  color: var(--accent);
}

.fdd-item.active .fdd-item-check {
  background: var(--accent);
  border-color: var(--accent);
}

/* Checkmark drawn with a tiny SVG-like border trick */
.fdd-item.active .fdd-item-check::after {
  content: '';
  display: block;
  width: 3px;
  height: 6px;
  border: 1.5px solid var(--bg);
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-0.5px, -1px);
}

/* Panel divider between groups of options (optional — not used currently) */
.fdd-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

/* Show/hide — which group uses pills vs dropdown */
.fb-conf-drop .filter-group[data-filter="confidence"] .filter-pills   { display: none; }
.fb-conf-drop .filter-group[data-filter="confidence"] .filter-dropdown { display: block; }

.fb-type-drop .filter-group[data-filter="type"] .filter-pills   { display: none; }
.fb-type-drop .filter-group[data-filter="type"] .filter-dropdown { display: block; }

.fb-game-drop .filter-group[data-filter="game"] .filter-pills   { display: none; }
.fb-game-drop .filter-group[data-filter="game"] .filter-dropdown { display: block; }

/* When ALL groups are dropdowns → view toggle goes horizontal */
.fb-all-drop .filter-group--view { align-self: auto; }
.fb-all-drop .filter-group--view .view-toggle {
  flex: none;
  flex-direction: row;
  width: auto;
}
.fb-all-drop .view-btn {
  flex: none;
  width: 36px;
  height: 32px;
  border-bottom: none;
  border-right: 1px solid var(--border);
}
.fb-all-drop .view-btn:last-child { border-right: none; }

/* --- Visited toggle --- */
.visited-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.visited-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.visited-check {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.visited-check:checked {
  background: #5ec4a0;
  border-color: #5ec4a0;
}

.visited-check:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 7px;
  border: 1.5px solid #0e0c14;
  border-top: none;
  border-left: none;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* Green/cyan row number when visited */
tr.visited td.col-num {
  color: #5ec4a0;
  font-weight: 600;
}

/* --- Report button (in detail row) --- */
.detail-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.share-btn {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 0;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
  flex-shrink: 0;
}

.share-btn:hover {
  color: var(--text);
}

.report-btn {
  background: none;
  border: none;
  font-size: 11px;
  color: #99556d;
  cursor: pointer;
  padding: 2px 0;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
  flex-shrink: 0;
}

.report-btn:hover {
  color: #99556d;
}

/* --- Report modal --- */
.report-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-modal.hidden { display: none; }

.report-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.report-modal-inner {
  position: relative;
  background: var(--surface, #1a1a1a);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 28px 32px 24px;
  width: 420px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.report-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
}
.report-modal-close:hover { color: var(--text); }

.report-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 4px;
}

/* --- About modal --- */
.about-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.about-body p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

.about-beta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  color: var(--text-muted);
}

.about-beta-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
}

/* --- Nav beta label --- */
.nav-beta {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  align-self: flex-start;
  margin-top: 4px;
  margin-left: 6px;
}

/* --- Site Footer --- */
.site-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 32px var(--page-pad);
  border-top: 1px solid var(--border);
  margin-top: 48px;
}

.site-footer a {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.site-footer a:hover {
  color: var(--text);
}

.site-footer span {
  font-size: 12px;
  color: var(--border);
}

.site-footer-copy {
  color: var(--suspected);
}

/* ============================================================
   Small-screen (<970px) — alpha-stage unsupported message
   ============================================================ */
.small-screen-message {
  display: none;
}

@media (max-width: 969px) {
  body > .app { display: none; }

  .small-screen-message {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    overflow-y: auto;
  }

  .small-screen-inner {
    max-width: 440px;
    text-align: center;
    color: var(--text);
  }

  .small-screen-logo {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0 auto 32px;
    display: block;
  }

  .small-screen-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 16px;
  }

  .small-screen-body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
  }

  .small-screen-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    background: rgba(201, 169, 110, 0.1);
    border: 1px solid rgba(201, 169, 110, 0.3);
    border-radius: 3px;
    vertical-align: 1px;
    margin: 0 2px;
  }
}