/* ---------------------------------------------------------------------------
   shell.css — the illuminated sign, the control strip, the wall grid.
--------------------------------------------------------------------------- */

/* --- the sign ----------------------------------------------------------- */

.sign {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2.2rem, 1rem + 5vw, 5rem) var(--pad-x) clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  border-bottom: 1px solid var(--hair);
  position: relative;
}

/* The fluorescent tube behind a real marquee: white, not tinted. */
.sign::before {
  content: '';
  position: absolute;
  inset: auto var(--pad-x) -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(243, 238, 247, 0.5), transparent);
}

.sign__name {
  font-size: var(--step-3);
  font-variation-settings: 'wdth' 125, 'wght' 900;
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--light);
  text-shadow:
    0 0 1px rgba(243, 238, 247, 0.5),
    0 0 26px rgba(233, 226, 240, 0.28),
    0 0 74px rgba(200, 188, 214, 0.16);
}

.sign__blurb {
  margin-top: 1.05rem;
  max-width: 48ch;
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--dust);
}

/* The search box in the top corner, the count of what it found beneath it. */
.sign__side {
  flex: 0 1 22rem;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.2rem;
}

/* The theme dropdown, the account and Settings, on a line that wraps from the end. */
.sign__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.sign .views {
  --views-bg: #0a0710;
  --views-line: var(--edge);
  --views-ink: var(--light);
  --views-ink-dim: var(--dust-dim);
  --views-on-bg: var(--riser-lit);
  --views-on-ink: var(--light);
  --views-radius: 4px;
  font-variation-settings: 'wdth' 96, 'wght' 560;
}

.sign__search {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.sign__count {
  flex: none;
  text-align: end;
  color: var(--dust-dim);
  font-size: var(--step--1);
  line-height: 1.35;
  padding-bottom: 0.3rem;
}

.sign__count b {
  display: block;
  font-size: var(--step-2);
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-variant-numeric: tabular-nums;
  color: var(--light);
  line-height: 1;
  margin-bottom: 0.3rem;
}

/* --- control strip ------------------------------------------------------ */

.controls {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0.75rem var(--pad-x);
  background: color-mix(in srgb, var(--room-deep) 86%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--hair);
}

/* The search field is sunk into the panel, the way a coin slot is. */
.hunt {
  position: relative;
  width: 100%;
}

.hunt input {
  width: 100%;
  padding-block: 0.62rem 0.62rem; padding-inline: 2.4rem 2.2rem;
  background: #0a0710;
  border: 1px solid var(--edge);
  border-top-color: #070509;
  border-radius: 3px;
  color: var(--light);
  font-variation-settings: 'wdth' 96, 'wght' 500;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.65);
}

.hunt input::placeholder {
  color: var(--dust-dim);
}

/* type="search" draws its own clear button; we ship one that matches the rest. */
.hunt input::-webkit-search-cancel-button,
.hunt input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.hunt input:focus {
  outline: none;
  border-color: var(--attract);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.65),
    0 0 0 1px var(--attract);
}

.hunt__clear {
  position: absolute;
  inset-inline-end: 0.35rem;
  top: 50%;
  translate: 0 -50%;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  color: var(--dust-dim);
  border-radius: 3px;
}

.hunt__clear:hover {
  color: var(--light);
}

.hunt__icon {
  position: absolute;
  inset-inline-start: 0.8rem;
  top: 50%;
  translate: 0 -50%;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--dust-dim);
  pointer-events: none;
}

/* `display: grid` above would otherwise outrank the attribute. */
.hunt__clear[hidden] {
  display: none;
}


/* Cabinet buttons: dark plastic, lit from above, amber when engaged. */
.chip {
  padding: 0.36rem 0.72rem;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--riser-lit), var(--riser));
  border: 1px solid var(--edge);
  color: var(--dust);
  font-size: var(--step--1);
  font-variation-settings: 'wdth' 94, 'wght' 550;
  white-space: nowrap;
  transition: color 0.14s var(--ease), background 0.14s var(--ease), border-color 0.14s var(--ease);
}

