/* Compact gallery with equal-height cards and independently scrolling reviews. */
.library-banner {position:relative; height:clamp(280px,50vw,900px); overflow:hidden; background:#e878ad;}
.library-banner img {width:100%; height:100%; object-fit:cover; object-position:50% 30%;}
.library-banner::after {content:""; position:absolute; inset:auto 0 0; height:clamp(100px,14vw,240px); background:linear-gradient(to bottom,transparent,var(--library-bg)); pointer-events:none;}
.library-page {--library-bg:#fafaf9; background:var(--library-bg); --accent:#2f695c; --text:#232c28; --muted:#717b75; --line:#e5e8e3;}
@media(max-width:600px) {.library-banner img {object-position:72% 30%;}}
.library-page #main.container,.library-page .site-footer.container {width:min(1520px,calc(100% - 64px));}
.library-page .header-inner {box-shadow:none; border-color:var(--line); border-radius:12px;}
.collection-heading {display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:36px 0 25px;}
.collection-kicker {margin:0 0 8px; font-size:13px; color:var(--muted); letter-spacing:.12em;}
.collection-heading h1 {display:flex; align-items:center; gap:14px; margin:0; font-size:34px; line-height:1.25; font-weight:700; letter-spacing:-.03em;}
.collection-total {font-size:14px; font-weight:500; padding:4px 10px; color:#53665b; background:#e9eee8; border-radius:7px; letter-spacing:0;}
.collection-stats {display:flex; gap:28px; padding-bottom:3px; color:var(--muted); font-size:14px;}
.collection-stats b {font-size:20px; color:var(--text); margin-right:5px; font-variant-numeric:tabular-nums; font-weight:600;}
.library-tabs {display:flex; gap:26px; border-bottom:1px solid var(--line); margin:0 0 18px; overflow:auto;}
.library-tabs a {padding:12px 4px 13px; font-size:16px; white-space:nowrap; border-bottom:3px solid transparent; color:var(--muted);}
.library-tabs a[aria-current=page] {color:var(--accent); border-color:var(--accent); font-weight:700;}
.collection-controls {display:flex; flex-wrap:wrap; gap:14px 24px; align-items:flex-end; padding:14px 16px; background:#fff; border:1px solid var(--line); border-radius:10px;}
.collection-filters,.collection-display {display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px;}
.collection-display {margin-left:auto;}
.collection-controls label {display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted);}
.collection-controls select {font:14px var(--font); color:var(--text); background:#fafbf9; padding:8px 28px 8px 10px; border:1px solid #dce2dc; border-radius:6px; min-height:38px; max-width:180px; cursor:pointer;}
.collection-controls select:focus-visible {outline:2px solid #568d78; outline-offset:2px;}
.collection-apply {padding:9px 15px; min-height:38px; font-size:14px; border:0; border-radius:6px; color:#fff; background:var(--accent); cursor:pointer;}
.collection-reset {font-size:13px; color:var(--muted); padding:9px 0;}
.library-gallery {display:grid; gap:16px; align-items:start;}
.library-gallery.columns-3 {grid-template-columns:repeat(3,minmax(0,1fr));}
.library-gallery.columns-4 {grid-template-columns:repeat(4,minmax(0,1fr));}
.library-gallery.columns-5 {grid-template-columns:repeat(5,minmax(0,1fr));}
.library-gallery.columns-6 {grid-template-columns:repeat(6,minmax(0,1fr));}
.library-gallery .game-card {height:520px; display:flex; flex-direction:column; border:1px solid #e1e5df; border-radius:11px; background:#fff; box-shadow:0 2px 5px #29382d04; transition:box-shadow .18s,border-color .18s;}
.library-gallery .game-card:hover {border-color:#b7c9b9; box-shadow:0 6px 20px #29382d0a;}
.game-card .cover-link {position:relative; display:block; flex-shrink:0; height:auto; aspect-ratio:16/9; overflow:hidden; border-radius:0;}
.game-card .cover-link>img,.game-card .cover-placeholder {width:100%; height:100%; object-fit:cover; margin:0; transition:transform .25s;}
.game-card .cover-link:hover>img {transform:scale(1.025);}
.cover-rating {position:absolute; right:9px; bottom:9px; display:flex; align-items:center; gap:5px; padding:4px 9px; border-radius:7px; background:#fff; color:#233c2b; font-size:16px; font-weight:750; box-shadow:0 1px 8px #14211722; font-variant-numeric:tabular-nums;}
.cover-rating>span {color:#a67b19; font-size:13px;}
.game-card-body {padding:14px 15px 12px; display:flex; flex-direction:column; flex:1; min-height:0; gap:10px;}
.game-card-topline {display:flex; justify-content:space-between; gap:8px; font-size:11px; line-height:1.3; color:var(--muted); min-width:0;}
.game-card-topline>span {min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.game-card-topline time {white-space:nowrap; font-variant-numeric:tabular-nums;}
.library-gallery .game-card h2 {font-size:18px; line-height:1.45; min-height:53px; max-height:53px; margin:0; font-weight:700; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; flex-shrink:0; letter-spacing:-.015em;}
.game-badges {display:flex; gap:6px; flex-wrap:wrap; flex-shrink:0; align-content:flex-start; max-height:66px; overflow:auto; scrollbar-width:thin;}
.game-badges>a {display:inline-flex; align-items:center; gap:3px; padding:4px 9px; border-radius:5px; font-size:13px; line-height:1.4; font-weight:700; white-space:nowrap; text-decoration:none;}
.game-state {color:#586a60; background:#edf1ed;}
.game-state.state-completed {color:#fff; background:#267b50;}
.game-state.state-in_progress {color:#1c5f94; background:#e1f0fc;}
.game-state.state-paused {color:#765647; background:#f1e9e1;}
.game-badges .game-achievement {color:#7a4a04; background:#ffe5a0; border:1px solid #edc269; padding:3px 8px;}
.game-badges>a:hover {filter:brightness(.94);}
.game-progress {font-size:12px; line-height:1.5; color:var(--muted); margin:0; flex-shrink:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.game-review {flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:#bdcbbf transparent; padding-right:5px;}
.game-review p {margin:0; white-space:pre-wrap; font-size:14px; line-height:1.8; color:#48564d; overflow-wrap:anywhere;}
.game-review p.muted {color:#96a097; font-size:14px;}
.game-review:focus-visible,.game-badges:focus-visible {outline:2px solid #568d78; outline-offset:2px; border-radius:4px;}
.game-card-footer {display:flex; align-items:center; gap:8px; min-height:25px; padding-top:9px; border-top:1px solid #f0f2ed; flex-shrink:0;}
.game-topics {display:flex; gap:5px; min-width:0; flex:1; overflow:auto; scrollbar-width:thin;}
.game-topics a {white-space:nowrap; font-size:11px; color:var(--muted);}
.game-topics a+a:before {content:'·'; margin-right:5px;}
.game-detail-link {display:flex; gap:7px; align-items:center; white-space:nowrap; color:var(--accent); font-size:12px; font-weight:500; margin-left:auto;}
.library-page .pagination {font-size:15px; padding-block:24px;}
@media(min-width:1600px) {.library-gallery .game-card {height:550px;}}
@media(max-width:1200px) {.library-gallery.columns-5,.library-gallery.columns-6 {grid-template-columns:repeat(4,minmax(0,1fr));} .collection-display {margin-left:0;}}
@media(max-width:980px) {.library-gallery.columns-4,.library-gallery.columns-5,.library-gallery.columns-6 {grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:760px) {.library-page #main.container {width:calc(100% - 32px);} .library-gallery.columns-3,.library-gallery.columns-4,.library-gallery.columns-5,.library-gallery.columns-6 {grid-template-columns:repeat(2,minmax(0,1fr));} .collection-stats {gap:15px; font-size:12px;} .collection-stats b {font-size:16px;} .collection-heading h1 {font-size:28px;} .collection-controls {padding:12px;} .collection-controls label {flex:1;} .collection-filters,.collection-display {width:100%; gap:8px;} .collection-controls select {max-width:100%; width:100%;} .collection-heading {padding-top:28px;} .library-tabs {gap:20px;}}
@media(max-width:480px) {.library-gallery.columns-3,.library-gallery.columns-4,.library-gallery.columns-5,.library-gallery.columns-6 {grid-template-columns:minmax(0,1fr);} .collection-stats {display:none;} .collection-heading h1 {font-size:30px;} .library-tabs {gap:18px;} .library-tabs a {font-size:15px;} .library-gallery .game-card {height:580px;} .game-card-body {padding:16px 18px 14px;} .library-gallery .game-card h2 {font-size:19px; min-height:28px; max-height:56px;} .game-review p {font-size:14px;} .collection-display {flex-wrap:wrap;} .collection-display label {flex-basis:28%;} .game-badges>a {font-size:14px;}}
@media(prefers-reduced-motion:reduce) {.game-card,.game-card .cover-link>img {transition:none;}}
@media(max-width:760px) {.library-page #main.container,.library-page .site-footer.container {width:calc(100% - 32px);}}
@media(max-width:480px) {
  .collection-controls select {padding-inline:8px 18px;}
  .collection-display label:first-child {flex-basis:100%;}
  .collection-display label:not(:first-child) {flex:1; min-width:0;}
}
.library-year-groups {display:flex; flex-direction:column; gap:18px;}
.library-year-group {min-width:0;}
.library-year-group>summary {display:flex; align-items:center; gap:9px; width:max-content; max-width:100%; margin:2px 0 14px; cursor:pointer; list-style:none; user-select:none;}
.library-year-group>summary::-webkit-details-marker {display:none;}
.year-group-caret {width:8px; height:8px; flex:0 0 8px; border-right:2px solid #66716a; border-bottom:2px solid #66716a; transform:rotate(-45deg); transition:transform .15s; margin-right:2px;}
.library-year-group[open] .year-group-caret {transform:rotate(45deg) translate(-2px,-2px);}
.year-group-label {display:inline-flex; align-items:center; min-height:29px; padding:3px 11px; border-radius:6px; color:#fff; background:#7051a3; font-size:15px; line-height:1.4; font-weight:700; font-variant-numeric:tabular-nums;}
.year-group-count {color:var(--muted); font-size:13px;}
.game-rating {display:flex; align-items:center; gap:9px; flex-shrink:0; min-height:17px;}
.game-rating-value {min-width:26px; font-size:12px; line-height:1; color:var(--text); font-variant-numeric:tabular-nums;}
.game-rating-track {position:relative; flex:1; height:4px; overflow:hidden; border-radius:99px; background:#e6e9e6;}
.game-rating-track>span {display:block; height:100%; border-radius:inherit; background:#9ba39d;}
.game-rating-orange .game-rating-track>span {background:#ed8a31;}
.game-rating-purple .game-rating-track>span {background:#8b5cc7;}
.game-rating-blue .game-rating-track>span {background:#438fcf;}
.game-rating-green .game-rating-track>span {background:#3a9d69;}
.game-rating-neutral .game-rating-track>span {background:#9ba39d;}
@media(max-width:760px) {.collection-filters label {flex:1 1 calc(50% - 8px); min-width:0;}}
.filter-toggle-caret {width:8px; height:8px; border-right:2px solid #66716a; border-bottom:2px solid #66716a; transform:rotate(-45deg); transition:transform .15s;}
.library-toolbar {display:grid; grid-template-columns:minmax(0,1fr) 34px; column-gap:8px; align-items:center; margin-bottom:18px;}
.library-toolbar .library-tabs {grid-row:1; grid-column:1; min-width:0; margin:0;}
.library-toolbar .collection-filter-toggle {grid-row:1; grid-column:2; display:flex; align-items:center; justify-content:center; width:34px; height:38px; padding:0; border:0; border-radius:6px; background:transparent; cursor:pointer;}
.library-toolbar .collection-filter-toggle:hover {background:#edf1ed;}
.library-toolbar .collection-filter-toggle[aria-expanded="true"] .filter-toggle-caret {transform:rotate(45deg);}
.library-toolbar .collection-filter-toggle[aria-expanded="false"] .filter-toggle-caret {transform:rotate(135deg);}
.library-toolbar .collection-controls {grid-row:2; grid-column:1/-1; margin:10px 0 0;}
.library-toolbar .collection-controls[hidden] {display:none;}
/* Apply the saved disclosure state before deferred scripts initialize controls. */
html[data-library-filters="collapsed"] .library-toolbar .collection-controls {display:none;}
html[data-library-filters="collapsed"] .library-toolbar .collection-filter-toggle .filter-toggle-caret {transform:rotate(135deg);}
@media(max-width:760px) {.library-toolbar {grid-template-columns:minmax(0,1fr) 32px; column-gap:5px;}}