/* Compact complete albums on phones; family pages keep their two-column layout. */
@media(max-width:700px){
#full-album-dialog{width:98vw;max-width:98vw;max-height:96dvh;border-radius:10px}
#full-album-dialog .full-album-header{padding:8px;gap:3px 8px}
#full-album-dialog h2{font-size:clamp(17px,5vw,23px);margin:3px 0}
#full-album-dialog p{font-size:11px;line-height:1.3}
#full-album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 5px;padding:10px 6px}
#full-album-dialog .overview-card{padding:3px;border-radius:6px}
#full-album-dialog .overview-card img{border-radius:3px}
#full-album-dialog .overview-card figcaption{padding:4px 0 1px;font-size:10px;line-height:1.2}
#full-album-dialog .overview-card strong{min-height:30px;font-size:10px;overflow-wrap:anywhere}
#full-album-dialog .overview-card progress{height:4px;margin:4px 0}
#full-album-dialog .overview-card span,#full-album-dialog .overview-card small{font-size:10px;margin-top:3px}
:is(.noel-wrap,.kids-wrap):has(.collection:not(.single)){width:calc(100% - 16px)}
:is(.noel-wrap,.kids-wrap):has(.collection:not(.single)) header{padding:8px 0;gap:8px}
:is(.noel-wrap,.kids-wrap):has(.collection:not(.single)) header :is(button,.home){font-size:11px;min-height:36px;padding:6px 9px}
:is(.noel-wrap,.kids-wrap):has(.collection:not(.single)) h1{font-size:26px;margin:6px 0 10px}
:is(.noel-wrap,.kids-wrap):has(.collection:not(.single)) .album-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
:is(.noel-wrap,.kids-wrap):has(.collection:not(.single)) .album-tools select{width:100%;min-width:0}
:is(.noel-wrap,.kids-wrap):has(.collection:not(.single)) .album-tools .family-nav{min-width:0}
:is(.noel-wrap,.kids-wrap):has(.collection:not(.single)) .album-tools :is(select,button){min-height:36px;padding:5px 8px;font-size:13px}
:is(.noel-wrap,.kids-wrap):has(.collection:not(.single)) .xp-pot.universe-reserve{display:grid;grid-template-columns:52px auto;column-gap:7px;margin:9px auto 4px;text-align:left}
:is(.noel-wrap,.kids-wrap):has(.collection:not(.single)) .reserve-art{grid-row:1/3;width:52px;height:52px}
:is(.noel-wrap,.kids-wrap):has(.collection:not(.single)) .reserve-balance{align-self:end;font-size:12px}
:is(.noel-wrap,.kids-wrap):has(.collection:not(.single)) .reserve-balance strong{font-size:19px}
:is(.noel-wrap,.kids-wrap):has(.collection:not(.single)) .reserve-caption{align-self:start;font-size:11px}
:is(.noel-wrap,.kids-wrap):has(.collection:not(.single)) #notice:empty{display:none}
:is(.noel-wrap,.kids-wrap):has(.collection:not(.single)) #notice{font-size:12px;margin:5px 0;min-height:0}
.collection:not(.single){grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 6px;margin:10px auto}
.collection:not(.single) .xp-card{padding:4px;border-radius:8px}
.collection:not(.single) .art{padding:1px;border-width:1px;border-radius:6px}
.collection:not(.single) .art::before{inset:-1px;border-radius:6px}
.collection:not(.single) .art::after{font-size:12px;top:-6px}
.collection:not(.single) .art .spark{font-size:10px;right:-4px}
.collection:not(.single) .art img{border-radius:4px}
.collection:not(.single) .xp-card progress{height:5px;margin:8px 0 4px}
.collection:not(.single) .xp-line{flex-direction:column;gap:1px;font-size:10px;line-height:1.25;text-align:center}
.collection:not(.single) .assign{min-height:36px;padding:3px 1px;margin-top:5px;font-size:10px;line-height:1.2;border-radius:6px}
}

/* Four rows of two cards: preserve the artwork and put XP beside each thumbnail. */
@media(max-width:700px){
#full-album-dialog .overview-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:5px;height:clamp(88px,calc((96svh - 145px)/4),128px);box-sizing:border-box}
#full-album-dialog .overview-card button{height:100%;min-width:0}
#full-album-dialog .overview-card img{height:100%;width:100%;aspect-ratio:auto;object-fit:contain}
#full-album-dialog .overview-card figcaption{min-width:0;padding:0}
#full-album-dialog .overview-card strong{min-height:0;font-size:10px}
#full-album-dialog .overview-card span,#full-album-dialog .overview-card small{font-size:9px}
.collection:not(.single) .xp-card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:5px minmax(24px,1fr) 32px;gap:4px 6px;height:clamp(80px,calc((100svh - 250px)/4),128px);padding:4px;align-items:center}
.collection:not(.single) .art{grid-column:1;grid-row:1/4;height:100%;min-width:0}
.collection:not(.single) .art img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
.collection:not(.single) .xp-card progress{grid-column:2;grid-row:1;margin:0;height:4px}
.collection:not(.single) .xp-line{grid-column:2;grid-row:2;gap:2px;font-size:10px;min-width:0}
.collection:not(.single) .assign{grid-column:2;grid-row:3;margin:0;height:32px;min-height:32px;padding:2px 1px;font-size:10px}
}

/* Let each universe's scenery show around the artwork; retain luminous borders. */
#collection .xp-card,
.album-open #collection .family-card,
#full-album-dialog .overview-card{background:transparent}
#collection .xp-card:not(.mystery-card) .art,
.family-card .card-preview{background:transparent}
.noel-album-page{background-size:cover;background-position:center top;background-attachment:fixed}