:root { 
    --accent: #E5C158; /*Live Color: #E5C158, PTS Color: #497ab4 */
    --accent-dim: #D1B366; /* Live Color: #D1B366, PTS Color: #223b5a*/
    --bg: #232323;
    --card-bg: #181818;
    --text: #e0e0e0;
    --text-muted: #aaa;
    --border-subtle: rgba(229, 193, 88, 0.18);
    --content-width: 800px;
    --card-width: 720px;
  }

  html {
    background-color: var(--bg);
  }

  body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
    overflow-x: hidden;
  }

  .container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 16px;
  }

  h1 {
    color: var(--accent);
    margin-bottom: 5px;
    text-align: center;
  }

 .meta {
    text-align: center;
    margin-top: 0.5em;
  }

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

  .badge-link {
    background: #333;
    color: var(--accent);
    border-radius: 4px;
    padding: 2px 6px;
    text-decoration: none;
    font-size: 13px;
    transition: background 0.2s;
  }

  @media (hover: hover) {
    .badge-link:hover {
      background: #555;
    }
  }

  .placement-note {
    margin: 0px;
    font-size: 0.85rem;
    color: var(--text-muted);
    width: 100%;
  }


  #pagination button {
    padding: 6px 0;
    width: 50px;
    margin-left: 2px;
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: 0.2s;
  }
  @media (hover: hover) {
    #pagination button:hover:not(:disabled) {
      background: var(--accent);
      color: black;
    }
  }
  #pagination button:disabled {
    opacity: 0.4;
    cursor: default;
  }
  #pagination button.active-page {
    background: var(--accent);
    color: black;
    font-weight: bold;
  }

  #paginationTop {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin: 10px 0 0;
    padding: 0;
  }
  #paginationTop button {
    padding: 2px 0;
    width: 34px;
    height: 40px;
    margin: 0;
    background: var(--card-bg);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: 0.2s;
    box-sizing: border-box;
  }
  @media (hover: hover) {
    #paginationTop button:hover:not(:disabled) {
      background: var(--accent);
      color: black;
      border-color: var(--accent);
    }
  }
  #paginationTop button:disabled {
    opacity: 0.3;
    cursor: default;
  }
  #paginationTop button.active-page {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
    font-weight: bold;
  }
  #paginationTop span {
    color: var(--text-muted);
    font-size: 12px;
  }
  
  .controls {
    position: flex;
    top: 0;
    z-index: 100;
    background: var(--bg);
    padding: 12px 16px;
    border-bottom: 1px solid var(--card-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .controls input[type="text"] {
    padding: 10px;
    font-size: 16px;
    width: 100%;
    max-width: 350px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background-color: var(--card-bg);
    color: var(--text);
  }
  .search-line input[type="text"] {
    border: none;
    border-radius: 0;
    background-color: transparent;
    max-width: none;
  }

  .controls .search-line {
    display: flex;
    gap: 0;
    width: 100%;
    max-width: 450px;
    height: 40px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    align-items: stretch;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .controls .search-line:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(229, 193, 88, 0.15);
  }

  .search-line input:focus,
  .search-line select:focus,
  .search-line textarea:focus {
    outline: none;
    box-shadow: none;
  }

  .search-line input {
    -webkit-appearance: none;
  }

  .controls label {
    font-size: 14px;
    color: var(--text-muted);
    margin-left: 4px;
  }

  .controls .inline-group {
    display: flex;
    align-items: center;
    gap: -10px;
    justify-content: center;
  }

  .inline-group {
    display: flex;
    align-items: center;
    gap: 0px;
    justify-content: center;
    width: 100%;
  }

  #clearFiltersExternal {
    background-color: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-left: none;
    position: relative;
    top: -8px;
    border-radius: 0 6px 6px 0;
    height: 36px;
    padding: 0 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    color: #888;
  }

  @media (hover: hover) {
    #clearFiltersExternal:hover {
      background-color: rgba(255, 77, 79, 0.15);
      color: #ff6b6b;
      border-color: rgba(255, 77, 79, 0.4);
    }
  }

  .inline-group label {
    font-size: 14px;
    color: var(--text-muted);
  }

  .group-filters {
    display: flex;
    margin-right: 10px;
    flex-shrink: 0;
  }

  .group-sort {
    display: flex;
    align-items: center;
    gap: 8px; 
  }

  #results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 16px;
    margin: 0 auto;
    max-width: 1200px;
  }

  /* ── Filter Modal ── */
  .filter-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: filterFadeIn 0.15s ease forwards;
  }
  .filter-modal-overlay.closing {
    animation: filterFadeOut 0.15s ease forwards;
  }
  @keyframes filterFadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes filterFadeOut { from { opacity: 1; } to { opacity: 0; } }
  .filter-modal {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    width: min(700px, 95vw);
    height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: filterSlideIn 0.15s ease forwards;
  }
  .filter-modal.closing {
    animation: filterSlideOut 0.15s ease forwards;
  }
  @keyframes filterSlideIn { from { transform: scale(0.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  @keyframes filterSlideOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.97); opacity: 0; } }
  .filter-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }
  .filter-modal-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .filter-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s;
  }
  @media (hover: hover) {
    .filter-modal-close:hover { color: var(--text); }
  }
  .filter-modal-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    color: var(--text);
  }
  .filter-modal-body {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    flex: 1;
  }
  .filter-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }
  .filter-modal-footer .clear-filters {
    background: var(--bg);
    border: 2px solid #ff4d4f;
    border-radius: 4px;
    color: #ff4d4f;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 20px;
    margin: 0;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    box-sizing: border-box;
    transition: background-color 0.15s, color 0.15s;
  }
  @media (hover: hover) {
    .filter-modal-footer .clear-filters:hover {
      background: #ff4d4f;
      color: black;
    }
  }
  .filter-modal-done {
    background: var(--accent);
    color: black;
    border: 2px solid var(--accent);
    border-radius: 4px;
    padding: 6px 20px;
    font-weight: 700;
    font-size: 13px;
    margin: 0;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.15s;
  }
  @media (hover: hover) {
    .filter-modal-done:hover { background: var(--accent-dim); }
  }

  .filter-col-placement,
  .filter-col-categories {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 8px;
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
    flex-shrink: 0;
  }
  .filter-col-placement  { min-width: 130px; }
  .filter-col-categories { min-width: 150px; }
  .filter-col-sub {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: opacity 0.15s ease;
    min-height: 200px;
  }
  .filter-col-sub button { flex: 0 0 auto; }
  .filter-col-sub-empty {
    color: #555;
    font-size: 12px;
    font-style: italic;
    padding: 4px 2px;
    width: 100%;
  }
  #filtersOptions button.cat-active {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  .filter-header {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    padding: 4px 0 6px;
    margin: 0;
    text-align: center;
  }

  /* Mobile Support: Tablets and smaller. Keep 3 columns, just tighten */
  @media (max-width: 800px) {
    .filter-modal {
      width: min(700px, 95vw);
    }
    .filter-col-placement  { min-width: 90px; }
    .filter-col-categories { min-width: 110px; }
    .filter-col-placement button,
    .filter-col-categories button,
    .filter-col-sub button {
      font-size: 12px;
      padding: 4px 6px;
    }
  }

  /* Mobile Support: Phones (max 599px). Keep 3 columns, shrink further */
  @media (max-width: 599px) {
    .filter-modal {
      width: 95vw;
      height: 85vh;
      border-radius: 6px;
    }
    .filter-modal-header {
      padding: 8px 10px;
    }
    .filter-modal-title {
      font-size: 12px;
    }
    .filter-col-placement  { min-width: 72px; padding: 6px 4px; }
    .filter-col-categories { min-width: 100px; padding: 6px 4px; }
    .filter-col-sub { padding: 6px 4px; gap: 3px; }
    .filter-header {
      font-size: 9px;
      padding: 2px 0 3px;
    }
    .filter-col-placement button,
    .filter-col-categories button,
    .filter-col-sub button {
      font-size: 11px;
      padding: 4px 5px;
    }
    .filter-modal-footer {
      padding: 8px 10px;
    }
    .filter-modal-footer .clear-filters,
    .filter-modal-footer .filter-modal-done {
      font-size: 12px;
      padding: 5px 10px;
    }
  }

  /* Mobile Support: Very small phones (max 374px) */
  @media (max-width: 374px) {
    .filter-modal {
      width: 92vw;
      height: 80vh;
    }
    .filter-col-placement button,
    .filter-col-categories button,
    .filter-col-sub button {
      font-size: 10px;
      padding: 4px 6px;
      min-height: 26px;
    }
    .filter-header {
      font-size: 8px;
      padding: 1px 0 2px;
    }
  }



  /* While #results has no cards in it yet (first paint, before the DB
     fetch resolves), hold open roughly the amount of space the grid will
     occupy. This stops the page from being short-then-suddenly-tall, which
     is what causes the header's elevated background to visually "flash"
     before the darker page background takes over. Once JS inserts cards,
     :empty stops matching and this rule drops out automatically. */
  #results:empty {
    display: block;
    min-height: 60vh;
  }

  .cover-image-wrap {
    width: 100%;
    aspect-ratio: 1042 / 340;
    overflow: hidden;
  }
  .cover-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }



  .inline-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  /* Used specifically for Placement Conditions. By default this is a plain
     left-aligned row. If everything fits on one line, it stays that way,
     unchanged from before. Only when content actually wraps does JS add
     .is-wrapped, which switches to a single max-content grid column: the
     first (topmost) condition sets the column's width and stays
     left-aligned, while the connector and whatever follows it centers
     underneath in that same width. minmax(0, ...) lets the column shrink on
     narrow cards instead of overflowing. */
  .inline-wrap--conditions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    max-width: 100%;
  }
  .inline-wrap--conditions.is-wrapped {
    display: inline-grid;
    grid-template-columns: 1fr;
    row-gap: 6px;
    justify-items: center;
  }
  .inline-wrap--conditions.is-wrapped > *:first-child {
    justify-self: start;
  }
  .inline-wrap--conditions.is-wrapped .connector {
    text-align: center;
  }

  .connector {
    color: var(--accent);
    font-weight: 600;
    font-size: 13px;
    margin: 0 6px;
    line-height: 1;
    text-transform: uppercase;
  }

  .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid var(--accent);
    margin: 0 8px;
    vertical-align: middle;
  }

  .inline-wrap .arrow + .arrow {
    display: none;
  }

  .pill {
    background: var(--bg);
    border: 2px solid var(--accent);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 14px;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    max-width: 240px;
    min-height: 32px;
    word-break: break-word;
  }

  /* Merged group for pills that satisfy an OR requirement (any one fulfills it) */
  .pill-group {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--accent);
    border-radius: 14px;
    overflow: hidden;
    max-width: 240px;
    width: 100%;
    background: var(--bg);
  }

  .pill-group .pill {
    border: none;
    border-radius: 0;
    max-width: none;
    width: 100%;
    padding: 6px 12px;
  }

  .pill-group-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    font-size: 10px;
    line-height: 1.4;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .pill-group-divider::before,
  .pill-group-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--accent-dim);
    opacity: 0.4;
  }

  .changelog-entry h4 {
      margin: 0 0 4px 0;
      font-size: 14px;
      font-weight: bold;
      color: var(--accent);
    }

    .changelog-entry { /*Live Color: rgba(229, 193, 88, 0.05), PTS Color: rgba(15, 147, 255, 0.05); */
      background: rgba(229, 193, 88, 0.05);
      border-left: 3px solid var(--accent);
      border-radius: 4px;
      padding: 6px 12px;
      margin: 6px 0;
      text-align: left;
      min-width: 0;
      overflow-wrap: anywhere;
      word-wrap: break-word;
    }

    .changelog-entry ul {
      padding: 0;
      margin: 4px 0;
      background: transparent;
      list-style-type: disc;
      list-style-position: outside;
      min-width: 0;
    }

    .changelog-entry li {
      display: list-item;
      background-color: transparent;
      border: none;
      box-shadow: none;
      margin-bottom: 6px;
      margin-left: 16px;
      padding: 2px 0;
      border-radius: 0;
      align-items: baseline;
      width: auto;
      text-align: left;
      min-width: 0;
      overflow-wrap: anywhere;
      word-wrap: break-word;
    }

    .changelog-entry li ul {
      margin: 2px 0 0 0;
      list-style-type: circle;
    }

    .changelog-entry li li {
      margin-bottom: 2px;
      margin-left: 16px;
      font-size: 13px;
      color: var(--text-muted);
    }

  #searchBox {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    padding: 0 12px;
    border: none;
    border-radius: 0;
    background-color: transparent;
    color: var(--text);
    box-sizing: border-box;
    outline: none;
  }

  .search-line .custom-dropdown::before {
    content: '';
    width: 1px;
    align-self: stretch;
    background-color: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
  }

  #dropdownOptions .option {
    padding: 8px 12px;
    cursor: pointer;
  }

  @media (hover: hover) {
    #dropdownOptions .option:hover {
      background-color: var(--accent);
      color: black;
    }
  }

  #dropdownOptions,
  #sortOptions {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    width: 100%;
    font-size: 14px;
    margin-top: -2px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 0 0 6px 6px;
    box-sizing: border-box;
    z-index: 200;
    opacity: 0;
    transform: scaleY(0.95);
    max-height: 0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, max-height 0.2s ease;
  }

  #dropdownOptions.open,
  #sortOptions.open {
    opacity: 1;
    transform: scaleY(1);
    max-height: 500px;
    pointer-events: auto;
  }


  #dropdownSelected {
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 14px;
    border: none;
    border-radius: 0 5px 5px 0;
    background-color: transparent;
    color: var(--text);
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
  }

  @media (hover: hover) {
    #dropdownSelected:hover {
      background-color: var(--accent);
      color: black;
    }
  }

  #dropdownSelected.open {
    border-radius: 0 6px 0 0; /* bottom-right sharp when dropdown is open */
  }

  .custom-dropdown {
    position: relative;
    width: max-content;
    height: 40px;
    display: flex;
    flex-shrink: 0;
  }

  #sortDropdown, #sortSelected, #sortOptions,
  .custom-dropdown, #dropdownSelected, #dropdownOptions {
    box-sizing: border-box;
  }

  /* Modal background */
  .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(26,26,26, 0.5); 
  }

  .modal.is-open {
    display: block;
    opacity: 1;
  }

  .modal-content {
    position: relative;
    background-color: var(--card-bg);
    color: var(--text);
    width: 50%;
    max-height: 70vh;
    margin: 50px auto;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    overflow: hidden; 
    transform: translateY(-6px);
    transition: transform 120ms ease-out, opacity 120ms ease-out;
    opacity: 0;
  }

  .modal-header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .modal-body {
    max-height: 60vh;       
    overflow-y: auto;      
    padding: 10px 15px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--card-bg);
  }

    /* Modal scrollbar */
  .modal-body::-webkit-scrollbar {
    width: 8px;
  }
  
  .modal-body::-webkit-scrollbar-track {
    background: var(--card-bg); /* same as modal bg */
    border-radius: 4px;
  }
  
  .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--accent); /* accent color */
    border-radius: 4px;
    border: 2px solid var(--card-bg); /* optional padding around thumb */
  } 

  .modal.is-open .modal-content {
    transform: translateY(0);
    opacity: 1;
  }

  /* Close button */
  .close {
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: var(--accent);
  }

  @media (hover: hover) {
    .close:hover {
      color: var(--accent-dim);
    }
  }
  .close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Accent button style */
    .accent-btn {
    background-color: var(--card-bg);      /* dark background */
    color: var(--accent);                   /* yellow text */
    border: 1px solid var(--border-subtle);       /* subtle border */
    padding: 6px 20px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    display: block;                         /* allow centering */
    margin: 6px auto;                      /* center horizontally */
    font-size: 14px;
    text-align: center;
    transition: background-color 0.2s, color 0.2s;
  }

  @media (hover: hover) {
    .accent-btn:hover {
      background-color: var(--accent);
      color: black;
    }
  }

  .modal-content h2 {
    color: var(--accent);
    font-size: 1.5em;
    margin-bottom: 10px;
  }

  #infoBody {
    color: var(--text);
    font-size: 1em;
    line-height: 1.5em;
  }

  #infoBody p.question {
    color: var(--accent);
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
  }

  #infoBody p.answer {
    color: var(--text);
    margin-left: 10px;
    margin-bottom: 10px;
    line-height: 1.5em;
  }


  #filtersButton,
  #sortSelected {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 6px;
    font-size: 13px;
    line-height: 1;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background-color: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    box-sizing: border-box;
    vertical-align: middle;
  }

  #filtersDropdown,
  #sortDropdown {
    display: inline-flex;
    position: relative;
    align-items: center;
    margin: 0;
    padding: 0;
  }


  #sortDropdown {
    position: relative;
    width: auto;
    white-space: nowrap;
    height: 36px;
    display: flex;
    flex-shrink: 0;
    overflow: visible;
  }

  #filtersButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 20px;
    font-size: 13px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px 0 0 6px;
    background-color: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    box-sizing: border-box;
    height: 36px;
    width: auto !important;
    flex-shrink: 0;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
  }
  @media (hover: hover) {
    #filtersButton:hover {
      background-color: var(--accent);
      color: black;
    }
  }
  #filtersButton:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  #filtersButton.active {
    background-color: var(--accent);
    color: black;
  }
  #filtersButton .filter-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* filtersOptions is now the modal body, no dropdown positioning */
  #filtersOptions {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
  }

  #filtersOptions button {
    padding: 5px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
  }
  #filtersOptions button[data-filter] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 4px 8px;
    background: var(--card-bg);
    border: none;
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    border-radius: 3px;
  }
  @media (hover: hover) and (pointer: fine) {
    #filtersOptions button[data-filter]:hover {
      background-color: var(--accent);
      color: black;
    }
  }
  #filtersOptions button[data-filter].selected {
    background-color: var(--accent);
    color: black;
  }
  .filter-header {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    padding: 4px 0 6px;
    margin: 0;
  }
  .clear-filters {
    margin-top: 8px;
    background-color: #ffeded;
    border: 1px solid #ff4d4f;
    color: #ff4d4f;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
  }

  @media (hover: hover) {
    .clear-filters:hover {
      background-color: #ff4d4f;
      color: black;
    }
  }

  #sortSelected,
  #filtersButton,
  #sortDropdown {
    position: relative;
    width: 240px;
    white-space: nowrap; 
    height: 36px;
    display: flex;
    flex-shrink: 0;
  }

  #sortSelected {
    display: inline-flex;;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    font-size: 14px;
    max-width: none;
    width: 100%;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background-color: var(--card-bg);
    white-space: nowrap;
    color: var(--text);
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s, color 0.15s;
  }

  @media (hover: hover) {
    #sortSelected:hover {
      background-color: var(--accent);
      color: black;
    }
  }

  #sortSelected.open {
    border-radius: 6px 6px 0 0;
  }

  #sortOptions .option {
    font-size: 14px;
    padding: 8px 12px;
    cursor: pointer;
  }

  @media (hover: hover) {
    #sortOptions .option:hover {
      background: var(--accent-dim);
      color: black;
    }
  }

  .tooltip {
    position: fixed;
    background: var(--card-bg);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid var(--border-subtle);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 9999;
  }

  .tooltip.show {
    opacity: 1;
    transform: translateY(0);
  }

  #mobile-tooltip-box {
    position: fixed;
    bottom: 20px;            
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
    background: var(--card-bg);
    color: white;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    z-index: 9999;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease; 
    border: 1px solid var(--border-subtle);
  }

  #mobile-tooltip-box.show {
    bottom: 20px;
    opacity: 1;
  }

  .grid-card {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .grid-card.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .grid-card-name {
    background: var(--card-bg);
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
    text-align: center;
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
    transition: color 0.15s;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }
  @media (hover: hover) {
    .grid-card-name:hover {
      color: #fff;
      background: #252525;
    }
  }
  .grid-card-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--card-bg);
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  .grid-card-image-wrap img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
  }
  .grid-card-info {
    padding: 12px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .grid-card-section {
    margin-bottom: 10px;
  }
  .grid-card-section:last-child {
    margin-bottom: 0;
  }
  .grid-card-section .section-title {
    font-size: 14px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
  }
  .grid-card-section .section-value {
    font-size: 14px;
    color: #ccc;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }

  .return-to-top {
    position: fixed;
    bottom: 32px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background-color: var(--card-bg);
    color: var(--accent);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.3s ease;
    z-index: 999;
  }

  @media (hover: hover) {
    .return-to-top:hover {
      background-color: var(--accent);
      color: black;
      transform: translateY(-4px);
    }
  }

  .return-to-top.show {
    display: flex;
  }

  .return-to-top svg {
    width: 24px;
    height: 24px;
  }

  @media (max-width: 600px) {
    .controls {
      flex-direction: column;
    }
    .modal-content {
      width: 80%;
    }
  }

  @media (max-width: 600px) {
    #results {
      grid-template-columns: 1fr;
    }
  }

  @media (min-width: 601px) and (max-width: 800px) {
    #results {
      grid-template-columns: repeat(2, 1fr);
    }
  }

