/* Horde Shift — final field-guide layout
   Single late-loaded stylesheet for the Survivor and Blessing sections. */

/* ---------- Survivor dossier ---------- */
.survivor-dossier{
  grid-template-columns:minmax(360px,.84fr) minmax(0,1.16fr);
  min-height:560px;
}
.survivor-visual{
  min-height:560px;
  padding:24px 0 20px;
}
.survivor-portrait-frame{
  width:min(70%,430px);
  max-width:430px;
  aspect-ratio:1/1;
  box-sizing:border-box;
  padding:16px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(18,29,36,.92),rgba(8,13,17,.5));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 22px 46px rgba(0,0,0,.22);
}
.survivor-portrait-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  image-rendering:pixelated;
  transform:scale(.9);
  filter:saturate(1) contrast(1.05) drop-shadow(0 18px 28px rgba(0,0,0,.38));
}
.survivor-dossier.is-changing .survivor-portrait-frame img{
  opacity:.22;
  transform:translateX(8px) scale(.88);
}
.survivor-copy{padding:46px clamp(28px,4vw,58px)}
.survivor-bio,.passive-readout{max-width:650px}

/* ---------- Survivor selector ----------
   Every card is a true square. The old stretched grid-row behavior is disabled
   explicitly so a 5-column row can never become a tall empty rectangle. */
.survivor-selector{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-auto-rows:auto;
  align-items:start;
  gap:1px;
  background:rgba(255,255,255,.05);
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.survivor-choice{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:1/1;
  align-self:start;
  padding:0;
  overflow:hidden;
  border:0;
  background:#0d151a;
  color:#e7ece9;
  text-align:left;
  cursor:pointer;
}
.survivor-choice img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  aspect-ratio:auto;
  padding:0;
  margin:0;
  object-fit:cover;
  object-position:center center;
  image-rendering:pixelated;
  transform:scale(1);
  filter:saturate(.78) brightness(.86) contrast(1.05);
  transition:filter .2s ease,transform .28s ease;
}
.survivor-choice::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,transparent 58%,rgba(5,8,10,.22) 70%,rgba(5,8,10,.96) 100%);
  pointer-events:none;
}
.survivor-choice span{
  position:absolute;
  z-index:2;
  left:12px;
  right:12px;
  bottom:10px;
  display:block;
  padding:0;
  overflow:hidden;
  color:#e7ece9;
  font:650 15px/1.05 var(--display);
  letter-spacing:.02em;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.survivor-choice::after{
  content:"";
  position:absolute;
  z-index:3;
  left:0;
  right:100%;
  bottom:0;
  height:2px;
  background:var(--gold);
  transition:right .2s ease;
}
.survivor-choice:hover img,
.survivor-choice[aria-selected="true"] img{
  filter:saturate(1) brightness(1) contrast(1.06);
  transform:scale(1.025);
}
.survivor-choice[aria-selected="true"]{
  box-shadow:inset 0 0 0 1px rgba(215,171,88,.5);
}
.survivor-choice[aria-selected="true"]::after{right:0}
.survivor-choice:focus-visible{outline:1px solid var(--cyan);outline-offset:-2px}

/* ---------- Blessings: one restrained final layout ---------- */
.blessing-library{grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr);gap:28px}
.blessing-detail{min-height:620px;padding:34px;top:94px}
.blessing-icon-stage{width:172px;height:172px;margin-bottom:28px}
.blessing-detail h3{font-size:clamp(44px,4.2vw,68px)}
.blessing-specs{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
.blessing-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:760px}
.blessing-card{min-height:112px}

@media(max-width:1180px){
  .survivor-dossier{grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr)}
  .survivor-portrait-frame{width:min(74%,400px);max-width:400px}
  .survivor-selector{grid-template-columns:repeat(5,minmax(0,1fr))}
  .blessing-library{grid-template-columns:minmax(320px,.86fr) minmax(0,1.14fr)}
  .blessing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .survivor-dossier{grid-template-columns:1fr;min-height:0}
  .survivor-visual{min-height:440px;padding:18px 0 16px}
  .survivor-portrait-frame{width:min(72%,380px);max-width:380px}
  .survivor-selector{
    display:flex;
    gap:1px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    background:transparent;
  }
  .survivor-choice{
    flex:0 0 150px;
    width:150px;
    aspect-ratio:1/1;
    scroll-snap-align:start;
  }
  .survivor-choice span{font-size:14px}
  .blessing-library{grid-template-columns:1fr}
  .blessing-detail{position:relative;top:auto;min-height:0}
  .blessing-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:640px}
}
@media(max-width:620px){
  .survivor-visual{min-height:370px}
  .survivor-portrait-frame{width:80%;max-width:330px;padding:12px}
  .survivor-copy{padding:32px 20px}
  .survivor-choice{flex-basis:132px;width:132px}
  .survivor-choice span{left:9px;right:9px;bottom:8px;font-size:13px}
  .blessing-detail{padding:24px 19px}
  .blessing-icon-stage{width:132px;height:132px;margin-bottom:24px}
  .blessing-detail h3{font-size:50px}
  .blessing-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:620px}
  .blessing-card p{display:none}
}