/* The Gold Below wiki's main page: the banner (the hoard's own backdrop, the logo before the vault door, the six
   heroes on its floor) and the portal's boxes. */
.banner { position: relative; height: 400px; overflow: hidden; background: url(/img/bg-hoard.png) center -470px / 1728px auto no-repeat #0a0806; box-shadow: inset 0 -90px 70px -40px var(--void), inset 0 2px 0 #000; }
.banner-art { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); display: grid; justify-items: center; margin: 0; text-shadow: none; }
.banner-logo { width: 300px; height: 201px; max-width: none; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .55)); }
.banner-title { display: block; position: relative; z-index: 0; margin: -10px 0 0; padding: 12px 34px 16px; font: 40px/1 var(--disp); color: var(--gold-hi); text-shadow: 0 4px 0 #000; letter-spacing: 3px; max-width: none; }
.banner-title::before { content: ''; position: absolute; inset: 0; z-index: -1; border-style: solid; border-width: 30px 30px 33px; border-image: url(/wiki/img/ui/plate.png) 10 10 11 10 fill stretch; image-rendering: pixelated; }
.banner-cast { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 14px; width: max-content; }
.banner-cast img { max-width: none; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .5)); }
.banner-cast .gap { width: 330px; }
.is-main .frame { padding-top: 20px; }
.portal-top { container-type: inline-size; margin-bottom: 20px; }
.portal { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 20px; align-items: start; }
.portal-main, .portal-rail { display: grid; gap: 20px; min-width: 0; }
.box { min-width: 0; padding: 0 6px 6px; border: 20px solid transparent; border-image: url(/wiki/img/ui/card.png) 10 11 11 10 fill / 20px 22px 22px 20px stretch; }
.box > :last-child { margin-bottom: 0; }
.box .band { position: relative; z-index: 0; margin: -6px -10px 14px; padding: 9px 12px 11px; border: 0; box-shadow: none; text-align: center; font: 20px/1.1 var(--disp); color: var(--gold-hi); text-shadow: 0 2px 0 #000; }
.box .band::before { content: ''; position: absolute; inset: 0; z-index: -1; border-style: solid; border-width: 20px 20px 22px; border-image: url(/wiki/img/ui/plate.png) 10 10 11 10 fill stretch; image-rendering: pixelated; }
.box .band a:hover { color: var(--hi); }
.box h3 { margin: 14px 0 8px; color: var(--dim); }
.box h3:first-of-type { margin-top: 0; }
.box p { font-size: 16px; }
.hero-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
@container (min-width: 900px) { .hero-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.hero-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-top { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; margin-bottom: 4px; }
.hero-top .niche { align-self: stretch; height: 136px; min-height: 0; margin-bottom: 6px; padding-top: 6px; }
.hero-top:hover .niche { box-shadow: inset 0 0 0 2px var(--gold); }
.hero-top strong { font: 20px/1.1 var(--pix); color: var(--gold-hi); text-shadow: none; }
.hero-top em { font: 600 15px/1.2 var(--cond); font-style: normal; color: var(--dim); }
.mini { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 4px; font: 600 15px/1.1 var(--cond); color: var(--text); text-decoration: none; overflow: hidden; }
.mini:hover { background: var(--panel-hi); color: var(--hi); }
.mini.setname { color: var(--set); }
.mini img { flex: none; }
.depth { margin-bottom: 10px; background: var(--slot); box-shadow: inset 0 0 0 2px var(--slot-line); }
.depth-band { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; height: 92px; padding: 8px 12px; text-decoration: none; background-size: 864px auto; background-position: center -84px;
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -50px 36px -22px rgba(10, 8, 6, .95); }
.depth-band.strip-reliquary { background-position: center -92px; }
.depth-band.strip-hoard { background-position: center -352px; }
.depth-band strong { font: 20px/1.1 var(--disp); color: var(--hi); text-shadow: 0 2px 0 #000; }
.depth-band span { font: 20px/1.1 var(--pix); color: var(--gold-hi); text-shadow: 0 2px 0 #000; white-space: nowrap; }
.depth-band:hover { box-shadow: inset 0 0 0 2px var(--gold), inset 0 -50px 36px -22px rgba(10, 8, 6, .8); }
.depth-foes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 4px; padding: 10px 10px 8px; }
.foe-mini { display: flex; align-items: flex-end; justify-content: center; min-width: 76px; min-height: 84px; padding: 2px; }
.foe-mini:hover { background: var(--panel-hi); box-shadow: inset 0 0 0 2px var(--gold); }
.cells-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sets-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.sys-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.cell.tall .prop { display: flex; align-items: flex-end; justify-content: center; height: 58px; }
.news { padding-left: 20px; font-size: 16px; }
.more { margin: 0; font-size: 15px; color: var(--off); }
.rail-ledger { font: 20px/1.25 var(--pix); }
.rail-ledger a { text-decoration: none; }

@media (max-width: 1100px) { .portal { grid-template-columns: 1fr; } .portal-rail { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (max-width: 899px) {
  .banner { height: 336px; background-size: 1296px auto; background-position: center -336px; }
  .banner-art { top: 10px; }
  .banner-logo { width: 200px; height: 134px; }
  .banner-title { font-size: 20px; margin-top: -6px; padding: 9px 22px 11px; }
  .banner-title::before { border-width: 20px 20px 22px; }
  .banner-cast { gap: 0; bottom: 2px; }
  .banner-cast img { margin: 0 -15px; }
  .banner-cast .gap { display: none; }
  .box { padding: 0 2px 4px; border-width: 16px 12px 18px; border-image-width: 20px 22px 22px 20px; }
  .box .band { margin: -4px -4px 12px; }
  .hero-row { gap: 12px 6px; }
  .cells-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foe-mini { min-width: 64px; }
}
@media (max-width: 400px) { .hero-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }