/* Neuriosity — Word Chain playfield.
   Shared chrome lives in ../_shared/game-kit.css */

.wc-game .neu-status:empty { display: none; }

.wc-goal {
  margin: 0;
  flex: 0 0 auto;
  color: var(--ink-soft, #526b8e);
  font-size: calc(var(--gu) * 3);
  font-weight: 600;
}

.wc-goal strong {
  color: #3d2a63;
  font-size: calc(var(--gu) * 4);
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* ---------- the chain so far ---------- */

.wc-chain {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--gu) * 0.8);
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.wc-word {
  padding: calc(var(--gu) * 0.9) calc(var(--gu) * 1.8);
  color: var(--navy, #062b63);
  font-size: calc(var(--gu) * 3.4);
  font-weight: 800;
  letter-spacing: 0.08em;
  background: #fff;
  border: calc(var(--gu) * 0.3) solid rgba(61, 42, 99, 0.2);
  border-radius: calc(var(--gu) * 1.2);
}

.wc-word.is-here {
  color: #fff;
  background: #3d2a63;
  border-color: #3d2a63;
}

.wc-word--target {
  color: #3d2a63;
  background: rgba(61, 42, 99, 0.1);
  border-style: dashed;
}

.wc-word.is-done {
  color: #fff;
  background: var(--green, #0ea85a);
  border-color: var(--green, #0ea85a);
}

.wc-link {
  color: rgba(61, 42, 99, 0.45);
  font-size: calc(var(--gu) * 3.2);
  font-weight: 800;
  line-height: 1;
}

/* ---------- the four candidates ---------- */

.wc-picks {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--gu) * 1.4);
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.wc-pick {
  flex: 1 1 calc(var(--gu) * 20);
  min-width: 44px;
  min-height: 44px;
  max-width: calc(var(--gu) * 30);
  padding: calc(var(--gu) * 1) calc(var(--gu) * 1.2);
  color: var(--navy, #062b63);
  font: inherit;
  font-size: calc(var(--gu) * 4.2);
  font-weight: 800;
  letter-spacing: 0.1em;
  background: #fff;
  border: calc(var(--gu) * 0.4) solid rgba(61, 42, 99, 0.24);
  border-radius: calc(var(--gu) * 1.6);
  cursor: pointer;
}

.wc-pick:hover { border-color: #3d2a63; }
.wc-pick:active { transform: scale(0.97); }
.wc-pick:focus-visible { outline: calc(var(--gu) * 0.5) solid #3d2a63; outline-offset: calc(var(--gu) * 0.2); }

.wc-pick.is-wrong {
  color: var(--ink-soft, #526b8e);
  background: rgba(241, 95, 109, 0.14);
  border-color: var(--coral, #f15f6d);
  text-decoration: line-through;
  cursor: default;
}

.wc-missing {
  margin: 0;
  max-width: calc(var(--gu) * 70);
  color: var(--ink-soft, #526b8e);
  font-size: calc(var(--gu) * 3.2);
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .wc-pick { transition: none; }
  .wc-pick:active { transform: none; }
}