.chip:hover {
  color: var(--light);
  border-color: var(--hair-bright);
}

.chip[aria-pressed='true'],
.chip.is-on {
  background: var(--attract);
  border-color: var(--attract);
  color: var(--attract-ink);
  font-variation-settings: 'wdth' 94, 'wght' 700;
}

.chip:disabled {
  opacity: 0.35;
  cursor: default;
}

.chip:disabled:hover {
  color: var(--dust);
  border-color: var(--edge);
}

.chip svg {
  display: inline-block;
  vertical-align: -0.12em;
  margin-inline-end: 0.15rem;
}


/* The step between a series and the games inside it, in the trail. */
.trail__step {
  color: var(--dust-dim);
}

/* --- the wall ----------------------------------------------------------- */

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
  gap: var(--tile-gap);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem) var(--pad-x) clamp(4rem, 3rem + 6vw, 8rem);
  align-items: start;
}

.wall:focus {
  outline: none;
}

.wall__status {
  grid-column: 1 / -1;
  padding: clamp(3rem, 8vw, 7rem) 0;
  text-align: center;
  color: var(--dust);
  font-size: var(--step-1);
  font-variation-settings: 'wdth' 98, 'wght' 500;
}

.wall__status button {
  color: var(--attract);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wall__status code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.92em;
  color: var(--light);
  background: var(--riser);
  padding: 0.12em 0.4em;
  border-radius: 3px;
}

/* Where the wall is inside the Source rail. First thing on the wall, full width. */
.trail {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  color: var(--dust);
  font-size: var(--step-0);
}

.trail b {
  color: var(--light);
  font-size: var(--step-1);
  font-variation-settings: 'wdth' 112, 'wght' 820;
  letter-spacing: -0.012em;
}

.trail a:hover {
  color: var(--light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.trail__up {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.trail__up svg {
  width: 1em;
  height: 1em;
  align-self: center;
}

.trail__count {
  margin-inline-start: auto;
  color: var(--dust-dim);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

/* Sentinel the grid observer watches to pull in the next batch of cabinets.
   Never a scroll anchor: if the browser pinned the viewport to it, every batch
   would drag the page down with it and the next batch would never be asked for. */
.wall__more {
  grid-column: 1 / -1;
  height: 1px;
  overflow-anchor: none;
}

@media (max-width: 34rem) {
  :root {
    --tile-min: 12.5rem;
  }

  .sign {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .sign__side {
    flex: none;
    width: 100%;
    align-items: stretch;
  }

  .sign__count {
    text-align: start;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }

  .sign__count b {
    display: inline;
    margin: 0;
  }
}

/* --- the toolbar: Genre, Players, Filters, Sort, View ------------------ */

/* Five boxes sharing the width, lined up with the shelf buttons above. */
.toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(0.6rem, 0.3rem + 1vw, 1.1rem);
}

.toolbar__item[hidden] {
  display: none;
}

.box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--riser-lit), var(--riser));
  color: var(--dust);
  text-align: start;
}

.box:hover,
.box:has(+ .drop:popover-open) {
  color: var(--light);
  border-color: var(--hair-bright);
}

.box.is-on {
  border-color: var(--attract);
  box-shadow: inset 0 0 0 1px var(--attract);
}

.box__text {
  min-width: 0;
  display: grid;
}

.box__label {
  color: var(--dust-dim);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 100, 'wght' 650;
}

.box__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--light);
  font-size: var(--step--1);
  font-variation-settings: 'wdth' 96, 'wght' 650;
}

.box.is-on .box__value {
  color: var(--attract);
}

.box__caret {
  flex: none;
  transition: rotate 0.15s var(--ease);
}

.box:has(+ .drop:popover-open) .box__caret {
  rotate: 180deg;
}