/* ============================================================
   Merged improvements (previously style-improvements.css)
   Appended in original load order so cascade/output is identical
   to the old two-file setup. These rules intentionally come
   after the base rules above to override/refine them.
   ============================================================ */

/* ============================================================
   style-improvements.css v3
   ============================================================ */

:root {
  --accent-secondary: #5f8fc4;
  --accent-secondary-dim: #3f5f82;
  --divider: rgba(229, 193, 88, 0.12);
}

body {
  overflow-y: visible;
}

#pagination {
  display: none;
}

/* ── Meta row ── */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 6px 0 0;
  font-size: 13px;
}
.meta .author {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: var(--text-muted);
}
.author-text {
  white-space: nowrap;
}
.author-text::after {
  content: '\2022';
  margin: 0 10px;
  color: var(--text-muted);
  opacity: 0.5;
  user-select: none;
}
/* Hidden only when JS detects the author line has actually wrapped
   (see checkAuthorWrap() in script.js) rather than at a fixed breakpoint */
.author.wrapped .author-text::after {
  display: none;
}
.author-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.meta-sep {
  color: var(--text-muted);
  margin: 0 10px;
  opacity: 0.5;
  user-select: none;
}

.badge-link,
.meta-link {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  line-height: 16px;
  font-weight: normal;
  vertical-align: middle;
  box-sizing: border-box;
  margin: 0;
  cursor: pointer;
  padding: 2px 6px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
@media (hover: hover) {
  .badge-link:hover,
  .meta-link:hover {
    color: var(--accent);
    border-color: var(--border-subtle);
    background-color: rgba(229, 193, 88, 0.06);
  }
}

/* ── Toolbar height fix ── */
#filtersButton,
#sortSelected,
#sortDropdown {
  height: 40px;
}

