/* The Album (ADR 0016): the forest's clearing with a sticker book on it. A strip of the Games' signs picks the
   page; the page is a sheet of paper with a slot for every sticker, the ones not yet earned as silhouettes.
   Builds on forest.css's tokens and chrome; the art is the Games' own. */

.album-top { display: flex; justify-content: space-between; align-items: center; }
.album-total {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-height: 56px;
  padding: 0 16px 0 10px;
  font: 400 clamp(26px, 3.6dvh, 34px) / 1 var(--display);
  color: var(--cream);
  text-shadow: 2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink), 0 4px 0 var(--ink);
  background: rgb(20 40 28 / 55%);
  border: 3px solid var(--rope);
  border-radius: 999px;
  filter: drop-shadow(0 4px 0 var(--drop));
}
.album-total[hidden] { display: none; }
.album-total-n { font-variant-numeric: tabular-nums; }
.album-icon { display: block; flex: none; }

.album {
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 10px;
  padding: 0 max(4vw, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(4vw, env(safe-area-inset-left));
}
.album-says { position: relative; z-index: 2; max-width: min(100%, 460px); margin-bottom: -4px; }

/* The strip of signs: a tap turns to that Game's page. */
.album-tabs { position: relative; z-index: 2; width: 100%; max-width: 980px; }
.album-tabs ul {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 6px 4px 12px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.album-tabs ul::-webkit-scrollbar { display: none; }
.album-tabs li { flex: none; scroll-snap-align: center; }
.album-tab {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: rgb(20 40 28 / 55%);
  border: 3px solid transparent;
  filter: drop-shadow(0 4px 0 var(--drop));
  transition: transform 0.15s var(--pop);
  -webkit-tap-highlight-color: transparent;
}
.album-tab img { width: 56px; height: 56px; object-fit: contain; pointer-events: none; opacity: 0.7; }
.album-tab-initial { font: 400 32px / 1 var(--display); color: var(--cream); }
.album-tab[aria-current="page"] { border-color: var(--gold); background: rgb(255 244 220 / 22%); transform: translateY(-3px) scale(1.06); }
.album-tab[aria-current="page"] img { opacity: 1; }
.album-tab:active { transform: scale(0.92); }
.album-tab:focus-visible { outline: 4px solid var(--cream); outline-offset: 3px; }
.album-tab-n {
  position: absolute;
  right: -6px;
  bottom: -8px;
  min-width: 28px;
  padding: 3px 7px 4px;
  font: 400 15px / 1 var(--display);
  text-align: center;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.album-tab-n[hidden] { display: none; }
.album-tab.is-full .album-tab-n { background: var(--leaf-soft); }

/* The page: paper with a slot for every sticker. */
.album-book { width: 100%; max-width: 980px; }
.album-page {
  position: relative;
  display: grid;
  gap: 18px;
  padding: clamp(16px, 3vw, 28px);
  color: var(--ink);
  background: var(--paper);
  border: 4px solid var(--rope);
  border-radius: 26px;
  box-shadow: 0 8px 0 var(--drop), inset 0 0 0 3px var(--cream);
  animation: pop-in 0.45s var(--pop) both;
}
.album-page[hidden] { display: none; }
.album-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.album-page-art { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 0 var(--drop)); }
.album-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  padding: 6px 16px 8px;
  font: 400 clamp(26px, 3.4dvh, 34px) / 1 var(--display);
  font-variant-numeric: tabular-nums;
  background: var(--amber-soft);
  border: 3px solid var(--rope);
  border-radius: 999px;
}
.album-count span { opacity: 0.6; }
.album-page.is-full .album-count { background: var(--leaf-soft); border-color: var(--leaf); }

/* The runs share the page: a slot is sized to the page's width so two runs of three sit side by side from a tablet
   up, and one run of three fills a phone; a run grows to fill its row, a long one wraps inside it. */
.album-groups { container-type: inline-size; display: flex; flex-wrap: wrap; gap: 14px; }
.album-group {
  --slot: clamp(64px, calc((100cqi - 56px) / 3), 100px);
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px;
  list-style: none;
  border: 3px dashed var(--rule);
  border-radius: 22px;
}
.sticker {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--slot, 84px);
  height: var(--slot, 84px);
  padding: 3%;
  background: rgb(58 30 12 / 7%);
  border-radius: 18px;
  box-shadow: inset 0 3px 0 rgb(58 30 12 / 10%);
}
.sticker img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: brightness(0) opacity(0.22); transition: filter 0.3s; }
.sticker.is-got { background: rgb(58 30 12 / 3%); box-shadow: none; }
.sticker.is-got img {
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 6px 5px rgb(58 30 12 / 35%));
}
.sticker.is-new img { animation: album-peel 0.9s var(--pop) both; }
@keyframes album-peel { from { transform: scale(0.2) rotate(-30deg); opacity: 0; } 60% { transform: scale(1.18) rotate(6deg); opacity: 1; } }

@container (min-width: 560px) { .album-group { --slot: clamp(72px, calc((100cqi - 120px) / 6), 120px); } }
@media (prefers-reduced-motion: reduce) {
  .album-page, .sticker.is-new img { animation: none; }
  .album-tab { transition: none; }
}