/* Neuriosity — Wildlife Flash playfield.
   Shared chrome lives in ../_shared/game-kit.css */

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

.wf-band {
  margin: 0;
  flex: 0 0 auto;
  color: var(--ink-soft, #526b8e);
  font-size: calc(var(--gu) * 2.8);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wf-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

/* Four across, three down. The "where" question makes every square a target,
   so the grid is sized for thumbs, not just for eyes. */
.wf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: calc(var(--gu) * 0.9);
  width: 100%;
  height: 100%;
  max-width: calc(var(--gu) * 118);
}

.wf-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: calc(var(--gu) * 0.4);
  background: #fff;
  border: calc(var(--gu) * 0.3) solid rgba(0, 55, 70, 0.14);
  border-radius: calc(var(--gu) * 1.2);
}

.wf-cell.is-live { cursor: pointer; font: inherit; }
.wf-cell.is-live:hover { border-color: #003746; }
.wf-cell.is-live:focus-visible { outline: calc(var(--gu) * 0.5) solid #003746; outline-offset: calc(var(--gu) * 0.2); }

/* The square the binding question is asking about. */
.wf-cell.is-marked {
  background: rgba(0, 55, 70, 0.1);
  border-color: #003746;
  border-style: dashed;
  border-width: calc(var(--gu) * 0.55);
}

.wf-cell.is-right { background: rgba(14, 168, 90, 0.2); border-color: var(--green, #0ea85a); }
.wf-cell.is-wrong { background: rgba(241, 95, 109, 0.2); border-color: var(--coral, #f15f6d); }
.wf-cell.is-answer { border-color: var(--green, #0ea85a); border-style: dashed; }
.wf-cell.is-recall { background: rgba(0, 55, 70, 0.06); }

.wf-art {
  width: 100%;
  height: 100%;
  max-height: calc(var(--gu) * 14);
  fill: currentColor;
}

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

.wf-picks {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: calc(var(--gu) * 1.2);
  flex: 0 0 auto;
  width: 100%;
}

.wf-picks:empty { display: none; }

.wf-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gu) * 0.2);
  flex: 0 1 calc(var(--gu) * 22);
  min-width: 44px;
  min-height: 44px;
  padding: calc(var(--gu) * 0.8) calc(var(--gu) * 0.5);
  color: var(--navy, #062b63);
  font: inherit;
  background: #fff;
  border: calc(var(--gu) * 0.35) solid rgba(0, 55, 70, 0.2);
  border-radius: calc(var(--gu) * 1.4);
  cursor: pointer;
}

.wf-pick .wf-art { max-height: calc(var(--gu) * 11); }

.wf-pick span {
  font-size: calc(var(--gu) * 2.3);
  font-weight: 700;
  letter-spacing: -0.01em;
}

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

.wf-pick.is-right { background: rgba(14, 168, 90, 0.18); border-color: var(--green, #0ea85a); }
.wf-pick.is-wrong { background: rgba(241, 95, 109, 0.18); border-color: var(--coral, #f15f6d); }
.wf-pick.is-answer { border-color: var(--green, #0ea85a); border-style: dashed; }

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