#clearFiltersExternal {
  height: 40px;
  top: -4px;
}

.group-filters,
.group-sort {
  display: flex;
  align-items: center;
}

/* ── Pagination ── */
#paginationTop {
  gap: 2px;
  align-items: center;
}
#paginationTop button {
  border-color: var(--border-subtle);
}
#paginationTop span {
  color: var(--text-muted);
  font-size: 13px;
  min-width: 50px;
  text-align: center;
}
@media (hover: hover) {
  #paginationTop button:hover:not(:disabled) {
    border-color: var(--accent);
  }
}

/* Disabled pagination: single page / no results, layout stays stable */
.pagination-single {
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}
.pagination-single button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Site header ── */
.site-header {
  position: relative;
  padding: 12px 0 0;
  background: var(--bg-elevated);
}
.site-header .cover-image-wrap {
  line-height: 0;
  font-size: 0;
}
.site-header .meta {
  line-height: 1.4;
}
.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -20px;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: var(--bg-elevated);
  z-index: -1;
}

/* ── Grid cards ── */
.grid-card {
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) {
  .grid-card:hover {
    transform: translateY(-2px);
  }
}
.grid-card-section .section-title {
  color: var(--text-muted);
}
.grid-card-section .section-value {
  color: var(--text);
}
.grid-card-name {
  border-bottom: 1px solid var(--divider);
}

