/* Library-specific usability refinements; preserve the shared game-case theme. */
html body.lib-page .lib-item .gg-tagline .gg-title { -webkit-line-clamp: 2; line-clamp: 2; min-height: 0; line-height: 1.25; }
/* Keep the collection heading and captions compact without shrinking touch targets. */
html body.lib-page .gg-phead-row { flex-direction: row; align-items: flex-end; gap: 16px; padding-block: 20px 14px; }
html body.lib-page .gg-phead h1 { font-size: clamp(36px, 4vw, 46px) !important; margin-top: 6px; }
html body.lib-page .gg-phead p { margin-top: 6px; font-size: 14px; line-height: 1.45; }
html body.lib-page .gg-controls-line { padding-block: 8px; row-gap: 6px; }
.lib-page .lib-shelf { padding-top: 18px; }
.lib-page .lib-shelf-head { margin-bottom: 12px; }
.lib-page .lib-wall { row-gap: 24px; }
.lib-page .lib-item .gg-yr { display: none; }
/* Personal grades have at most one decimal; do not reserve the wider
   four-character space used by aggregate scores on the Games page. */
html body.lib-page .lib-item .gg-rbox .n { min-inline-size: 3ch; }
.lib-page .lib-ledger dt { white-space: nowrap; letter-spacing: 0; }
.lib-page .lib-ledger dt[data-price-label] { text-transform: none; }
.lib-arrange { color: var(--gg-accent-light); text-underline-offset: 3px; }
.lib-details-btn, .lr-details-toggle { display: none; }
.lib-notice { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 16px 0; border: 1px solid var(--gg-warning); border-radius: 6px; color: var(--gg-room-tx-2); }
.lib-notice[hidden], .lib-empty[hidden], .lib-page .gg-applied[hidden] { display: none !important; }
.lib-edit-error { display: block; color: var(--gg-danger); font: 500 12px/1.4 var(--gg-font-case); white-space: normal; margin-top: 6px; }
.lib-edit-help { display: block; color: var(--gg-room-tx-2); font: 500 11px/1.4 var(--gg-font-case); white-space: normal; }
.lib-edit::after { content: '✎'; color: var(--gg-room-tx-3); font-size: 11px; margin-left: 4px; }
.lib-edit:focus-visible, .lib-details-btn:focus-visible { outline: 2px solid var(--gg-accent-light); outline-offset: 3px; }
.lib-page .lib-facts { flex-wrap: wrap; }
.lib-price-source { display: block; margin-top: 3px; color: var(--gg-room-tx-3); font: 500 10px var(--gg-font-case); }
@media (pointer: coarse) {
  .lib-page .lib-edit { min-height: 44px; align-items: center; }
  .lib-page .lib-edit-input { min-height: 44px; font-size: 16px; }
}
@media (max-width: 768px) {
  html body.lib-page .gg-phead-row { padding-block: 14px; gap: 12px; }
  html body.lib-page .gg-phead .gg-ey { font-size: 10px; letter-spacing: .03em; }
  html body.lib-page .gg-phead h1 { font-size: 36px !important; }
  .lib-page .lib-views { align-self: flex-end; }
  .lib-page .gg-phead p { display: none; }
  .lib-page .lib-price-source { display: none; }
  .lib-page .lib-shelves .lib-wall { grid-auto-columns: 56%; gap: 20px; }
  .lib-page .lib-facts { gap: 6px; }
  .lib-page .lib-item .lib-facts > * { max-width: 100%; }
  .lib-page .lib-views button span { display: inline; }
  .lib-page .lib-views button { min-height: 44px; padding: 0 9px; gap: 6px; font-size: 12px; }
  .lib-page .lib-item .lib-ledger > div { padding: 0 3px; }
  .lib-page .lib-ledger dt { font-size: 10px; letter-spacing: 0; }
  .lib-page .lib-edit { max-width: calc(100% + 8px); }
  .lib-page .lib-edit::after { display: none; }
  .lib-page .lib-icon-btn, .lib-page .lib-actions .lib-btn { min-height: 44px; }
  .lib-page .lib-icon-btn { width: 44px; height: 44px; }
  .lib-page .lib-row { grid-template-columns: auto 52px minmax(0, 1fr) auto; grid-template-areas: "rank case game grade" "toggle toggle toggle toggle" "actions actions actions actions"; row-gap: 8px; padding: 16px 0; }
  .lib-page .lib-row[data-expanded="true"] { grid-template-areas: "rank case game grade" "toggle toggle toggle toggle" "hours hours hours hours" "price price price price" "pv pv pv pv" "played played played played" "actions actions actions actions"; }
  .lib-page .lr-game .lib-facts { margin-top: 8px; }
  .lib-page .lr-actions { grid-area: actions; justify-self: stretch; }
  .lib-page .lr-actions .lib-actions { gap: 8px; }
  .lib-page .lr-actions .lib-btn, .lib-page .lr-actions .lib-icon-btn:not(.is-spacer) { display: inline-flex; }
  .lib-page .lr-actions .backlog-action { flex: 1; }
  .lib-page .lr-rank-static { min-width: 24px; font-size: 17px; }
  .lib-page .lr-details-toggle { display: block; grid-area: toggle; }
  .lib-page .lib-details-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: 0 8px; border: 0; border-radius: 4px; color: var(--gg-room-tx-2); background: var(--gg-room-2); font: 600 12px var(--gg-font-case); }
  .lib-details-btn[aria-expanded="true"] span { transform: rotate(180deg); }
  .lib-page .lr-hours { grid-area: hours; }
  .lib-page .lr-price { grid-area: price; }
  .lib-page .lr-pv { grid-area: pv; }
  .lib-page .lr-played { grid-area: played; }
  .lib-page .lib-row[data-expanded="true"] .lr-num:not(.lr-grade) { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; min-height: 44px; width: auto; padding: 0 8px; background: var(--gg-room-2); }
  .lib-row[data-expanded="true"] .lr-num:not(.lr-grade)::before { content: attr(data-label); margin-right: auto; color: var(--gg-room-tx-3); font-weight: 500; }
  .lib-page .lr-num .lib-edit-input { width: 100px; margin-left: auto; }
  .lib-page .lib-row .lib-edit-error, .lib-page .lib-row .lib-edit-help { flex-basis: 100%; text-align: right; }
  .lib-page .lr-rankbox .rank-input { width: 30px; font-size: 17px; }
  .lib-page .lr-steps .rank-move { width: 30px; height: 30px; }
}


