/* The inventory grid under the guess form: today's guessable roster, whichever
   mode is running. Items in item mode, champions everywhere else. */

#inventoryPanel {
  margin-bottom: 20px;
}

.inventory-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.inventory-heading {
  margin: 0;
}

/* The heading IS the toggle. A <button> takes phrasing content only, so the
   button sits inside the <h2> rather than around it — wrapping a heading in a
   button is invalid and costs the heading its role in the accessibility tree.

   It used to be stripped back to look like the plain heading it replaced —
   `border: 0; background: none`, muted text, a caret and nothing else — on the
   reasoning that the control should not shout. Paired with a panel that
   defaulted to collapsed, the result was that players did not find the roster
   at all: there was no affordance saying this could be opened, and nothing
   open to notice by accident. Both halves of that are fixed, this one by
   giving the control the outlined-box treatment #soundBtn already uses.

   Outlined rather than accent-filled: it is a disclosure, not a game action,
   and the accent fill belongs to Guess. */
.inventory-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps-md);
  text-transform: uppercase;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color var(--dur-ui) var(--ease-out),
              background var(--dur-ui) var(--ease-out);
}

.inventory-toggle:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
}

/* Rotated rather than swapped for a second glyph: one character that turns is
   the same width in both states, so the hint text beside it never shifts. */
.inventory-caret {
  display: inline-block;
  font-size: var(--text-xs);
  /* The one accent mark on the control — the part that says "this opens". */
  color: var(--accent);
  transition: transform var(--dur-ui) var(--ease-out);
}

.inventory-toggle[aria-expanded="true"] .inventory-caret {
  transform: rotate(90deg);
}

/* Promoted a step from --text-xs/--text-faint. It is the line that tells you
   the grid is searchable and clickable, which is worth more than the whisper
   it was set at. */
.inventory-hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* auto-fill rather than a fixed column count: the roster runs to ~210 items or
   ~170 champions, and the grid has to stay readable from a phone to a wide
   desktop without a breakpoint per size. Capped in height and scrolled — at
   full height the panel is several screens tall and pushes the answer box out
   of reach. */
#inventory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

/* Scrollbar styling lives in base.css now — one design shared by every
   scrolling container on the page, this grid included. */

/* These are <button>s, so they inherit the page's red uppercase button style —
   all of which has to be undone here. A tile is an icon, not a control. */
.inventory-item {
  display: block;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 0;
  transition: border-color var(--dur-ui) var(--ease-out),
              transform var(--dur-ui) var(--ease-out);
}
/* Hover-capable pointers only. A tap on a phone latches :hover on the tile
   until you tap something else, so the lift and accent border would sit stuck
   on whatever you last guessed and read as a selection that isn't one.
   inventory.js already gates its tooltip on this same query. */
@media (hover: hover) {
  .inventory-item:hover:not(:disabled) {
    background: transparent;
    border-color: var(--accent);
    transform: translateY(-2px);
  }
  /* A hover that moves the thing being pointed at is exactly the case this
     preference exists for. The border still marks the tile. */
  @media (prefers-reduced-motion: reduce) {
    .inventory-item:hover:not(:disabled) { transform: none; }
  }
}
.inventory-item img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  /* Starts invisible: revealIconsInOrder assigns src and adds .loaded once
     every earlier icon in sort order has already loaded, so tiles fill in
     top-to-bottom instead of in whatever order ~210 parallel requests happen
     to answer. The fade is what makes that reveal read as deliberate rather
     than a flicker. */
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.inventory-item img.loaded {
  opacity: 1;
}

/* Hidden by the search box rather than removed from the DOM: the grid is built
   once per roster, and filtering runs on every keystroke. */
.inventory-item.filtered-out {
  display: none;
}

.inventory-empty {
  padding: 14px 12px;
  font-size: var(--text-sm);
  color: var(--text-faint);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

/* Set on spent guesses, and on every tile once the day is over. The page's base
   button style fades every disabled button to 0.35, which here would grey out
   the whole roster the moment it stops being playable — the panel is still
   worth reading, so only the pointer affordance goes. Declared before .guessed
   so a tile that is both still takes the dimming below. */
.inventory-item:disabled {
  opacity: 1;
  cursor: default;
}

/* Already guessed: dimmed rather than removed, so the ordering the player has
   started to learn stays put. Disabled alongside this — the guess is spent. */
.inventory-item.guessed {
  opacity: 0.28;
}

/* Custom tooltip, replacing the browser's native title="" balloon — see
   inventory.js for why. Fixed rather than absolute: it lives directly under
   <body>, not inside the scrolling grid, so it never gets clipped by
   #inventory's own overflow. */
.inventory-tooltip {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  padding: 6px 11px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: 'Inter', sans-serif;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--dur-press) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.inventory-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Points at the tile's own center, not the tooltip's — inventory.js sets
   --caret-left per show, since horizontal clamping near a screen edge can
   shift the tooltip well away from the tile it's labelling. */
.inventory-tooltip::after {
  content: "";
  position: absolute;
  left: var(--caret-left, 50%);
  top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border-strong);
}
.inventory-tooltip::before {
  content: "";
  position: absolute;
  left: var(--caret-left, 50%);
  top: calc(100% - 1px);
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--surface-raised);
  z-index: 1;
}

/* Flipped below the tile when there's no room above it — the grid's top row
   has nowhere else to put a tooltip that opens upward. */
.inventory-tooltip.flipped::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--border-strong);
}
.inventory-tooltip.flipped::before {
  top: auto;
  bottom: calc(100% - 1px);
  border-top-color: transparent;
  border-bottom-color: var(--surface-raised);
}

@media (max-width: 640px) {
    #inventory {
      grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
      max-height: 260px;
    }
}