/* ── Sticky toolbar ── */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 10px;
  column-gap: 12px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 16px;
  margin: -1px 0 0;
}
.toolbar .search-line {
  flex: 1 1 380px;
  max-width: 450px;
}
.toolbar .inline-group {
  flex: 0 0 auto;
  width: auto;
}
.toolbar #paginationTop {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}
.controls {
  display: block;
  padding: 8px 0 0;
  margin: 0;
  gap: 0;
  border: none;
  background: var(--bg-elevated);
}

@media (max-width: 600px) {
  .toolbar {
    flex-direction: column;
    margin: 0;
  }
  .toolbar .search-line,
  .toolbar .inline-group,
  .toolbar #paginationTop {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    justify-content: center;
  }
}

/* ── Depth ── */
:root {
  --bg-elevated: #232323;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.grid-card {
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
@media (hover: hover) {
  .grid-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
  }
}

#sortSelected {
  border-color: var(--border-subtle);
}
@media (hover: hover) {
  #sortSelected:hover {
    border-color: var(--accent);
  }
}

/* ── Changelog fade-in ── */
.changelog-entry {
  animation: changelogFadeIn 0.15s ease;
}
@keyframes changelogFadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Pills ── */
:root {
  --bg-chip: #222222;
}
.pill {
  border: none;
  border-radius: 6px;
  background: var(--bg-chip);
  color: var(--accent);
}

