/* Kaamko games: Shabda word guess (docs/49_GAMES.md). Linked from src/pages/games/shabda.astro. */
.gshabda {
  --sb-correct: var(--ice-palette-forest-700);
  --sb-present: var(--ice-palette-terracotta-600);
  --sb-near: var(--ice-palette-navy-700);
  --sb-absent: var(--ice-palette-slate-600);
  --sb-on: var(--ice-palette-white, #fff);
  --sb-key: var(--ice-color-surface-muted);
  max-width: 520px;
  margin-inline: auto;
}
[data-theme='dark'] .gshabda {
  --sb-correct: var(--ice-palette-forest-700);
  --sb-present: var(--ice-palette-terracotta-800);
  --sb-near: var(--ice-palette-navy-700);
  --sb-absent: var(--ice-palette-graphite-800);
  --sb-key: var(--ice-palette-graphite-750);
}
.gshabda__toggles { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.gshabda__group { display: inline-flex; gap: 0; }
.gshabda__group .game-btn { border-radius: 0; }
.gshabda__group .game-btn:first-child { border-radius: 6px 0 0 6px; }
.gshabda__group .game-btn:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.gshabda__mode { margin: 0 0 .75rem; font-size: .9rem; color: var(--ice-color-text-muted, currentColor); }
.gshabda .game-btn[hidden] { display: none; }

.gshabda__board {
  --tile: min(58px, calc((100vw - 4rem) / var(--len, 5)), 6.4vh);
  display: grid;
  gap: 6px;
  justify-content: center;
  margin-bottom: 1rem;
}
.gshabda__board[lang='ne'] { --tile: min(64px, calc((100vw - 4rem) / 4), 6vh); }
.gshabda__row { display: grid; grid-template-columns: repeat(var(--len, 5), var(--tile)); gap: 6px; }
.gshabda__tile {
  display: grid;
  place-items: center;
  height: var(--tile);
  border: 2px solid var(--ice-color-border);
  border-radius: 4px;
  background: var(--ice-color-surface);
  color: var(--ice-color-on-surface);
  font: 700 calc(var(--tile) * .5)/1 var(--ice-font-primary, inherit);
  text-transform: none;
}
.gshabda__board[lang='ne'] .gshabda__tile { font-family: "Noto Sans Devanagari", "Mukta", "Nirmala UI", var(--ice-font-primary, sans-serif); font-weight: 600; font-size: calc(var(--tile) * .44); }
.gshabda__tile.is-filled { border-color: var(--ice-color-border-strong, var(--ice-color-on-surface)); }
.gshabda__tile.is-correct,
.gshabda__tile.is-present,
.gshabda__tile.is-near,
.gshabda__tile.is-absent { color: var(--sb-on); }
.gshabda__tile.is-correct { background: var(--sb-correct); border-color: var(--sb-correct); }
.gshabda__tile.is-present { background: var(--sb-present); border-color: var(--sb-present); }
.gshabda__tile.is-near { background: var(--sb-near); border-color: var(--sb-near); }
.gshabda__tile.is-absent { background: var(--sb-absent); border-color: var(--sb-absent); }
/* The near mark also gets a dotted edge, so it does not rely on colour alone. */
.gshabda__tile.is-near { outline: 2px dashed var(--sb-on); outline-offset: -6px; }
.gshabda__tile.is-present { border-style: dashed; border-color: var(--sb-on); }
.gshabda__row.is-shake { animation: gshabda-shake .3s; }
@keyframes gshabda-shake {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) { .gshabda__row.is-shake { animation: none; } }

.gshabda__keyboard { display: grid; gap: 6px; user-select: none; -webkit-user-select: none; }
.gshabda__krow { display: flex; justify-content: center; gap: 5px; }
.gshabda__key {
  flex: 1 1 0;
  max-width: 44px;
  min-width: 0;
  height: 52px;
  padding: 0;
  border: 1px solid var(--ice-color-border);
  border-radius: 5px;
  background: var(--sb-key);
  color: var(--ice-color-on-surface);
  font: 700 1rem/1 var(--ice-font-primary, inherit);
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.gshabda__key--wide { flex-grow: 1.6; max-width: 76px; font-size: .75rem; }
.gshabda__keyboard.is-ne .gshabda__key { height: 46px; font-family: "Noto Sans Devanagari", "Mukta", "Nirmala UI", var(--ice-font-primary, sans-serif); font-size: 1.15rem; font-weight: 500; text-transform: none; }
.gshabda__keyboard.is-ne .gshabda__key--wide { font-size: 1.2rem; max-width: 96px; }
.gshabda__key.is-correct { background: var(--sb-correct); border-color: var(--sb-correct); color: var(--sb-on); }
.gshabda__key.is-present { background: var(--sb-present); border-color: var(--sb-present); color: var(--sb-on); }
.gshabda__key.is-absent { background: var(--sb-absent); border-color: var(--sb-absent); color: var(--sb-on); opacity: .7; }
.gshabda__key:focus-visible { outline: 3px solid var(--ice-color-action); outline-offset: 1px; }
.gshabda__legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .75rem 0 0; padding: 0; list-style: none; font-size: .85rem; }
.gshabda__legend li { display: inline-flex; align-items: center; gap: .35rem; }
.gshabda__legend .gshabda__tile { --tile: 22px; width: 22px; height: 22px; font-size: .7rem; border-width: 1px; }
.gshabda__legend .gshabda__tile.is-near { outline-offset: -4px; outline-width: 1px; }