/* What is filtering the wall, each one a press away from gone. */
.actives {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.actives[hidden] {
  display: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-block: 0.28rem 0.28rem; padding-inline: 0.7rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--attract) 55%, transparent);
  background: color-mix(in srgb, var(--attract) 14%, transparent);
  color: var(--light);
  font-size: var(--step--1);
  font-variation-settings: 'wdth' 94, 'wght' 600;
}

.pill:hover {
  border-color: var(--attract);
}

.pill svg {
  opacity: 0.7;
}

.actives__clear {
  margin-inline-start: 0.3rem;
  color: var(--attract);
  font-size: var(--step--1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A menu, in the top layer, placed under its box from script. It opens
   downwards; a row with more behind it flies a submenu out to the right. */
.drop {
  position: fixed;
  inset: auto;
  margin: 0;
  min-width: 12rem;
  max-width: min(22rem, calc(100vw - 16px));
  overflow: visible;
  padding: 0.3rem;
  border: 1px solid var(--hair-bright);
  border-radius: 6px;
  background: var(--riser);
  color: var(--dust);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

.drop:popover-open {
  display: grid;
  gap: 0.1rem;
}

/* A plain list scrolls inside its room; one with submenus must not clip them. */
.drop:not(:has(.drop__group)) {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drop__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.65rem;
  border-radius: 4px;
  text-align: start;
  font-size: var(--step--1);
  font-variation-settings: 'wdth' 94, 'wght' 550;
  white-space: nowrap;
}

.drop__item:hover,
.drop__item:focus-visible,
.drop__group.is-open > .drop__item {
  background: var(--riser-lit);
  color: var(--light);
}

.drop__item[aria-pressed='true'] {
  color: var(--light);
  font-variation-settings: 'wdth' 94, 'wght' 700;
}

.drop__item:disabled {
  opacity: 0.35;
  cursor: default;
  background: none;
  color: var(--dust);
}

.drop__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The tick: a square for "any of these", a round one for "one of these". */
.drop__mark {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  border: 1.5px solid var(--hair-bright);
  border-radius: 3px;
}

.drop__item--radio .drop__mark {
  border-radius: 50%;
}

.drop__item[aria-pressed='true'] .drop__mark {
  border-color: var(--attract);
  background: var(--attract);
  box-shadow: inset 0 0 0 2.5px var(--riser);
}

.drop__chev {
  flex: none;
  rotate: -90deg;
  opacity: 0.7;
}

.drop__group {
  position: relative;
}

/* The submenu: out to the right of its row, scrolling if it is long. */
.drop__sub {
  display: none;
  position: absolute;
  top: -0.35rem;
  inset-inline-start: calc(100% + 0.45rem);
  min-width: 11rem;
  max-height: min(70vh, 30rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.3rem;
  border: 1px solid var(--hair-bright);
  border-radius: 6px;
  background: var(--riser);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

.drop__group.is-open > .drop__sub {
  display: grid;
  gap: 0.1rem;
}

/* No room on the inset-inline-end: out to the left instead. */
.drop__sub--flip {
  inset-inline-start: auto;
  inset-inline-end: calc(100% + 0.45rem);
}

.drop__hint {
  flex: none;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--attract);
  font-size: var(--step--2);
}

.drop__head {
  padding: 0.5rem 0.65rem 0.2rem;
  color: var(--dust-dim);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* On a phone the boxes wrap, three and two, and a submenu opens in place
   under its row: there is no room to its right. */
@media (max-width: 48rem) {
  .toolbar {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
  }

  .box {
    padding: 0.4rem 0.6rem;
  }

  .drop__sub,
  .drop__sub--flip {
    position: static;
    max-height: 40vh;
    margin-block: 0.15rem 0.3rem; margin-inline: 1.2rem 0;
    box-shadow: none;
    border-color: var(--hair);
  }

  .drop {
    max-height: 70vh;
    overflow-y: auto;
  }
}