/* ── Placement condition pills: left-aligned list ──
   Overrides the old centered/stacked "wrap" treatment from style.css with a
   plain left-aligned list: each pill on its own line, with AND/OR shown as
   small inline text between them rather than big centered block text. */
.inline-wrap--conditions,
.inline-wrap--conditions.is-wrapped {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: auto;
  max-width: 100%;
}

.inline-wrap--conditions.is-wrapped > *:first-child {
  justify-self: unset;
}

.inline-wrap--conditions .connector,
.inline-wrap--conditions.is-wrapped .connector {
  margin: 0 0 0 2px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  color: var(--text-muted);
}

.inline-wrap--conditions .pill {
  justify-content: flex-start;
  text-align: left;
}

/* ── Empty results ── */
.no-results {
  grid-column: 1 / -1;
  list-style: none;
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 16px;
}

#results:has(.no-results) {
  min-height: 678px;
  display: flex;
  align-items: center;
  justify-content: center;
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* ── Touch devices: remove lingering focus/active states on buttons ── */
@media (hover: none) {
  #filtersOptions button[data-filter]:focus,
  #filtersOptions button[data-filter]:active,
  #sortOptions .option:focus,
  #dropdownOptions .option:focus,
  .filter-modal-done:focus,
  .filter-modal-close:focus {
    outline: none;
    background-color: inherit;
    color: inherit;
  }
  #filtersOptions button[data-filter].selected:focus,
  #filtersOptions button[data-filter].selected:active {
    background-color: var(--accent);
    color: black;
  }
}