/* ==========================================================================
   STATE WARS — lab.css
   The Battle Lab: fifty levels as one dense, scannable table.

   Deliberately plainer than the rest of the game. This is a tool, not a
   screen a player is meant to enjoy — the job is to make a difficulty spike
   visible at a glance, so the verdict column carries the colour and
   everything else stays out of the way.
   ========================================================================== */

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

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

.lab__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: clamp(.8rem, 2.4vh, 1.3rem) var(--gutter) .8rem;
  border-bottom: 1px solid rgba(127, 216, 255, .16);
  background: linear-gradient(180deg, rgba(7, 13, 26, .95), rgba(7, 13, 26, .4));
}

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

.lab__actions { display: flex; align-items: center; gap: .6rem; }
.lab__actions .btn { width: auto; min-width: 13rem; margin-top: 0; }

.lab__bar {
  height: 3px;
  background: rgba(4, 7, 14, .8);
}

.lab__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #1d5b8f, #7fd8ff);
  transition: width 120ms linear;
}

.lab__summary {
  padding: .55rem var(--gutter);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  color: var(--c-muted);
  border-bottom: 1px solid rgba(127, 216, 255, .1);
}

.lab__summary b { font-family: var(--font-display); font-size: .95rem; }
.lab-ok   { color: #7fe0a8; }
.lab-easy { color: var(--c-gold); }
.lab-bad  { color: #ff8a72; }

/* ---------- the table ----------------------------------------------------- */

.lab__table {
  min-height: 0;
  overflow: auto;
  padding: 0 var(--gutter) 2rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 216, 255, .3) transparent;
}

.lab__table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .76rem;
}

.lab__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .5rem .5rem .4rem;
  text-align: left;
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: #070d1a;
  border-bottom: 1px solid rgba(127, 216, 255, .22);
  white-space: nowrap;
}

.labrow td {
  padding: .34rem .5rem;
  border-bottom: 1px solid rgba(127, 216, 255, .07);
  vertical-align: middle;
  color: var(--c-dim);
}

.labrow:hover td { background: rgba(127, 216, 255, .05); }

.labrow__n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  width: 2.4rem;
}

.labrow__state {
  font-family: var(--font-mono);
  letter-spacing: .1em;
  color: var(--c-ice);
  width: 3rem;
}

/* Tinted to match the shop's battlefield panel, so the level you are hunting
   for is findable by colour before you read a single row. */
.labrow__ground {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  color: var(--ground-tint, var(--c-dim));
}

.labrow__ground[data-terrain="plains"] { --ground-tint: #9fd97f; }
.labrow__ground[data-terrain="forest"] { --ground-tint: #5fbf7a; }
.labrow__ground[data-terrain="mud"]    { --ground-tint: #c39a63; }
.labrow__ground[data-terrain="hills"]  { --ground-tint: #d9c37f; }
.labrow__ground[data-terrain="river"]  { --ground-tint: #6fc4e8; }
.labrow__ground[data-terrain="bridge"] { --ground-tint: #7fe0ff; }
.labrow__ground[data-terrain="pass"]   { --ground-tint: #c8ccd6; }
.labrow__ground[data-terrain="rocky"]  { --ground-tint: #b0b6c2; }
.labrow__ground[data-terrain="mixed"]  { --ground-tint: #d59ae0; }

.labrow__form { white-space: nowrap; color: var(--c-text); }
.labrow__boss { color: var(--c-gold); font-size: .6rem; letter-spacing: .14em; }

.labrow__force {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .04em;
  min-width: 16rem;
}

.labrow__ai {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.labrow__rating {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  white-space: nowrap;
}

.labrow__rating[data-stars="1"] { color: #7fe0a8; }
.labrow__rating[data-stars="2"] { color: var(--c-ice); }
.labrow__rating[data-stars="3"] { color: var(--c-gold); }
.labrow__rating[data-stars="4"] { color: #ffa06a; }
.labrow__rating[data-stars="5"] { color: #ff6a5a; }

.labrow__purse {
  font-family: var(--font-display);
  color: var(--c-gold);
  text-align: right;
  width: 4rem;
}

/* The column the whole screen exists for. */
.labrow__verdict {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  white-space: nowrap;
  min-width: 11rem;
}

.labrow__verdict[data-tone="none"] { color: rgba(255, 255, 255, .2); }
.labrow__verdict[data-tone="easy"] { color: var(--c-gold); }
.labrow__verdict[data-tone="ok"]   { color: var(--c-ice); }
.labrow__verdict[data-tone="good"] { color: #7fe0a8; }
.labrow__verdict[data-tone="hard"] { color: #ffa06a; }
.labrow__verdict[data-tone="bad"]  { color: #ff6a5a; }

.labrow__detail {
  color: var(--c-muted);
  letter-spacing: .06em;
}

.labrow__go { text-align: right; white-space: nowrap; }
.labrow__go .chip { padding: .3rem .6rem; font-size: .56rem; }
.labrow__go .chip + .chip { margin-left: .3rem; }

@media (max-width: 900px) {
  .labrow__force, .labrow__ai { display: none; }
  .lab__table thead th:nth-child(4),
  .lab__table thead th:nth-child(5) { display: none; }
}

@media (max-width: 560px) {
  .labrow__form, .labrow__purse { display: none; }
  .lab__table thead th:nth-child(3),
  .lab__table thead th:nth-child(7) { display: none; }
  .lab__actions .btn { min-width: 9rem; }
}