.mode-label{display:none!important}
.library-pager{gap:18px!important}
/* All three library destinations share one 48px tap target and 30px icon slot.
   The heart is intentionally subtler than the community mark; no active zoom. */
.library-pager .pager-button{width:48px;height:48px;min-width:48px;min-height:48px;flex:0 0 48px}
.library-pager .pager-button.active{transform:none}
.library-pager .pager-dot-mark{width:19px;height:19px}
.library-pager .community-mark{width:30px;height:30px}
.library-pager .pager-heart{width:30px;height:30px;display:grid;place-items:center;font-size:25px;line-height:1}

.community-mark{width:30px;height:30px;display:grid;place-items:center;position:relative}
.community-mark::before,.community-mark::after,.community-mark span{content:"";position:absolute;width:7px;height:7px;border:1.4px solid #fff;border-radius:50%}
.community-mark::before{left:3px;top:11px}.community-mark::after{right:3px;top:11px}.community-mark span{left:11px;top:3px}
.community-mark i{position:absolute;width:22px;height:11px;border-bottom:1px solid rgba(255,255,255,.75);border-radius:50%;bottom:2px;left:4px}

/* Library interaction contract: vertical lists scroll, horizontal pager remains available. */
#app{touch-action:pan-y!important}
#libraryScreen,#librarySwipeArea{touch-action:pan-y!important}
.panel-wrap{overflow:hidden;min-height:0;touch-action:pan-y!important}
.pattern-panel{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y!important;
  min-height:0;
  padding-bottom:calc(var(--safe-bottom) + 150px)!important;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.pattern-panel::-webkit-scrollbar{display:none}
.pattern-tile{-webkit-touch-callout:none!important;touch-action:pan-y!important}
#gameScreen,#patternCanvas{touch-action:none!important}

.community-count{position:absolute;top:-5px;left:50%;transform:translateX(-50%);min-width:30px;padding:2px 6px;border-radius:10px;background:rgba(0,0,0,.72);font-size:9px;line-height:1.2;letter-spacing:.03em;color:rgba(255,255,255,.75);white-space:nowrap;pointer-events:none}
.recommendation-mark{position:absolute;right:-2px;top:-2px;font-size:10px;line-height:1;color:#fff;opacity:0;filter:drop-shadow(0 0 5px #fff);pointer-events:none}
.pattern-tile.recommended .recommendation-mark{opacity:1}
.pattern-tile.recommended::after{border-color:rgba(255,255,255,.58)!important;box-shadow:0 0 13px rgba(255,255,255,.16) inset,0 0 10px rgba(255,255,255,.08)}
#favoriteButton.saved{background:rgba(255,255,255,.10)}
#communityPanel .empty-favorites .big-heart{font-size:32px}
@media(max-width:360px){.library-pager{gap:10px!important}.community-count{font-size:8px}}

/* Keep all library thumbnails on one vertical baseline. The community
   mode bar is absolutely positioned above row 1, so reserve 16px more air
   without moving its controls or changing tile shapes / row spacing. */
@media (max-width:767px) {
  #libraryScreen #allPatternsPanel,
  #libraryScreen #favoritesPanel,
  #libraryScreen #communityPanel {
    padding-top:40px;
    row-gap:28px;
  }
}