/* ==========================================================================
   STATE WARS — roster.css
   The barracks: the unit gallery, the detail panel and the unlock reveal.

   The rule that shapes the whole screen: A LOCKED UNIT IS STILL SHOWN. Dimmed
   and desaturated with a lock over it, but the artwork is right there at full
   size, because you cannot want something you have never seen.
   ========================================================================== */

/* ---------- 1. The NEW badge, used in three places ------------------------ */

.badge-new {
  display: inline-block;
  padding: .12rem .42rem;
  border-radius: 2px;
  background: var(--c-gold);
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: #241703;
  vertical-align: middle;
  animation: badge-pop 1.9s var(--ease-soft) infinite;
}

@keyframes badge-pop {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 rgba(255, 194, 92, 0); }
  50%      { transform: scale(1.09); box-shadow: 0 0 calc(14px * var(--fx)) rgba(255, 194, 92, .9); }
}

.reduce-motion .badge-new { animation: none; }

.menu .badge-new { position: absolute; top: .6rem; right: 3rem; }
.badge-new--dot { margin-left: .4rem; }


/* ---------- 2. The screen ------------------------------------------------- */

.screen--roster { padding: 0; align-items: stretch; overflow: hidden; }

.roster {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* 2a. Header: where you are, and what is next */
.roster__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(.9rem, 2.6vh, 1.5rem) var(--gutter) clamp(.8rem, 2vh, 1.2rem);
  border-bottom: 1px solid rgba(127, 216, 255, .16);
  background: linear-gradient(180deg, rgba(7, 13, 26, .95), rgba(7, 13, 26, .4));
}

.roster__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  font-size: clamp(1.5rem, 4.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 calc(28px * var(--fx)) rgba(127, 216, 255, .35);
}

.roster__progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(.8rem, 2.5vw, 2rem);
  min-width: 0;
}

.rprog { display: grid; gap: .28rem; min-width: 0; }

.rprog__label {
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.rprog__value {
  font-family: var(--font-display);
  font-size: clamp(.9rem, 2.2vw, 1.15rem);
  letter-spacing: .06em;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rprog__value b { color: var(--c-gold); }

.rprog__track {
  display: block;
  height: 8px;
  border: 1px solid rgba(127, 216, 255, .28);
  border-radius: 999px;
  background: rgba(4, 7, 14, .8);
  overflow: hidden;
}

.rprog__track i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #1d5b8f, #7fd8ff);
  transition: width var(--t-slow) var(--ease-out);
}

.rprog--next .rprog__value { color: var(--c-gold); }
.rprog--next .rprog__track i { background: linear-gradient(90deg, #a06a10, #ffc25c); }

.rprog__count {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  color: var(--c-dim);
}


/* ---------- 3. The gallery ------------------------------------------------ */

.roster__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  /* max-content, NOT auto. The gallery has a definite height, and cards carry
     `overflow: hidden` — which gives them an automatic minimum size of zero, so
     auto rows will happily crush three rows of 490px cards into the 790px on
     offer and clip the artwork rather than let the list scroll. */
  grid-auto-rows: max-content;
  gap: clamp(.8rem, 2vw, 1.4rem);
  align-content: start;
  padding: clamp(1rem, 3vh, 1.8rem) var(--gutter) clamp(2rem, 6vh, 3rem);
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 216, 255, .3) transparent;
}

.roster__gallery::-webkit-scrollbar { width: 10px; }
.roster__gallery::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(127, 216, 255, .25);
}

