/* Advanced filtering, card badge preferences and mobile detail gestures. */

.trait-filter-section {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.065);
}
.trait-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.trait-filter-clear {
  border: 0;
  padding: 2px 0;
  color: var(--pink);
  background: transparent;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.trait-filter-groups { display: grid; gap: 10px; }
.trait-filter-group { min-width: 0; }
.trait-filter-group__label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}
.trait-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.trait-filter-chip { min-height: 29px; padding: 4px 9px; }
.trait-filter-chip.is-empty { opacity: .42; }
.trait-filter-chip.is-active { opacity: 1; }

.badge--content-type {
  border-color: rgba(245,158,11,.42);
  color: #ffe0a8;
  background: rgba(245,158,11,.11);
}
.badge--type-remake,
.badge--type-remaster { border-color: rgba(56,189,248,.42); color:#bae6fd; background:rgba(56,189,248,.10); }
.badge--type-dlc,
.badge--type-rozsireni { border-color: rgba(192,132,252,.45); color:#e9d5ff; background:rgba(192,132,252,.11); }
.badge--type-demo { border-color: rgba(52,211,153,.42); color:#bbf7d0; background:rgba(52,211,153,.10); }
.badge--precision { border-color:rgba(251,191,36,.38); color:#fde68a; background:rgba(120,53,15,.42); }
.detail-flag--content-type { border-color: rgba(245,158,11,.4); color:#ffe0a8; background:rgba(245,158,11,.09); }

.hide-badge-release .card-badges > .badge--soon,
.hide-badge-release .card-badges > .badge--released { display:none !important; }
.hide-badge-scale .badge--scale { display:none !important; }
.hide-badge-early .badge--early,
.hide-badge-early .detail-flag--early { display:none !important; }
.hide-badge-services .service-badges { display:none !important; }
.hide-card-rating .game-card .rating { display:none !important; }
.hide-badge-type .badge--content-type,
.hide-badge-type .detail-flag--content-type { display:none !important; }

.settings-popover {
  max-height: min(78dvh, 650px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.settings-group__label--spaced { margin-top: 9px; }
.advanced-setting-list { display:grid; gap:2px; }
.advanced-setting {
  min-height: 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--text);
  font-size:11px;
  cursor:pointer;
}
.advanced-setting input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.advanced-setting i {
  position:relative;
  width:34px;
  height:20px;
  flex:0 0 34px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  transition:.16s ease;
}
.advanced-setting i::after {
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--muted);
  transition:.16s ease;
}
.advanced-setting input:checked + i {
  border-color:rgba(255,71,155,.5);
  background:rgba(255,71,155,.2);
}
.advanced-setting input:checked + i::after {
  transform:translateX(14px);
  background:var(--pink);
}
.advanced-setting input:focus-visible + i { outline:2px solid var(--purple); outline-offset:2px; }

@media (max-width:760px) {
  .trait-filter-section { margin-top:10px; padding-top:9px; }
  .trait-filter-groups { gap:8px; }
  .trait-filter-list { gap:5px; }
  .trait-filter-chip { min-height:27px; padding:3px 8px; font-size:10px; }
  .filter-panel .trait-filter-section { padding-bottom: 4px; }
  .settings-popover { max-height: calc(100dvh - max(78px, env(safe-area-inset-top))); }
}

@media (max-width:760px) and (max-height:600px) {
  .trait-filter-groups { grid-template-columns: repeat(3,minmax(0,1fr)); gap:8px; }
  .trait-filter-list { display:flex; max-height:78px; overflow-y:auto; align-content:flex-start; }
  .trait-filter-chip { max-width:100%; }
}

html[data-theme="light"] .trait-filter-section { border-color: rgba(62,35,72,.09); }
html[data-theme="light"] .badge--content-type,
html[data-theme="light"] .detail-flag--content-type { color:#8a5300; }
html[data-theme="light"] .advanced-setting i { background:rgba(70,45,78,.08); }

.release-changes {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  scroll-margin-top: 150px;
}
.release-changes__head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:13px; }
.release-changes__head h2 { margin:0; font-size:19px; }
.release-changes__filters { display:flex; gap:5px; overflow-x:auto; }
.release-changes__list { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; }
.release-change { min-width:0; display:grid; grid-template-columns:52px 1fr; gap:10px; padding:9px; border:1px solid var(--border); border-radius:12px; color:var(--text); background:rgba(255,255,255,.025); text-decoration:none; }
.release-change:hover { border-color:var(--border-strong); background:var(--pink-soft); }
.release-change img,.release-change__cover { width:52px; height:68px; display:block; object-fit:cover; border-radius:8px; background:linear-gradient(145deg,#271431,#130b1b); }
.release-change__body { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.release-change__body strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.release-change__body > span:not(.release-change__badge) { color:var(--muted); font-size:10px; line-height:1.4; }
.release-change__body time { margin-top:auto; color:var(--muted); font-size:9px; }
.release-change__badge { padding:2px 6px; border:1px solid rgba(255,71,155,.32); border-radius:99px; color:var(--pink); background:rgba(255,71,155,.08); font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.release-change--date .release-change__badge { border-color:rgba(245,158,11,.35); color:#fbbf24; background:rgba(245,158,11,.08); }
.release-changes__empty { grid-column:1/-1; display:flex; flex-direction:column; gap:3px; padding:24px; border:1px dashed var(--border); border-radius:12px; text-align:center; color:var(--muted); }
.release-changes__empty strong { color:var(--text); }
@media (max-width:620px) {
  .release-changes { padding:12px; }
  .release-changes__head { align-items:stretch; flex-direction:column; }
  .release-changes__list { grid-template-columns:1fr; }
}