/* Mathew's Wardrobe (issue 23): Mathew on a stump in front of his open wardrobe, his things on
   mossy branch shelves below him on a phone and beside him on a tablet in landscape. Every piece
   is Ludo art (forest/ui/); builds on forest.css's tokens and chrome. */

.wardrobe [hidden] { display: none; }
.wardrobe[hidden] { display: none; }

.wardrobe-top { display: flex; justify-content: space-between; align-items: center; }

.wardrobe {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: stretch;
  gap: 4px;
  padding: 0 max(4vw, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(4vw, env(safe-area-inset-left));
}
@media (min-width: 900px) and (min-aspect-ratio: 1 / 1) {
  /* Mathew and his shelves as one centred pair, however wide the screen. */
  .wardrobe {
    grid-template-columns: minmax(0, 440px) minmax(0, 620px);
    grid-template-rows: 1fr;
    justify-content: center;
    align-items: center;
    column-gap: clamp(24px, 5vw, 72px);
  }
  .wardrobe .shelves { align-self: center; }
}

/* The stage: Mathew's line on a scroll, the open wardrobe behind him, the stump under him. */
.wardrobe-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; }
.wardrobe-stage .scroll-says { position: relative; z-index: 2; max-width: min(100%, 420px); margin-bottom: -10px; }

.wardrobe-scene {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: end;
  grid-template-rows: minmax(0, 1fr);
  width: min(100%, 440px);
  height: clamp(250px, 44dvh, 460px);
}
.wardrobe-scene > * { grid-area: 1 / 1; max-width: 100%; }
.wardrobe-cabinet { width: auto; height: 82%; align-self: start; filter: drop-shadow(0 8px 0 var(--drop)) saturate(0.9); }
.wardrobe-stump { width: 64%; height: auto; margin-bottom: 0; filter: drop-shadow(0 6px 0 var(--drop)); }
.wardrobe-figure { display: contents; }
.wardrobe-mathew {
  grid-area: 1 / 1; /* the span around it has display: contents, so the rule above cannot reach it */
  height: 92%;
  margin-bottom: 7%;
  filter: drop-shadow(0 8px 0 rgb(20 30 15 / 30%));
  transform-origin: 50% 100%;
  animation: breathe-fox 3.4s ease-in-out infinite;
}
/* The picked item floats beside Mathew, as if he holds it up to look. */
.wardrobe-held {
  position: relative;
  justify-self: end;
  align-self: center;
  width: clamp(52px, 8dvh, 88px);
  height: auto;
  margin-right: 2%;
  filter: drop-shadow(0 6px 0 var(--drop));
  animation: pop-in 0.5s var(--pop) both, bob 1.6s ease-in-out 0.5s infinite alternate;
}
.is-new .wardrobe-mathew { animation: picked 0.6s var(--pop) both, breathe-fox 3.4s ease-in-out 0.6s infinite; }
.is-new .wardrobe-scene::after {
  content: "";
  position: absolute;
  inset: 0 10% 20%;
  background:
    radial-gradient(circle, var(--gold) 0 5px, transparent 6px) 10% 20% / 60px 60px,
    radial-gradient(circle, var(--cream) 0 4px, transparent 5px) 70% 40% / 80px 80px;
  animation: glow 0.9s ease-in-out infinite alternate;
  pointer-events: none;
}

.wardrobe-act { position: relative; z-index: 2; display: grid; justify-items: center; margin-top: -6px; }
.wardrobe-act form { display: contents; }

/* The shelves: each row of things sits on a mossy branch; a wooden tag hangs under anything
   still to get, a leaf check marks what Mathew wears. */
.shelves { align-self: start; }
.shelf {
  --branch: clamp(22px, 3.4dvh, 34px);
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 6px;
}
.shelf > li {
  padding-bottom: calc(var(--branch) * 0.4 + 30px);
  background: url("/static/forest/branch.64c99f10c3.webp") 0 calc(100% - 30px) / auto var(--branch) repeat-x;
}
.shelf > li:nth-child(4n + 2) { background-position-x: 31%; }
.shelf > li:nth-child(4n + 3) { background-position-x: 62%; }
.shelf > li:nth-child(4n + 4) { background-position-x: 93%; }

.shelf-item {
  font: inherit;
  background: none;
  border: 0;
  width: 100%;
  cursor: pointer;
  position: relative;
  display: grid;
  justify-items: center;
  min-height: 88px;
  padding: 6px 4px 0;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.15s var(--pop);
  -webkit-tap-highlight-color: transparent;
}
.shelf-item:hover { transform: translateY(-4px) rotate(-3deg); }
.shelf-item:active { transform: scale(0.92); }
.shelf-item:focus-visible { outline: 4px solid var(--cream); outline-offset: 2px; border-radius: 16px; }
.shelf-art {
  width: 100%;
  max-width: 92px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin-bottom: calc(var(--branch) * -0.45);
  filter: drop-shadow(0 4px 0 var(--drop));
}
.shelf-item[aria-current] .shelf-art {
  transform: translateY(-8px) scale(1.12);
  filter: drop-shadow(0 0 10px var(--gold)) drop-shadow(0 0 4px var(--gold)) drop-shadow(0 6px 0 var(--drop));
  animation: bob 1.4s ease-in-out infinite alternate;
}
.shelf-check { position: absolute; right: 2px; top: 0; width: 34px; height: auto; filter: drop-shadow(0 3px 0 var(--drop)); }
.shelf-tag {
  position: absolute;
  left: 50%;
  bottom: -34px;
  translate: -58% 0; /* the body's centre (58% across) under the item's */
  /* tag.webp is 240x112: its body runs from 19% to 98% across, the string hanging off the left.
     The price is centred on the body (58% across), on a tag kept at its painted proportions. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  --w: 86px; /* padding in % would follow the item's width, not the tag's */
  width: var(--w);
  height: calc(var(--w) * 112 / 240);
  padding: 0 calc(var(--w) * 0.04) 0 calc(var(--w) * 0.21);
  font: 400 19px / 1 var(--display);
  white-space: nowrap;
  color: var(--cream);
  text-shadow: 1.5px 0 var(--ink), -1.5px 0 var(--ink), 0 1.5px var(--ink), 0 -1.5px var(--ink), 0 3px 0 var(--ink);
  background: url("/static/forest/ui/tag.0a3d1c86fa.webp") center / 100% 100% no-repeat;
  box-sizing: border-box;
  filter: drop-shadow(0 3px 0 var(--drop));
}
.shelf-tag img { width: auto; height: 22px; margin-block: -6px; }
.shelf-item.is-owned .shelf-tag, .shelf-item.is-wearing .shelf-tag { display: none; }
.shelf-item.is-short .shelf-art { opacity: 0.8; filter: grayscale(0.45); }
.shelf-item.is-short .shelf-tag { filter: grayscale(0.6) brightness(0.85); }

@media (prefers-reduced-motion: reduce) {
  .wardrobe *, .wardrobe *::before, .wardrobe *::after { animation: none !important; transition: none !important; }
}