.ucard {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  border: 1px solid rgba(127, 216, 255, .2);
  border-radius: 6px;
  background: linear-gradient(165deg, rgba(15, 30, 53, .95), rgba(9, 17, 31, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 38px -26px #000;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}

@media (hover: hover) {
  .ucard:hover {
    transform: translateY(-4px);
    border-color: rgba(127, 216, 255, .55);
    box-shadow: 0 calc(28px * var(--fx)) calc(50px * var(--fx)) -28px rgba(127, 216, 255, .8);
  }
}

/* The artwork is the point of the card, so it gets the room. */
.ucard__art {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background:
    radial-gradient(65% 55% at 50% 78%, rgba(127, 216, 255, .16), transparent 72%),
    linear-gradient(180deg, rgba(9, 20, 38, .9), rgba(6, 11, 22, .95));
}

.ucard__art img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  transition: filter var(--t-mid) var(--ease-out), opacity var(--t-mid) var(--ease-out);
}

.ucard__lockicon {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px #000);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
}

/* LOCKED: still fully visible, just clearly not yours yet. */
.ucard[data-locked="true"] .ucard__art img { filter: grayscale(.85) brightness(.5); opacity: .8; }
.ucard[data-locked="true"] .ucard__lockicon { opacity: 1; }
.ucard[data-locked="true"] .ucard__name { color: var(--c-dim); }
.ucard[data-locked="true"] { border-color: rgba(255, 255, 255, .1); }

@media (hover: hover) {
  .ucard[data-locked="true"]:hover .ucard__art img { filter: grayscale(.55) brightness(.72); }
}

/* The three that end the game get a warmer frame and a taller portrait. */
.ucard[data-major="true"] {
  border-color: rgba(255, 194, 92, .38);
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(255, 194, 92, .12), transparent 70%),
    linear-gradient(165deg, rgba(34, 26, 12, .95), rgba(12, 12, 22, .96));
}

.ucard[data-major="true"] .ucard__art {
  aspect-ratio: 1 / 1.08;
  background:
    radial-gradient(65% 55% at 50% 78%, rgba(255, 194, 92, .2), transparent 72%),
    linear-gradient(180deg, rgba(28, 20, 10, .9), rgba(8, 8, 16, .95));
}

@media (hover: hover) {
  .ucard[data-major="true"]:hover {
    border-color: rgba(255, 194, 92, .8);
    box-shadow: 0 calc(30px * var(--fx)) calc(54px * var(--fx)) -26px rgba(255, 194, 92, .7);
  }
}

.ucard__new { position: absolute; top: .55rem; left: .55rem; z-index: 2; }

.ucard__info { padding: .8rem .9rem 1rem; display: grid; gap: .3rem; }

.ucard__cat {
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.ucard__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
}

.ucard[data-major="true"] .ucard__name { color: var(--c-gold); }

.ucard__desc {
  font-size: .78rem;
  line-height: 1.45;
  color: var(--c-dim);
  min-height: 2.2em;
}

.ucard__stats { display: grid; gap: .16rem; margin-top: .2rem; }

.ucard__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.ucard__status { margin-top: .45rem; display: grid; gap: .2rem; }

.ustatus {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.ustatus--open { color: #7fe0a8; }
.ustatus--shut { color: var(--c-muted); }
.ustatus--soon { color: var(--c-gold); font-size: .52rem; letter-spacing: .14em; }

.ustatus__need {
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-dim);
}


/* ---------- 4. The detail panel ------------------------------------------- */

.udetail {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(4, 7, 14, .86);
  backdrop-filter: blur(10px);
  animation: rise 260ms var(--ease-out) both;
}

.udetail__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 3vw, 2rem);
  width: min(58rem, 100%);
  max-height: 100%;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  border: 1px solid rgba(127, 216, 255, .4);
  border-radius: 6px;
  background: linear-gradient(160deg, rgba(13, 26, 46, .98), rgba(7, 12, 22, .99));
  box-shadow: 0 40px 90px -40px #000;
  overflow: hidden;
}

.udetail__card[data-locked="true"] { border-color: rgba(255, 255, 255, .18); }

.udetail__close {
  position: absolute;
  top: .5rem;
  right: .7rem;
  z-index: 2;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--c-muted);
  transition: color var(--t-fast) var(--ease-out);
}

.udetail__close:hover { color: #fff; }

.udetail__art {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background:
    radial-gradient(60% 50% at 50% 80%, rgba(127, 216, 255, .18), transparent 72%),
    rgba(4, 8, 16, .7);
}

.udetail__art img { width: 100%; height: 100%; max-height: 26rem; object-fit: contain; }

.udetail__card[data-locked="true"] .udetail__art img { filter: grayscale(.8) brightness(.55); }

.udetail__lock {
  position: absolute;
  font-size: clamp(2.5rem, 7vw, 4rem);
  filter: drop-shadow(0 4px 10px #000);
}

.udetail__body {
  display: grid;
  gap: .5rem;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  padding-right: .4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 216, 255, .3) transparent;
}

.udetail__cat {
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.udetail__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}

.udetail__desc { font-size: .92rem; line-height: 1.5; color: var(--c-dim); }

.udetail__stats {
  display: grid;
  gap: .25rem;
  margin: .4rem 0 .2rem;
  padding: .6rem .75rem;
  border: 1px solid rgba(127, 216, 255, .16);
  border-radius: 4px;
  background: rgba(4, 8, 16, .5);
}

.ustat {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  align-items: center;
  gap: .6rem;
}

.ustat__label {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.ustat__raw {
  font-family: var(--font-mono);
  font-size: .58rem;
  color: var(--c-dim);
  justify-self: end;
}

.udetail__cost {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--c-dim);
}

.udetail__cost b { color: var(--c-gold); font-size: 1.25rem; }

.udetail__block h4 {
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: .2rem;
}

.udetail__block p { font-size: .85rem; line-height: 1.5; color: var(--c-text); }

.udetail__block ul { display: grid; gap: .15rem; }

.udetail__block li {
  position: relative;
  padding-left: .9rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--c-dim);
}

.udetail__block li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-ice);
}

.udetail__two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.udetail__two .udetail__block:last-child li::before { background: #ff8a72; }

.udetail__status {
  margin-top: .3rem;
  padding: .55rem .75rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--c-muted);
}

