/* Screen: wrecks (overlay) — the 🤿 Wreck board (docs/roadmap/WRECKS.md): her hunts beside hauling and how a hunt
   works on top, then three rumors (a card a depth, the water's colour deepening), then the dive gear. Also the
   port's 🤿 line (.wk-port). Calm colours: paper, sea and sand; an echo has a colour and a word, never colour alone. */

.screen--wrecks {
  gap: var(--sp-4);
}

.screen--wrecks.is-rerender,
.screen--wrecks .mate.is-still {
  animation: none;
}

.screen--wrecks .mate {
  max-width: 640px;
}

/* ── Header ────────────────────────────────────────────── */
.wk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.wk-head__sub {
  margin-top: var(--sp-1);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-soft);
}

/* ── Her hunts, and how a hunt works ───────────────────── */
.wk-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-5);
  align-items: start;
}

.wk-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid rgba(13, 48, 71, 0.06);
  box-shadow: var(--shadow-2);
}

.wk-card__title {
  font-size: var(--fs-lg);
}

.wk-mine__lead {
  font-size: var(--fs-md);
  font-weight: 900;
}

.wk-mine__perday {
  font-weight: 900;
  color: var(--gain);
}

.wk-mine__perday.is-down {
  color: var(--loss);
}

.wk-mine__haul {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--sand-50);
  border: 1px solid var(--sand-200);
  font-weight: 800;
}

.wk-mine__go {
  display: flex;
  justify-content: flex-start;
}

.wk-how {
  background: var(--sea-50);
  box-shadow: var(--shadow-1);
}

.wk-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wk-steps li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 700;
}

.wk-steps__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line);
  font-size: 1.2rem;
}

.wk-notice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--sand-100);
  border: 1px solid var(--sand-200);
  font-weight: 800;
}

.wk-notice__icon {
  font-size: 1.4rem;
}

/* ── The rumors ────────────────────────────────────────── */
.wk-section__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-lg);
}

.wk-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wk-rumor {
  --wk-water: var(--sea-200);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--card) 0 60%, color-mix(in srgb, var(--wk-water) 22%, var(--card)) 100%);
  border: 2px solid color-mix(in srgb, var(--wk-water) 55%, var(--line));
  box-shadow: var(--shadow-2);
}

.wk-rumor.is-middle { --wk-water: var(--sea-500); }
.wk-rumor.is-deep { --wk-water: var(--sea-800); }

.wk-rumor.is-done {
  opacity: 0.72;
  box-shadow: var(--shadow-1);
}

.wk-rumor__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.wk-chip {
  align-self: flex-start;
  padding: 2px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--wk-water);
  color: var(--card);
  font-size: var(--fs-sm);
  font-weight: 900;
}

.wk-rumor.is-shallow .wk-chip {
  color: var(--sea-900);
}

.wk-rumor__name {
  font-size: var(--fs-md);
  text-transform: capitalize;
}

.wk-facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.wk-needs,
.wk-reason {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--sand-50);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.wk-listen {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* An echo: its emoji, its word and its colour (never colour alone). */
.wk-echo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--sea-50);
  border: 2px solid var(--sea-300);
}

.wk-echo.is-strong {
  background: var(--accent-100);
  border-color: var(--accent-400);
}

.wk-echo.is-faint {
  background: var(--sand-50);
  border-color: var(--sand-400);
}

.wk-echo.is-none {
  background: var(--loss-bg);
  border-color: var(--line-strong);
}

.wk-echo__emoji {
  font-size: 2rem;
  line-height: 1;
}

.wk-echo__word {
  font-size: var(--fs-md);
  font-weight: 900;
}

.wk-echo__means {
  font-weight: 700;
}

.wk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
}

.wk-actions .btn {
  flex: 1 1 auto;
}

.wk-gone {
  margin-top: auto;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--loss-bg);
  font-weight: 800;
}

/* ── The dive gear ─────────────────────────────────────── */
.wk-gear__note {
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-3);
  font-weight: 700;
}

.wk-gear__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wk-gear__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--line);
}

.wk-gear__item.is-owned {
  background: var(--gain-bg);
  border-color: var(--green-300);
}

.wk-gear__emoji {
  font-size: 2rem;
  line-height: 1.1;
}

.wk-gear__name {
  font-size: var(--fs-base);
}

.wk-gear__blurb {
  font-size: var(--fs-sm);
  font-weight: 700;
}

.wk-gear__status {
  grid-column: 1 / -1;
}

.wk-gear__status .btn {
  width: 100%;
}

.wk-gear__owned {
  font-weight: 900;
  color: var(--gain);
}

.wk-foot {
  display: flex;
  justify-content: center;
}

/* ── The port's 🤿 line ────────────────────────────────── */
.wk-port {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--sea-50);
  border: 1px solid var(--sea-200);
}

.wk-port__text {
  flex: 1 1 14em;
  font-weight: 800;
}

.wk-port.is-hunted .wk-port__text {
  color: var(--ink-soft);
}

/* ── Tablets in portrait and phones: one column ─────────── */
@media (max-width: 53.75em) {
  .wk-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .wk-list,
  .wk-gear__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 37.5em) {
  .wk-card,
  .wk-rumor {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
  }

  .wk-head .wk-back,
  .wk-foot .btn,
  .wk-mine__go .btn {
    width: 100%;
  }
}