/* Albums of the ludothèque (albums.js), and the "+1 album" mention of the box and collection (album-gain.js). */
.album-summary{font:11px monospace;color:#8da17e;margin:22px 0 18px;min-height:1em}
.album-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:40px}
.album-tile{position:relative;display:flex;flex-direction:column;min-width:0;padding:22px 22px 20px;border:1px solid #a9bd8e26;border-radius:14px;background:linear-gradient(135deg,#243d272b,#14201966);transition:border-color .2s,transform .2s;isolation:isolate;overflow:hidden}
.album-tile:hover{border-color:#a9bd8e80;transform:translateY(-3px)}
.album-tile-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:22px}
.album-tile-top .eyebrow{font-size:8px;margin:0}
.album-fan{position:relative;display:block;aspect-ratio:2.25;margin:14px 0 6px}
.album-fan>.memory-card{position:absolute;top:8%;width:29%;transform:rotate(var(--angle));transition:transform .25s}
.album-fan>.memory-card:nth-child(1){left:3%;--angle:-9deg;z-index:1}
.album-fan>.memory-card:nth-child(2){left:24%;top:2%;--angle:-3deg;z-index:2}
.album-fan>.memory-card:nth-child(3){left:46%;top:2%;--angle:3deg;z-index:3}
.album-fan>.memory-card:nth-child(4){left:68%;--angle:9deg;z-index:4}
.album-tile:hover .album-fan>.memory-card{transform:rotate(var(--angle)) translateY(-4px)}
.album-tile h2{font-size:23px;line-height:1.2;margin:10px 0 12px;overflow-wrap:anywhere}
.album-tile-meter{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:10px monospace;color:#97aa86;margin-bottom:9px}
.album-tile-meter strong{font:normal 24px Georgia,serif;color:#e7ecde}
.album-tile .destination-link{font-size:11px;color:#ccdabd;margin-top:16px}
.album-progress{display:block;width:100%;height:5px;border:0;border-radius:4px;overflow:hidden;background:#263b2b;accent-color:#bfda99;-webkit-appearance:none;appearance:none}
.album-progress::-webkit-progress-bar{background:#263b2b}
.album-progress::-webkit-progress-value{background:#bfda99;transition:width .5s}
.album-progress::-moz-progress-bar{background:#bfda99}
.album-badge{display:inline-block;padding:4px 9px;border-radius:20px;font:9px monospace;letter-spacing:1px;color:#3a2a0d;background:linear-gradient(120deg,#c4963e,#fff0b6 45%,#e3b95e);box-shadow:0 0 12px #edc36433}

/* A completed album: its shell turns to brushed gold, like a legendary card. */
.album-tile.is-complete,.album-head.is-complete{border-color:#e3c27a99;background:repeating-linear-gradient(0deg,#fff4c006 0 1px,transparent 1px 3px),linear-gradient(130deg,#e9c46a2e,#9e702914 45%,#14201966 75%);box-shadow:inset 0 0 0 1px #ffeab322,0 10px 30px #c9a04a14}
.album-tile.is-complete h2,.album-head.is-complete h1{color:#f3dc9c}
.album-tile.is-complete .album-progress::-webkit-progress-value,.album-head.is-complete .album-progress::-webkit-progress-value{background:linear-gradient(90deg,#c4963e,#fff0b6,#e3b95e)}
.album-tile.is-complete .album-progress::-moz-progress-bar,.album-head.is-complete .album-progress::-moz-progress-bar{background:#e3b95e}
.album-tile.is-complete .album-progress,.album-head.is-complete .album-progress{accent-color:#e3b95e}

/* Celebration, once per album: a gold sweep and sparkles. */
.celebrating:after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(105deg,transparent 30%,#fff3c470 48%,#ffe08a40 55%,transparent 70%);background-size:250% 100%;animation:album-sweep 1.4s .15s ease-out both}
.celebrating{animation:album-pop .7s ease both}
.album-sparkles{position:absolute;left:50%;top:45%;z-index:6;pointer-events:none}
.album-sparkles i{position:absolute;width:5px;height:5px;border-radius:1px;background:#ffe9a8;box-shadow:0 0 9px #ffd76a;animation:album-spark 1.5s var(--delay) ease-out both}
.album-sparkles i:nth-child(3n){background:#d8f3b0}
@keyframes album-sweep{from{background-position:120% 0}to{background-position:-60% 0}}
@keyframes album-pop{0%,100%{transform:none}40%{transform:scale(1.025)}}
@keyframes album-spark{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(140deg) scale(.2)}}
.album-announcement{margin:0;min-height:0}
.album-announcement.visible{margin:0 0 18px;padding:14px 16px;border:1px solid #e3c27a66;border-radius:10px;background:#e9c46a14;color:#f3dc9c;font-size:13px}

/* One album. */
.back-link{display:inline-block;font-size:12px;color:#a7bc91;margin-bottom:16px}
.back-link:hover{text-decoration:underline}
.album-head{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px;border:1px solid #a9bd8e26;border-radius:16px;background:linear-gradient(120deg,#233f3055,#14251c);margin-bottom:22px}
.album-head h1{margin:8px 0 6px;overflow-wrap:anywhere}
.album-head .eyebrow{margin:0}
.album-head .muted{margin:0;font-size:13px}
.album-meter{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:200px}
.album-meter strong{font:normal 38px Georgia,serif;line-height:1}
.album-meter .album-progress{width:220px}
.album-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 18px;margin:8px 0 40px}
.album-slot{position:relative;min-width:0}
.album-slot-number{display:block;font:9px monospace;letter-spacing:1px;color:#7f9273;margin-bottom:7px}
.album-slot h3{font-size:11px;line-height:1.45;margin:12px 0 4px;color:#ccd7c0;overflow-wrap:anywhere}
.album-slot .badge{margin:0}
.album-slot-card{display:block;width:100%}
.album-slot.is-missing h3{color:#93a38c;font-weight:400}
.album-slot.is-missing .memory-card{opacity:.45}

/* "+1 Game Boy Advance": discreet, under a box card or a collection card. */
.album-gain{display:block;margin:6px 0 0;font:10px monospace;letter-spacing:.3px;color:#a8c58e;line-height:1.5;overflow-wrap:anywhere}
.album-gain a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.album-gain a:hover{border-bottom-style:solid}
.album-gain.is-complete{color:#ecd08a}
.slot-note .album-gain{margin-top:4px;animation:caption-in .4s .2s both}
.detail-albums{margin-top:4px}
.detail-albums a{text-decoration:underline}

@media(max-width:1000px){.album-list{grid-template-columns:repeat(2,minmax(0,1fr))}.album-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:760px){.album-head{flex-direction:column;align-items:stretch;padding:20px}.album-meter{align-items:flex-start;flex-direction:row;flex-wrap:wrap;align-items:center;min-width:0}.album-meter strong{font-size:30px}.album-meter .album-progress{width:100%}.album-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px}}
@media(max-width:640px){.album-list{grid-template-columns:1fr;gap:16px}.album-tile{padding:18px}.album-tile h2{font-size:21px}}
@media(max-width:380px){.album-slot h3{font-size:10px}}
@media(prefers-reduced-motion:reduce){.album-tile,.album-fan>.memory-card{transition:none}.album-tile:hover,.album-tile:hover .album-fan>.memory-card{transform:rotate(var(--angle,0))}.album-tile:hover{transform:none}.celebrating,.celebrating:after,.album-sparkles,.slot-note .album-gain{animation:none!important}.album-sparkles{display:none}}

html[data-theme=cream] .album-tile,html[data-theme=cream] .album-head{background:linear-gradient(135deg,#fffbf2,#ede7d5);border-color:var(--cream-line)}
html[data-theme=cream] .album-tile:hover{border-color:#64826b}
html[data-theme=cream] :is(.album-summary,.album-tile-meter,.album-slot-number,.back-link,.album-slot.is-missing h3){color:var(--cream-muted)}
html[data-theme=cream] :is(.album-tile-meter strong,.album-slot h3,.album-meter strong){color:var(--cream-ink)}
html[data-theme=cream] .album-tile .destination-link{color:var(--cream-accent)}
html[data-theme=cream] .album-progress{background:#d7d9bf;accent-color:#56764b}
html[data-theme=cream] .album-progress::-webkit-progress-bar{background:#d7d9bf}
html[data-theme=cream] .album-progress::-webkit-progress-value{background:#56764b}
html[data-theme=cream] .album-progress::-moz-progress-bar{background:#56764b}
html[data-theme=cream] :is(.album-tile.is-complete,.album-head.is-complete){border-color:#b98d35;background:repeating-linear-gradient(0deg,#ffffff10 0 1px,transparent 1px 3px),linear-gradient(130deg,#f3dc9c,#fbf0cf 45%,#f4ead0);box-shadow:inset 0 0 0 1px #fff6d8,0 10px 26px #8b651d1f}
html[data-theme=cream] :is(.album-tile.is-complete h2,.album-head.is-complete h1){color:#6b4b14}
html[data-theme=cream] .album-tile.is-complete .album-progress::-webkit-progress-value,html[data-theme=cream] .album-head.is-complete .album-progress::-webkit-progress-value{background:linear-gradient(90deg,#9e7029,#e3b95e,#9e7029)}
html[data-theme=cream] .album-announcement.visible{background:#fbf0cf;border-color:#c9a04a;color:#6b4b14}
html[data-theme=cream] .album-gain{color:var(--cream-accent)}
html[data-theme=cream] .album-gain.is-complete{color:#8b651d}
html[data-theme=cream] .album-slot.is-missing .memory-card{opacity:.55}