.udetail__status[data-open="true"] { color: #7fe0a8; }
.udetail__status b { color: var(--c-gold); font-size: .9rem; }
.udetail__have { color: var(--c-dim); }


/* ---------- 5. The unlock reveal ------------------------------------------ */

.screen--unlock { overflow: hidden; }

.unlock {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .5rem;
  text-align: center;
  padding: var(--gutter);
}

/* A slow rotating flare behind the card. */
.unlock__ray {
  position: absolute;
  top: 38%;
  left: 50%;
  width: min(46rem, 130vw);
  height: min(46rem, 130vw);
  translate: -50% -50%;
  background: conic-gradient(from 0deg,
    rgba(255, 194, 92, .22) 0deg, transparent 14deg, transparent 30deg,
    rgba(255, 194, 92, .22) 44deg, transparent 58deg, transparent 74deg,
    rgba(255, 194, 92, .22) 88deg, transparent 102deg, transparent 118deg,
    rgba(255, 194, 92, .22) 132deg, transparent 146deg, transparent 162deg,
    rgba(255, 194, 92, .22) 176deg, transparent 190deg, transparent 206deg,
    rgba(255, 194, 92, .22) 220deg, transparent 234deg, transparent 250deg,
    rgba(255, 194, 92, .22) 264deg, transparent 278deg, transparent 294deg,
    rgba(255, 194, 92, .22) 308deg, transparent 322deg, transparent 338deg,
    rgba(255, 194, 92, .22) 352deg, transparent 360deg);
  mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  animation: ray-spin 22s linear infinite;
  pointer-events: none;
  opacity: .85;
}

@keyframes ray-spin { to { rotate: 360deg; } }
.reduce-motion .unlock__ray { animation: none; }

.unlock__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  font-size: clamp(1.4rem, 5vw, 2.6rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-gold);
  text-shadow: 0 0 calc(40px * var(--fx)) rgba(255, 194, 92, .8);
  animation: rise 460ms var(--ease-out) both;
}

/* The card flips to reveal the unit. */
.unlock__card {
  position: relative;
  width: min(19rem, 62vw);
  aspect-ratio: 1 / 1.1;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  transition: transform 720ms var(--ease-out);
}

.unlock__card.is-open { transform: rotateY(0deg); }
.reduce-motion .unlock__card { transition-duration: 200ms; }

.unlock__face {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.unlock__face--front {
  border: 2px solid rgba(255, 194, 92, .8);
  background:
    radial-gradient(60% 50% at 50% 80%, rgba(255, 194, 92, .28), transparent 72%),
    linear-gradient(170deg, rgba(30, 24, 12, .98), rgba(8, 10, 20, .99));
  box-shadow: 0 0 calc(60px * var(--fx)) -10px rgba(255, 194, 92, .8);
}

.unlock__face--front img { width: 94%; height: 94%; object-fit: contain; }

.unlock__face--back {
  transform: rotateY(180deg);
  border: 2px solid rgba(127, 216, 255, .5);
  background:
    repeating-linear-gradient(45deg, rgba(127, 216, 255, .07) 0 10px, transparent 10px 20px),
    linear-gradient(170deg, #0f1e35, #070d1a);
}

.unlock__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  font-size: clamp(1.8rem, 6vw, 3rem);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 calc(34px * var(--fx)) rgba(127, 216, 255, .5);
  animation: rise 500ms 640ms var(--ease-out) both;
}

.unlock__note {
  max-width: 30rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--c-dim);
  animation: rise 500ms 760ms var(--ease-out) both;
}

.unlock__actions {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .6rem;
  animation: rise 500ms 880ms var(--ease-out) both;
}

.unlock__actions .btn--huge { width: auto; min-width: 13rem; margin-top: 0; }
.unlock__actions .btn--back { margin-top: 0; min-width: 10rem; }


/* ---------- 6. Small screens ---------------------------------------------- */

@media (max-width: 800px) {
  .roster__top { grid-template-columns: 1fr auto; row-gap: .8rem; }
  .roster__progress { grid-column: 1 / -1; }
  .roster__gallery { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
  .udetail__card { grid-template-columns: 1fr; }
  .udetail__art { max-height: 34vh; }
  .udetail__art img { max-height: 34vh; }
}

@media (max-width: 520px) {
  /* The header was eating a third of a phone screen. The gallery is the
     screen; the header only has to say where you are. */
  .roster__top { padding-block: .7rem .6rem; gap: .6rem; }
  .roster__top .panel__kicker { display: none; }
  .roster__title { font-size: 1.3rem; }
  .roster__progress { gap: .5rem; grid-template-columns: 1fr; }
  .rprog__value { font-size: .82rem; }

  .roster__gallery { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .ucard__desc, .ucard__stats { display: none; }
  .ucard__info { padding: .55rem .6rem .7rem; }
  .udetail__two { grid-template-columns: 1fr; }
}