/* the Wardrobe tab: a preview, a few controls and a shelf, on one screen. Components come from style.css */
.wd { --vh: 100vh; }
@supports (height: 100svh) { .wd { --vh: 100svh; } }
/* one column that may be narrower than its widest child: the shelf scrolls sideways inside it */
.wd-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
/* the preview takes the height the rest leaves (--wd-top and --wd-rest are measured by wdFit) */
.wd-preview { position: relative; height: clamp(120px, calc(var(--vh) - var(--wd-top, 140px) - var(--wd-rest, 390px) - 12px), 340px); background: var(--card); border: var(--line-w) solid var(--ink); border-radius: var(--r-card); overflow: hidden; }
#wd-cv { display: block; width: 100%; height: 100%; }
.wd-coins { position: absolute; top: 8px; right: 8px; }
/* the aura chip, in the preview's other corner: it opens the aura shelf */
.wd-aura { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; font-size: 13px; font-weight: 600; }
.wd-aura .ic { width: 16px; height: 16px; }
@media (pointer: coarse) { .wd-aura { min-height: 44px; } }
/* two lines of room always, so nothing below moves when the text wraps */
.wd-stats { display: flex; align-items: center; justify-content: center; min-height: calc(2 * 1.3em); margin: 0; padding: 0 6px; text-align: center; font-size: 14px; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
.wd .seg button[aria-checked="true"] { background: var(--card); color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-hard); }
.wd .seg .ic { width: 18px; height: 18px; }
/* the six slots stay one row at every width. Where an icon and its name do not fit side by side (a phone, and the
   narrow column of the two-column Wardrobe), wdFit stacks each icon over its name, so the row fits without a second one
   (a second row cost 52px that a 375×667 screen does not have). Stacked, the buttons share the row by their content:
   six equal buttons at 375 are about 52px, and "Shoulders" needs about 62, which the short names give up */
#wd-slot.wd-stack { gap: 4px; }
#wd-slot.wd-stack button { flex: 1 1 auto; flex-direction: column; gap: 1px; padding: 3px 2px; font-size: 13px; line-height: 1.1; }
#wd-slot.wd-stack .ic { width: 16px; height: 16px; }
/* narrower than any of the test sizes, where even the stacked names do not fit (wdFit sets it): the icons alone, each
   name kept as its button's name for a screen reader */
#wd-slot.wd-icons span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* a slot with nothing on sale yet (its looks are sold once they are drawn) */
.wd-empty { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 116px; margin: 0; font-size: 14px; color: var(--soft); }
.wd-parity { margin: -2px 4px 0; text-align: center; font-size: 13px; line-height: 1.3; color: var(--soft); }
/* the shelf: one row of tiles that scrolls sideways when there are more than fit, like the snack shelf */
.wd-shelf { background: var(--card); border: var(--line-w) solid var(--ink); border-radius: var(--r-card); }
.wd-row { display: flex; gap: 6px; padding: 8px; overflow-x: auto; scrollbar-width: thin; border-radius: var(--r-tile); }
.wd-tile {
  position: relative; flex: none; width: 78px; min-height: 116px; padding: 4px 3px 3px;
  display: grid; justify-items: center; align-content: start; gap: 1px;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r-tile);
  font-size: 12px; line-height: 1.15;
  touch-action: pan-x; user-select: none; -webkit-user-select: none; transition: transform .08s;
}
@media (hover: hover) { .wd-tile:hover { transform: translateY(-2px); } }
.wd-tile canvas { width: 36px; height: 36px; margin-top: 2px; }
/* a name keeps room for three lines ("Cloud Knight Gauntlets"), so every tile's rarity chip and price sit on one line
   across the shelf whatever the name's length. Keep names to three lines at this width */
.wd-tile .tn { display: flex; align-items: center; justify-content: center; min-height: calc(3 * 1.15em); text-align: center; }
.wd-tile.locked { border-style: dashed; color: var(--soft); }
/* the glow mark: this look has an aura of its own */
.wd-glow { position: absolute; top: 4px; left: 4px; display: grid; place-items: center; width: 14px; height: 14px; color: var(--ink); }
.wd-glow .ic { width: 12px; height: 12px; }       /* the locked look of CONTRACTS 6.2; the lock icon and the line are in the tile */
.wd-tile[aria-pressed="true"] { background: var(--butter); box-shadow: var(--shadow-hard); }
/* a locked look can still be tried on: S05's .locked uses !important, so the selected state must too */
.wd-tile.locked[aria-pressed="true"] { background: var(--butter) !important; box-shadow: var(--shadow-hard) !important; cursor: pointer; }
.wd-rar { padding: 0 6px; background: var(--rar-common); color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--r-pill); line-height: 1.3; }
.wd-tile[data-rar="rare"] .wd-rar { background: var(--rar-rare); }
.wd-tile[data-rar="epic"] .wd-rar { background: var(--rar-epic); }
.wd-tile[data-rar="legendary"] .wd-rar { background: var(--rar-legendary); }
.wd-tile[data-rar="mythic"] .wd-rar { background: var(--rar-mythic); }
.wd-st { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 16px; white-space: nowrap; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.wd-st .ic, .wd-lock .ic, #wd-go .ic { width: 14px; height: 14px; }
.wd-act { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.wd-what { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.25; color: var(--soft); }
.wd-what b { color: var(--ink); font-weight: 600; }
.wd-lock { display: flex; align-items: center; gap: 4px; }
#wd-go { flex: none; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
#wd-go.dear { background: var(--card); border-style: dashed; box-shadow: none; color: var(--soft); }
#i-gem .i-fill { fill: var(--mint); }
body[data-mode="wardrobe"] .status:empty { display: none; }
/* a wide screen: the Wardrobe is one block in the middle of the page, with "What gear does" under it as its footnote,
   instead of a narrow column on the left and a lone card far to its right */
@media (min-width: 821px) {
  body[data-mode="wardrobe"] main { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 600px; margin-inline: auto; }
  body[data-mode="wardrobe"] .stage-col, body[data-mode="wardrobe"] .side { width: 100%; }
}
/* wider still: the booger on the left, as tall as the controls beside it, and everything that dresses it on the right */
@media (min-width: 1000px) {
  body[data-mode="wardrobe"] main { max-width: 1000px; }
  body[data-mode="wardrobe"] .stage-col > :not(#wardrobe) { max-width: 600px; margin-inline: auto; }
  .wd-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; }
  .wd-main > * { grid-column: 2; }
  .wd-main > .wd-preview { grid-column: 1; grid-row: 1 / span 6; height: auto; min-height: 380px; }
}
@media (pointer: coarse) { #wd-go { min-height: 44px; } }