/* A permanent board zone beside priority, with its own reserved footprint. */
#stage .chain {
  border: 1px solid #897044;
  border-image: none;
  border-radius: 8px;
  padding: .55cqw;
  background: linear-gradient(180deg, #172430e8, #080f17d9);
  box-shadow: inset 0 0 18px #0009, 0 2px 8px #0007;
  display: flex;
  flex-direction: column;
  gap: .25cqw;
  overflow: hidden;
  min-height: 0;
}

#stage .chain--active { border-color: #e4bc6c; box-shadow: inset 0 0 18px #0009, 0 0 12px #dab36b30; }
#stage .chain__head { display: block; flex: 0 0 auto; margin: 0; text-align: center; font-size: max(12px, .9cqw); cursor: default; touch-action: auto; }
#stage .chain__note,
#stage .chain__order,
#stage .chain__name,
#stage .chain__detail,
#stage .chain__owner { display: none; }
#stage .chain__empty {
  flex: 1;
  min-height: 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 12px;
  border: 1px dashed #bca06b55;
  border-radius: 6px;
  color: #b5aa91;
  font: 400 max(11px, .7cqw)/1.5 var(--ui);
}
#stage .chain__empty::before { content: '◇'; display: block; font-size: 32px; color: #bda46e; }
#stage .chain__empty[hidden] { display: none; }
#stage .chain__items { display: grid; grid-auto-rows: minmax(0, 1fr); flex: 1; min-height: 0; overflow: hidden; padding: 3px; gap: 3px; }
#stage .chain__items:empty { display: none; }
#stage .chain__item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; min-width: 0; padding: 2px; border: 1px solid #677584; border-radius: 6px; text-align: left; }
#stage .chain__item--top { border-color: #d9b56d; }
#stage .chain__art { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 4px; }
#stage .chain__item--no-art .chain__name { display: block; overflow: hidden; }
#stage .chain__art[hidden] { display: none; }
#stage .chain__order { color: #ddc38a; font: 600 max(9px, .58cqw)/1.2 var(--ui); text-transform: uppercase; letter-spacing: .06em; }
#stage .chain__name { white-space: normal; font-size: max(11px, .7cqw); }
#stage .chain__detail { font-size: max(10px, .6cqw); line-height: 1.3; }
#stage .chain__owner { align-self: flex-start; font-size: max(9px, .58cqw); }
#stage .chain__item--you .chain__owner { color: var(--you); }
#stage .chain__item--opp .chain__owner { color: var(--opp); }
@media (min-width: 701px) and (orientation: landscape) {
  #stage:not(.is-stacked) .fields,
  #stage:not(.is-stacked) .field-nav.is-open { right: 27%; }
  #stage:not(.is-stacked) .chain { left: 74%; right: 13%; top: 32.5%; bottom: auto; width: auto; height: 34.5%; max-height: none; }
}
@media (max-width: 700px), (orientation: portrait) {
  #stage .chain { position: relative; inset: auto; width: 100%; height: 180px; max-height: 350px; padding: 10px; }
  #stage .chain__items { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  #stage .chain__empty { min-height: 65px; }
}

/* At rest, every entry occupies the same card slot. */
#stage .chain { overflow: visible; padding-top: max(13px, .8cqw); }
/* The word sits on the panel's top edge, as the base plaques do, and the two
   chain controls share one row, so the card below keeps the height. */
#stage .chain__head { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 4px; }
#stage .chain__title {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%);
  padding: 2px 10px; border: 1px solid #897044; border-radius: 4px;
  background: #121d28; line-height: 1.15; white-space: nowrap;
}
#stage .chain--active .chain__title { border-color: #e4bc6c; }
#stage .chain__count {
  flex: 1 1 0; display: inline-grid; place-items: center; min-width: 0; min-height: 26px;
  padding: 4px 6px; border: 1px solid #d9b56d; border-radius: 5px; white-space: nowrap;
  background: #101b26; color: #ffe3a3; font: 600 max(11px, .7cqw)/1.2 var(--ui); cursor: pointer;
}
#stage .chain__count:focus-visible { outline: 2px solid #fff0bc; outline-offset: 3px; }
#stage .chain__approve {
  flex: 1 1 0; min-width: 0; min-height: 26px; padding: 4px 6px; border: 1px solid #e5bf72; border-radius: 5px;
  white-space: nowrap;
  background: #59431f; color: #fff0c6; font: 600 max(11px, .7cqw)/1.2 var(--ui); cursor: pointer;
}
#stage .chain__approve:disabled { opacity: .45; cursor: default; }
#stage .chain__approve:focus-visible { outline: 2px solid #fff0bc; outline-offset: 2px; }
#stage .chain__items {
  position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  grid-auto-flow: row; padding: 4px 16px 16px 4px; overflow: visible;
}
#stage .chain__items:empty { display: none; }
#stage .chain__item {
  grid-area: 1 / 1; position: relative; width: 100%; height: 100%;
  background: #101b26; z-index: var(--chain-layer);
  transform: translate(calc(var(--chain-depth) * 4px), calc(var(--chain-depth) * 4px));
  box-shadow: 0 2px 5px #0009;
}
#stage .chain__item .chain__art { pointer-events: none; }
#stage .chain:not(.chain--expanded) .chain__item:not(.chain__item--top) { pointer-events: none; }
#stage .chain__viewer { display: contents; }
#stage .chain__close { display: none; }
#stage .chain--expanded { z-index: 85; }
#stage .chain--expanded .chain__viewer {
  position: absolute; top: 0; right: 100%; width: max-content; max-width: min(70cqw, 900px);
  height: auto; max-height: 45vh; overflow: auto;
  display: block;
  padding: 16px; border: 1px solid #d9b56d; border-radius: 8px;
  background: #0b1624fa; box-shadow: 0 8px 30px #000b;
}
#stage .chain--expanded .chain__items {
  position: relative; display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: stretch; gap: 12px 26px; padding: 8px 0 0;
}
#stage .chain--expanded .chain__close {
  display: block; position: sticky; top: 0; z-index: 10; margin-left: auto;
  width: 36px; min-height: 36px; padding: 0; border: 1px solid #d9b56d;
  border-radius: 5px; background: #14212d; color: #ffe3a3;
  font: 24px/1 var(--ui); cursor: pointer;
}
#stage .chain__close:focus-visible { outline: 2px solid #fff0bc; outline-offset: 3px; }
#stage .chain--expanded .chain__item {
  flex: 0 0 clamp(95px, 10cqw, 145px); width: clamp(95px, 10cqw, 145px); height: auto;
  transform: none; padding: 5px; gap: 6px;
}
#stage .chain--expanded .chain__art { height: auto; aspect-ratio: 744 / 1039; }
#stage .chain--expanded .chain__order { display: block; font-size: 11px; }
#stage .chain--expanded .chain__item + .chain__item::before {
  content: '→'; position: absolute; left: -24px; top: 50%;
  color: #f5cf81; font: 22px/1 var(--ui); pointer-events: none;
}
@media (max-width: 700px), (orientation: portrait) {
  #stage:not(.is-stacked) .chain { left: auto; right: auto; }
  #stage .chain:not(.chain--expanded) .chain__items { width: 100px; align-self: center; }
  #stage .chain--expanded .chain__viewer { top: 100%; left: 0; right: auto; width: 100%; max-width: 100%; max-height: 55vh; box-sizing: border-box; }
}