#lobby-theme{font-size:26px}
#collections-screen{z-index:36;padding:18px 16px 16px;display:flex;flex-direction:column;gap:12px;background:#a6def9 url('./assets/menu-background.webp') center/cover no-repeat;overflow:hidden;color:#33426f}
.album-header{position:relative;flex:none;min-height:62px;display:flex;align-items:center;justify-content:center;border-radius:22px;background:linear-gradient(#bd7eff,#823be2 60%,#682bc1);border:3px solid #743bc8;box-shadow:inset 0 3px 2px #efd3ff,0 4px 0 #583293;color:#fff}
.album-header h1{margin:0;font-size:29px;text-shadow:0 3px 0 #4e267c;-webkit-text-stroke:1px #563083;paint-order:stroke fill}
.album-header button{position:absolute;top:9px;width:38px;height:38px;border-radius:50%;color:white;font-size:33px;line-height:1;box-shadow:inset 0 2px 3px #ffb4bd,0 3px 0 #963347;background:linear-gradient(#ff758a,#e62949);border:2px solid #c82c53;display:grid;place-items:center;padding:0}
#collections-close{right:6px}#collections-back{left:6px;background:linear-gradient(#65e6ff,#199bde);box-shadow:inset 0 2px 3px #bcefff,0 3px 0 #285b9c;border-color:#2888bb}
#collections-back[hidden]{display:none}
#collections-note{margin:2px 4px 0;text-align:center;font-size:14px;line-height:1.3;flex:none}
#collection-grid{min-height:0;overflow:auto;touch-action:pan-y;overscroll-behavior:contain;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:5px 4px 18px;align-content:start;scrollbar-width:none}
#collection-grid.collection-covers{grid-template-columns:1fr;padding:5px 13px 18px}
.album-card{min-width:0;text-align:center;border-radius:17px;border:3px solid #a9a5d0;padding:7px;background:linear-gradient(#fff,#ece8f6);box-shadow:0 4px 0 #777fa6;overflow:hidden;color:#354271}
.album-cover{border-color:#d3b46b;box-shadow:-5px 0 0 #897ad3,0 4px 0 #7a6cba;padding:9px}
.album-art{position:relative;overflow:hidden;border-radius:10px;background:#a1a9b5}
.album-art img{display:block;width:100%;height:112px;object-fit:cover}
.album-cover .album-art img{height:155px}
.uncollected img{filter:grayscale(1)}
.album-stars{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:5px;background:linear-gradient(transparent,#152143aa);padding:12px 4px 3px;font-size:31px;line-height:1;color:#a3abc3;text-shadow:0 2px 2px #233052;-webkit-text-stroke:1px #5c6484;paint-order:stroke fill}
.album-stars .earned,.place-star.earned{color:#ffe352;-webkit-text-stroke-color:#aa6b22;text-shadow:0 2px 2px #86571b}
.album-card h2{font-size:17px;line-height:1.2;margin:8px 0 3px}.album-cover h2{font-size:25px;margin:6px 0 1px}
.album-card p{font-size:13px;line-height:1.2;margin:3px 0}.album-cover p{font-size:14px}
.place-star{position:absolute;right:3px;bottom:0;font-size:28px;color:#bdc5d5;text-shadow:0 2px 2px #465174}
.album-progress{height:10px;overflow:hidden;border-radius:8px;background:#a4aac7;margin:8px 3px 4px;box-shadow:inset 0 2px 2px #6b7393}
.album-progress span{display:block;height:100%;border-radius:8px;background:linear-gradient(#d6f875,#86cd36)}
.album-card .album-percent{font-size:14px;color:#586187}
@media(max-height:600px){.album-cover .album-art img{height:125px}#collections-screen{padding-top:8px;gap:8px}}

/* Override the shared centered screen layout for the album header. */
#collections-screen{align-items:stretch;justify-content:flex-start}
#collections-screen .album-header{width:100%;min-width:0;min-height:62px;padding:8px 46px;align-self:stretch}
#collections-title{color:#fff;letter-spacing:0;font-size:29px;text-align:center;line-height:1.2;white-space:nowrap}
#collections-screen #collections-close{top:-6px;right:-6px;left:auto;width:40px;height:40px;z-index:2;color:#fff}
#collection-grid{width:100%;flex:1;grid-auto-rows:max-content}

#collection-grid::-webkit-scrollbar{display:none;width:0;height:0}

#collections-title{font-size:clamp(20px,6.5vw,29px)}
.album-card h2{overflow-wrap:break-word}

/* Every swipe target must allow panning, including nested images and labels. */
html.collections-open,html.collections-open body,html.collections-open #game{touch-action:pan-y}
#game #collections-screen,#game #collection-grid,#game #collection-grid *{touch-action:pan-y}
#collection-grid{-webkit-overflow-scrolling:touch;overflow-x:hidden;overflow-y:auto}
#collection-grid img{-webkit-user-drag:none;pointer-events:none}