@import url('/games/app.css?v=30');
@import url('./shell.css?v=12');

/* Software shares the games palette, with a roomier picture-led catalog. */
.software-page { letter-spacing: -.1px; }
.software-page .shell { max-width: 1240px; }
.software-page .catalog-count { margin-left: auto; }
.catalog-intro { padding: 28px 0 24px; }
.eyebrow { margin: 0 0 7px; color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: 1.3px; }
.catalog-intro h1 { margin: 0 0 8px; font-size: clamp(28px, 3vw, 36px); font-weight: 750; line-height: 1.16; letter-spacing: -1.25px; }
.catalog-intro > p:last-child { margin: 0; color: var(--muted); font-size: 13px; }

.software-toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 9px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.software-toolbar .search { grid-column: 1 / -1; min-width: 0; }
.software-toolbar .control { min-width: 0; }
.software-toolbar .search input { padding: 11px 14px; min-height: 44px; font-size: 13px; background: #f6f4ee; border-color: transparent; border-radius: 9px; }
.software-toolbar .search input::placeholder { color: #7c7c73; opacity: 1; }
.software-toolbar select { width: 100%; max-width: none; background: var(--paper); border-radius: 8px; min-height: 39px; font-size: 11px; }
.software-toolbar select:hover { border-color: #bbb9ac; }
.omarchy-filter { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; min-height: 39px; flex-shrink: 0; border: 1px solid #d4e4e5; border-radius: 8px; background: #f0f7f6; cursor: pointer; white-space: nowrap; font-size: 11px; font-weight: 650; color: #326c77; }
.omarchy-filter input { width: 14px; height: 14px; margin: 0; accent-color: var(--platform-omarchy); }
.omarchy-filter:has(input:checked) { border-color: var(--platform-omarchy); background: #e0f0ef; }
.software-page .list-meta { padding: 9px 2px 0; gap: 12px; font-size: 11px; }
.software-page .list-meta #resultCount { font-weight: 650; color: var(--ink); margin-right: auto; }
.software-page .list-meta .text-button { font-size: 11px; min-height: 32px; }
.software-page .platform-legend { margin: 2px 2px 13px; max-width: 100%; font-size: 10px; line-height: 1.6; }

.software-list { display: grid; gap: 12px; border: 0; }
.software-item article { display: grid; grid-template-columns: 184px minmax(0, 1fr) 76px; grid-template-areas: 'art body action'; gap: 22px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; align-items: start; background: var(--paper); transition: border-color .16s ease; }
.software-item article:hover { border-color: #c6c2b3; }
.software-item .thumbnail { grid-area: art; width: 184px; height: 142px; border: 1px solid #dedbd0; background: #ece9df; border-radius: 10px; }
.software-item .thumbnail img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.software-item .software-info { grid-area: body; min-width: 0; }
.software-item .title-line { flex-wrap: wrap; gap: 6px 10px; }
.software-item .title-line h2 { font-size: 21px; max-width: 100%; letter-spacing: -.65px; line-height: 1.25; }
.software-item .game-title { text-decoration: none; }
.software-item .game-title:hover { color: var(--accent); }
.source-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 650; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--muted); background: #f4f2eb; white-space: nowrap; }
.source-badge::before { content: '◇'; font-size: 12px; line-height: 1; }
.source-badge[data-source='open'] { color: #37613e; border-color: #d4e2ce; background: #edf4e8; }
.source-badge[data-source='open']::before { content: '↗'; }
.source-badge[data-source='available'] { color: #796020; border-color: #e6ddc4; background: #f7f1e2; }
.omarchy-badge { color: #326c77; border-color: #d4e4e5; background: #eef7f5; }
.software-item .description { display: block; white-space: normal; overflow: visible; font-size: 12px; line-height: 1.65; margin: 8px 0 10px; max-width: 760px; color: #626358; }
.software-item .game-tags { font-size: 10px; gap: 4px 10px; }
.software-item .category { color: var(--ink); font-weight: 650; }
.software-item .topic-tags { display: flex; flex-wrap: wrap; gap: 3px 10px; color: var(--muted); font-size: 10px; margin-top: 5px; }
.software-item .topic-tags > span::before { content: '#'; color: #a4a396; margin-right: 1px; }
.software-item .platforms { margin: 11px 0 7px; }
.software-item .credits { display: flex; align-items: center; gap: 4px 13px; flex-wrap: wrap; margin-top: 7px; }
.software-item .author-line { flex-wrap: wrap; gap: 3px 6px; }
.software-item .author-x { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; color: var(--ink); max-width: 100%; }
.software-item .x-posts { display: flex; flex-wrap: wrap; gap: 6px; }
.software-item .x-post-link { font-size: 10px; }
.software-item .details-button { font-size: 11px; min-height: 30px; }
.software-item .software-action { grid-area: action; align-self: start; padding-top: 1px; }
.software-item .software-action .button { width: 100%; padding: 10px 12px; gap: 5px; min-height: 42px; border-radius: 9px; font-size: 12px; }

.software-community { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 11px; border-top: 1px solid #eeece3; font-size: 11px; }
.community-button, .software-opens { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 9px; border: 1px solid #e2dfd4; border-radius: 8px; background: #faf8f2; color: #646459; font-size: 11px; line-height: 1.25; white-space: nowrap; }
.community-button { transition: color .14s ease, background .14s ease, border-color .14s ease; }
.community-button svg, .software-opens svg { width: 15px; height: 15px; flex: 0 0 15px; }
.community-button:hover { color: var(--ink); border-color: #c7c2b3; background: #f3f0e6; }
.community-button.is-active, .community-button[aria-pressed='true'] { color: var(--accent); border-color: #edc5af; background: #fcebdd; }
.community-button[data-software-action='like'].is-active, .community-button[data-software-action='like'][aria-pressed='true'] { color: #a54150; border-color: #e8bec7; background: #f9e9ec; }
.community-button[aria-pressed='true'] svg { stroke-width: 2.2; }
.community-button:disabled { cursor: wait; opacity: .55; }
.community-count { font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
.community-button.is-active .community-count, .community-button[aria-pressed='true'] .community-count { color: inherit; }
.software-opens { border-color: transparent; background: transparent; padding-inline: 6px; }
#communityNotice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 11px 14px; border: 1px solid #e6d7bb; border-radius: 10px; background: #faf3e4; color: #786034; font-size: 12px; }
#communityRetry { min-height: 32px; }
.community-note { margin: 18px 2px 0; color: var(--muted); font-size: 11px; }

.software-page .empty { padding: 36px 16px; text-align: center; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.software-page .empty h2 { font-size: 18px; }
.software-footer { position: static; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 22px 2px 28px; color: var(--muted); font-size: 11px; }
.software-page dialog { border-radius: 20px; padding: 28px; background: var(--paper); }
.software-page dialog h2 { font-size: 26px; letter-spacing: -.85px; }
.software-page .dialog-close { width: 36px; height: 36px; border-radius: 50%; background: #f2efe5; }
.details-image { width: 100%; max-height: 300px; object-fit: contain; background: #ece9df; border: 1px solid var(--line); border-radius: 11px; margin: 6px 0 16px; }
.software-page .details-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.software-page .details-bottom p { font-size: 11px; }
#detailsCommunity .software-community { margin: 0 0 18px; padding: 0 0 15px; border-top: 0; border-bottom: 1px solid var(--line); }

@media (max-width: 1050px) {
  .software-item article { grid-template-columns: 148px minmax(0, 1fr) 72px; gap: 17px; padding: 18px; }
  .software-item .thumbnail { width: 148px; height: 126px; }
}

/* Featured carousel */
.featured-carousel { display: flex; gap: 12px; margin: 16px 0 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
.featured-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border: 1px solid #c0bdb0; border-radius: 14px; background: linear-gradient(135deg, #fdfbf7 0%, #f8f6f0 100%); min-width: 320px; max-width: 440px; flex-shrink: 0; scroll-snap-align: start; transition: border-color .16s ease, box-shadow .16s ease; }
.featured-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.featured-info { flex: 1; min-width: 0; }
.featured-title { font-size: 18px; font-weight: 750; color: var(--ink); text-decoration: none; letter-spacing: -.6px; display: block; margin-bottom: 6px; }
.featured-title:hover { color: var(--accent); }
.featured-description { font-size: 12px; line-height: 1.6; color: #626358; margin: 0; }
.featured-action { display: flex; justify-content: flex-end; }
.featured-action .button { min-width: 110px; font-size: 12px; min-height: 38px; }

@media (max-width: 760px) {
  .software-page .shell { padding: 0 14px; }
  .catalog-intro { padding: 23px 2px 21px; }
  .catalog-intro h1 { font-size: 28px; letter-spacing: -.95px; }
  .catalog-intro > p:last-child { font-size: 12px; max-width: 330px; }
  .software-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: 12px; }
  .software-toolbar .search { grid-column: 1 / -1; }
  .software-toolbar .omarchy-filter { grid-column: 1 / -1; justify-self: start; min-height: 36px; }
  .software-toolbar select { padding-left: 9px; padding-right: 18px; font-size: 11px; min-height: 39px; }
  .software-list { gap: 11px; }
  .software-item article { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: 'art head' 'body body' 'action action'; gap: 12px; padding: 15px; border-radius: 13px; align-items: start; }
  .software-item .thumbnail { width: 96px; height: 80px; border-radius: 8px; }
  .software-item .software-info { display: contents; }
  .software-item .title-line { grid-area: head; align-self: center; gap: 6px; }
  .software-item .title-line h2 { font-size: 21px; flex-basis: 100%; }
  .software-item .software-body { grid-area: body; min-width: 0; }
  .software-item .description { margin: 0 0 10px; font-size: 12px; }
  .software-item .software-action { justify-self: stretch; padding: 0; }
  .software-item .software-action .button { min-height: 41px; width: 100%; }
  .software-item .credits { gap: 3px 11px; margin-top: 7px; }
  .software-community { gap: 5px; padding-top: 10px; margin-top: 8px; }
  .community-button, .software-opens { min-height: 37px; font-size: 11px; padding: 6px 8px; gap: 5px; }
  .software-footer { display: block; padding: 20px 2px; }
  .software-footer > span { display: block; margin-bottom: 5px; }
  .software-page dialog { padding: 22px 18px; }
  .software-page .detail-fields { grid-template-columns: 75px minmax(0, 1fr); gap: 12px; }
  .featured-carousel { gap: 10px; margin: 14px 0 16px; }
  .featured-card { padding: 15px 16px; min-width: 280px; max-width: 320px; }
  .featured-title { font-size: 16px; }
  .featured-description { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .software-item article, .community-button, .featured-card { transition: none; }
}

/* Date added on every card (18 Oct 2026) and the Most popular (7 days) note. */
.added-date { white-space: nowrap; color: #77797e; }
.added-date[hidden] { display: none; }
.popular-note { margin: 0 0 12px; font-size: 12px; color: #77797e; }
.popular-note[hidden] { display: none; }