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

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

/* ---------- the word being built ---------- */

.wb-word {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: calc(var(--gu) * 10);
  width: min(100%, calc(var(--gu) * 76));
  padding: calc(var(--gu) * 0.5) calc(var(--gu) * 2);
  color: var(--navy, #062b63);
  font-size: calc(var(--gu) * 7);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  background: #fff;
  border: calc(var(--gu) * 0.32) solid rgba(107, 74, 143, 0.22);
  border-radius: calc(var(--gu) * 2.4);
  transition: border-color 120ms ease, background 120ms ease;
}

.wb-word__ghost {
  color: rgba(82, 107, 142, 0.5);
  font-size: calc(var(--gu) * 2.8);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wb-word.is-good { border-color: var(--green, #0ea85a); background: rgba(14, 168, 90, 0.09); }
.wb-word.is-bad { border-color: var(--coral, #f15f6d); background: rgba(241, 95, 109, 0.08); }

.wb-dots { display: flex; justify-content: center; flex: 0 0 auto; }

/* ---------- the seven letters ---------- */

.wb-tiles {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(var(--gu) * 0.9);
  flex: 0 0 auto;
  width: 100%;
}

.wb-tile {
  min-width: 0;
  min-height: max(44px, calc(var(--gu) * 11));
  padding: 0;
  color: var(--navy, #062b63);
  font: inherit;
  font-size: calc(var(--gu) * 4);
  font-weight: 800;
  text-transform: uppercase;
  background: #fff;
  border: calc(var(--gu) * 0.32) solid rgba(6, 43, 99, 0.16);
  border-radius: calc(var(--gu) * 1.6);
  cursor: pointer;
  transition: transform 100ms ease, border-color 100ms ease;
}

/* The required letter is ringed rather than merely coloured, so the rule
   survives for anyone who cannot pick it out by colour. */
.wb-tile.is-required {
  color: #fff;
  background: #6b4a8f;
  border-color: #6b4a8f;
  box-shadow: 0 0 0 calc(var(--gu) * 0.5) rgba(107, 74, 143, 0.28);
}

.wb-tile:hover { border-color: rgba(107, 74, 143, 0.7); }
.wb-tile:active { transform: scale(0.94); }

.wb-tile:focus-visible,
.wb-act:focus-visible {
  outline: calc(var(--gu) * 0.5) solid #6b4a8f;
  outline-offset: calc(var(--gu) * 0.25);
}

/* ---------- clear and enter ---------- */

.wb-acts {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: calc(var(--gu) * 1.4);
  flex: 0 0 auto;
  width: 100%;
}

.wb-act {
  min-height: max(44px, calc(var(--gu) * 9));
  color: var(--navy, #062b63);
  font: inherit;
  font-size: calc(var(--gu) * 3);
  font-weight: 800;
  background: #fff;
  border: calc(var(--gu) * 0.32) solid rgba(6, 43, 99, 0.16);
  border-radius: 999px;
  cursor: pointer;
}

.wb-act--go {
  color: #fff;
  background: #6b4a8f;
  border-color: #6b4a8f;
}

.wb-act--go:disabled {
  color: rgba(255, 255, 255, 0.72);
  background: #b0a3bf;
  border-color: #b0a3bf;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .wb-tile, .wb-word { transition: none; }
}