/* Compact case records: cover navigation and score stickers remain unchanged. */
.lib-page .lib-item { gap: 0; }
.lib-page .lib-title-line { display: grid; grid-template-columns: minmax(0,1fr) 36px; align-items:center; margin-top: 6px; }
.lib-page .lib-title-line .gg-title { margin:0; padding-top:0; }
.lib-more, .lib-hours { border:0; background:none; color:var(--gg-room-tx-2); cursor:pointer; }
.lib-more { width:36px; min-height:44px; font-size:24px; padding:0; }
.lib-recency { display:flex; align-items:center; flex-wrap:wrap; gap:4px; color:var(--gg-room-tx-3); font:500 12px var(--gg-font-case); min-height:44px; }
.lib-hours { min-height:44px; min-width:44px; font:inherit; padding:0 2px; }
.lib-quick { display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:44px; border-top:1px solid var(--gg-room-line); }
html body.lib-page .lib-quick .play-chip { border:0; background:none; padding:0 2px; min-height:44px; font-size:12px; gap:5px; }
.lib-quick .play-chip-auto { display:none; }
.lib-review-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; color:var(--gg-accent-light); font:700 12px var(--gg-font-case); white-space:nowrap; text-decoration:none; }
.lib-reviewed-label { font:500 12px var(--gg-font-case); color:var(--gg-room-tx-3); }
.lib-review-filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:12px 0; }
.lib-review-filters a { padding:8px 12px; min-height:44px; display:inline-flex; align-items:center; border:1px solid var(--gg-room-line); border-radius:5px; color:var(--gg-room-tx-2); text-decoration:none; font:600 12px var(--gg-font-case); }
.lib-review-filters a[aria-current=true] { color:var(--gg-accent-light); background:var(--gg-accent-soft); border-color:var(--gg-accent); }
.gg-pick-description { display:block; font-size:12px; line-height:1.35; color:var(--gg-room-tx-3,#aaa); white-space:normal; margin-top:4px; }
.gg-pick-opt:has(.gg-pick-description) { min-height:60px; }
body.lib-sheet-open { position:fixed; top:var(--lib-sheet-scroll); left:0; right:0; overflow:hidden; }
.lib-sheet-overlay { position:fixed; inset:0; z-index:3500; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.64); padding:24px; }
.lib-sheet-overlay[hidden] { display:none; }
.lib-detail-sheet { position:relative; width:min(480px,100%); max-height:calc(100dvh - 48px); overflow-y:auto; overscroll-behavior:contain; background:var(--gg-room-2); border:1px solid var(--gg-room-line-2); border-radius:14px; color:var(--gg-room-tx); box-shadow:0 20px 70px #0008; }
.lib-sheet-art { display:block; width:100%; aspect-ratio:460/160; object-fit:cover; background:var(--gg-room); }
.lib-sheet-art[hidden] { display:none; }
.lib-sheet-close { position:absolute; top:8px; right:8px; width:44px; height:44px; border:1px solid #ffffff44; border-radius:50%; background:#141019ed; color:#fff; font-size:26px; cursor:pointer; z-index:1; }
.lib-sheet-grab { display:none; }
.lib-sheet-content { padding:20px; }
.lib-sheet-content h2 { font:800 23px/1.2 var(--gg-font-case); padding-right:28px; margin:0 0 16px; color:#fff; }
.lib-sheet-review { display:flex; justify-content:center; align-items:center; min-height:44px; border-radius:6px; background:var(--gg-accent-light); color:var(--gg-room); text-decoration:none; font:700 14px var(--gg-font-case); margin-bottom:18px; }
.lib-sheet-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lib-sheet-fields label { display:grid; gap:7px; font:600 12px var(--gg-font-case); color:var(--gg-room-tx-2); }
.lib-sheet-fields input { width:100%; min-width:0; min-height:44px; padding:9px; border:1px solid var(--gg-room-line-2); border-radius:5px; background:var(--gg-room); color:#fff; font:500 16px var(--gg-font-case); }
.lib-sheet-help { font:400 12px/1.4 var(--gg-font-case); color:var(--gg-room-tx-3); margin:8px 0; }
.lib-sheet-pv, .lib-sheet-date { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; font:500 13px var(--gg-font-case); }
.lib-sheet-save, .lib-sheet-discard button { min-height:44px; padding:8px 14px; border:1px solid var(--gg-room-line-2); border-radius:5px; background:var(--gg-room-3); color:#fff; cursor:pointer; font:600 13px var(--gg-font-case); }
.lib-sheet-save { width:100%; }
.lib-sheet-error { color:var(--gg-danger); font:500 13px/1.4 var(--gg-font-case); }
.lib-sheet-facts { display:flex; gap:12px; flex-wrap:wrap; padding-top:18px; }
.lib-sheet-links { display:flex; flex-wrap:wrap; gap:12px; border-top:1px solid var(--gg-room-line); padding-top:12px; }
.lib-sheet-links a, .lib-remove { display:inline-flex; align-items:center; min-height:44px; padding:0; color:var(--gg-room-tx-2); font:500 12px var(--gg-font-case); background:none; border:0; cursor:pointer; }
.lib-sheet-links form { margin:0; }
.lib-sheet-links .lib-remove { color:var(--gg-danger); }
.lib-sheet-discard { border-top:1px solid var(--gg-room-line); margin-top:14px; }
.lib-page .gg-pick, .lib-page .gg-pick--sheet { z-index:3700; }
.lib-page .gg-pick-scrim { z-index:3699; }
.lib-more:focus-visible,.lib-hours:focus-visible,.lib-review-link:focus-visible { outline:2px solid var(--gg-accent-light); outline-offset:2px; }
@media(max-width:768px) {
 .lib-sheet-overlay { padding:0; align-items:flex-end; }
 .lib-detail-sheet { width:100%; max-height:90dvh; border-radius:20px 20px 0 0; padding-bottom:env(safe-area-inset-bottom); animation:lib-sheet-enter 180ms ease-out; }
 .lib-sheet-grab { display:flex; justify-content:center; align-items:center; height:24px; touch-action:none; }
 .lib-sheet-grab::before { content:''; width:36px; height:4px; border-radius:3px; background:var(--gg-room-tx-3); }
 .lib-sheet-close { top:30px; }
 .lib-page .lib-row { grid-template-areas:'rank case game grade' 'toggle toggle actions actions'; }
 .lib-page .lr-details-toggle { align-self:center; }
 .lib-page .lib-details-btn { background:none; padding:0 6px; }
 .lib-page .lr-actions .lib-icon-btn { display:none!important; }
 .lib-page .lr-steps .rank-move { width:44px; height:44px; }
 .lib-page .lib-shelves .lib-wall { scroll-snap-type:x proximity; }
 .lib-page .lib-quick .play-chip { font-size:11px; }
 .lib-review-link { font-size:11px; }
}
@keyframes lib-sheet-enter { from { transform:translateY(24px); } to { transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .lib-detail-sheet { animation:none; } }

/* Quiet room lighting and shelf rules: static paint, no extra card layers. */
html body.lib-page {
  background-image: radial-gradient(ellipse 80% 440px at 45% 100px, rgba(113,90,184,.075), transparent 85%);
  background-repeat: no-repeat;
}
.lib-page .lib-shelf { padding-bottom: 24px; }
.lib-page .lib-shelf + .lib-shelf { border-top: 0; }
.lib-page .lib-shelf-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gg-room-line);
  margin-bottom: 20px;
}
.lib-page .lib-shelf-count { font-variant-numeric: tabular-nums; }
.lib-page .lib-shelf-more { padding-block: 4px; }
.lib-page .lib-shelves .lib-wall {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gg-room-line);
  background: linear-gradient(0deg, rgba(113,90,184,.025), transparent 72px);
}
@media (max-width: 768px) {
  .lib-page .lib-shelf { padding-bottom: 12px; }
  .lib-page .lib-shelf-head { padding-bottom: 10px; margin-bottom: 16px; }
  .lib-page .lib-shelf-more { min-height: 44px; box-sizing: border-box; }
}

@media (pointer: fine) {
  .lib-page :is(.lib-more, .lib-recency, .lib-hours, .lib-quick, .lib-review-link) { min-height: 30px; }
  html body.lib-page .lib-quick .play-chip { min-height: 30px; }
  .lib-page .lib-review-filters { padding-block: 8px; }
  .lib-page .lib-review-filters a { min-height: 32px; padding: 4px 12px; }
  html body.lib-page .gg-facet { min-height: 36px; }
}
@media (max-width: 359px) {
  html body.lib-page .gg-phead-row { flex-wrap: wrap; gap: 8px; }
  .lib-page .gg-phead-row .gg-phead { flex-basis: 100%; }
  .lib-page .lib-views { align-self: flex-start; }
}

/* The viewer's background game belongs to the page head, not the shelves.
   It scrolls away with the head instead of staying fixed behind every shelf,
   fades out before the controls bar (so the bar's opaque band never cuts
   through it), and is drawn fainter than the shared rule, so white text
   over light art stays readable: the description reads 5.3:1 over a pale
   sky, where the shared rule gave 4.4:1. The tint over it is remake.css's
   shared one. The class is doubled to outrank remake.css, which header.html
   links again inside the body. Phones already hide it (style.css). */
html body.lib-page.lib-page .games-background {
  position: absolute !important; height: 300px !important; min-height: 0 !important;
  opacity: .42 !important; filter: saturate(.75) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.75) 35%, rgba(0,0,0,.25) 70%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.75) 35%, rgba(0,0,0,.25) 70%, transparent 100%);
}

