#content.spine-mode { display: block; }
.shelf-library { width: 100%; min-width: 0; }
.shelf-selection { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; height: 120px; padding: 14px 0; background: #0e151c; border-block: 1px solid #33434b; }
.shelf-selected-copy { min-width: 0; max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
#shelfSelectedTitle { margin: 0 0 9px; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
#shelfSelectedMeta { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: .75rem; line-height: 1.4; color: #b6c6cf; }
#shelfSelectedMeta > span { overflow-wrap: anywhere; }
#shelfSelectedMeta > span:first-child { color: #9be6b2; }
#shelfOpenGame { display: inline-flex; align-items: center; gap: 8px; height: 42px; font-size: .8rem; padding: 8px 12px; white-space: nowrap; }
#shelfOpenGame .ui-icon { width: 20px; height: 20px; }
.shelf-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 50px; padding-block: 8px; color: #9bafbd; font-size: .75rem; font-variant-numeric: tabular-nums; scroll-margin-top: 120px; }
.shelf-size { display: flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
.shelf-size select { width: 126px; height: 36px; padding: 6px 8px; font-size: .75rem; cursor: pointer; }
.shelf-bottom-paging { display: flex; justify-content: flex-end; padding-block: 12px; }
.shelf-paging { display: flex; align-items: center; gap: 6px; }
.shelf-paging > button { display: grid; place-items: center; width: 34px; height: 34px; padding: 7px; }
.shelf-page-count { min-width: 52px; text-align: center; }
.shelf-arrow { display: block; width: 18px; height: 18px; background: currentColor; mask: url('/assets/icons/lucide/chevron-down.svg') center / contain no-repeat; }
.shelf-arrow-left { transform: rotate(90deg); }
.shelf-arrow-right { transform: rotate(-90deg); }
.shelf-stage { position: relative; width: 100%; min-width: 0; isolation: isolate; background: linear-gradient(180deg, #131b1b55, transparent 85%); }
.shelf-stage > canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; pointer-events: none; }
.shelf-stage:not([data-renderer="ready"]) > canvas { visibility: hidden; }
.shelf-hit-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--shelf-columns),minmax(0,1fr)); grid-auto-rows: var(--shelf-row-height); padding-inline: 12px; }
.shelf-game { position: relative; min-width: 0; width: 100%; height: calc(var(--shelf-row-height) - 20px); padding: 18px 6px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; touch-action: pan-y pinch-zoom; }
.shelf-stage[data-renderer="ready"] .shelf-game[aria-pressed="true"]::after { content: ""; position: absolute; bottom: 0; left: calc(50% - 18px); width: 36px; height: 2px; background: #9de4b2; }
.shelf-game:hover, .shelf-game:active, .shelf-game:focus { background: transparent; box-shadow: none; transform: none; }
.shelf-game:focus-visible { outline: 2px solid #9de4b2; outline-offset: -4px; }
.shelf-fallback-cover { width: 100%; height: calc(var(--shelf-row-height) - 80px); object-fit: contain; display: block; }
.shelf-fallback-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .72rem; line-height: 1.3; margin-top: 8px; overflow-wrap: anywhere; }
.shelf-stage[data-renderer="ready"] .shelf-fallback-cover, .shelf-stage[data-renderer="ready"] .shelf-fallback-title { visibility: hidden; }
.shelf-stage:not([data-renderer="ready"]) .shelf-game[aria-pressed="true"] { box-shadow: inset 0 -2px #9de4b2; }
@media (max-width: 700px) {
  .shelf-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; scroll-margin-top: 156px; }
  .shelf-size { grid-row: 2; grid-column: 1 / -1; margin-left: 0; }
  .shelf-toolbar > .shelf-paging { grid-column: 2; grid-row: 1; }
  .shelf-size select, .shelf-paging > button { height: 40px; }
  .shelf-selection { height: 156px; gap: 9px; padding-block: 10px; grid-template-columns: minmax(0,1fr) 42px; }
  #shelfSelectedTitle { font-size: .9rem; }
  #shelfSelectedMeta { gap: 4px 10px; font-size: .69rem; }
  #shelfOpenGame { width: 42px; padding: 10px; }
  #shelfOpenGame > span { display: none; }
}