/* Doc Lexicon player */
.doc-lexicon-page {
  --games-ink: #183242;
  --lexicon-accent: #087f73;
  --lexicon-accent-soft: #e6f4f2;
  --lexicon-gap: .35rem;
  --lexicon-key: #d8dee4;
}

.doc-lexicon-card {
  border-top: 5px solid var(--lexicon-accent);
}

.doc-lexicon-score {
  color: var(--lexicon-accent);
  flex: 0 0 auto;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Stage progress; solved stages collapse into these chips */
.lexicon-progress {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin: 0 0 .5rem;
}

.lexicon-chip {
  border: 1px solid var(--games-rule);
  border-radius: 999px;
  color: var(--games-muted);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
  padding: .45rem .75rem;
  white-space: nowrap;
}

.lexicon-chip.is-active {
  background: var(--lexicon-accent);
  border-color: var(--lexicon-accent);
  color: #fff;
}

.lexicon-chip.is-solved {
  background: var(--games-success-soft);
  border-color: #b7dec3;
  color: var(--games-success);
}

.lexicon-chip.is-failed {
  background: var(--games-danger-soft);
  border-color: #f4b8b3;
  color: var(--games-danger);
}

/* Tile key */
.lexicon-legend {
  color: var(--games-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .78rem;
  gap: .35rem .9rem;
  justify-content: center;
  margin-bottom: .6rem;
}

.lexicon-legend > span {
  align-items: center;
  display: inline-flex;
  gap: .3rem;
}

.lexicon-mini {
  display: inline-block;
  height: .85rem;
  width: .85rem;
}

.lexicon-mini.is-correct {
  background: var(--games-tile-correct);
  border-radius: .2rem;
}

.lexicon-mini.is-present {
  background: var(--games-tile-present);
  border-radius: 50%;
}

.lexicon-mini.is-absent {
  background: var(--games-tile-absent);
  box-shadow: inset 0 0 0 .2rem var(--games-tile-absent), inset 0 0 0 .5rem var(--games-tile-absent-ink);
}

/* Board. Tiles fit the stage length across the width, and six rows plus
   the keyboard within the screen height. */
.lexicon-play {
  position: relative;
}

.doc-lexicon-board {
  --lexicon-length: 4;
  --lexicon-tile: min(
    3rem,
    calc((100vw - 1rem - (var(--lexicon-length) - 1) * var(--lexicon-gap)) / var(--lexicon-length)),
    max(2.25rem, calc((100svh - 28rem) / 6 - var(--lexicon-gap)))
  );
  display: grid;
  gap: var(--lexicon-gap);
  justify-content: center;
}

.doc-lexicon-board[hidden] {
  display: none;
}

.lexicon-row {
  display: flex;
  gap: var(--lexicon-gap);
  justify-content: center;
}

.lexicon-tile {
  border: 2px solid var(--games-tile-empty);
  display: grid;
  font-size: calc(var(--lexicon-tile) * .48);
  font-weight: 800;
  height: var(--lexicon-tile);
  place-items: center;
  text-transform: uppercase;
  width: var(--lexicon-tile);
}

.lexicon-tile.is-filled {
  border-color: #6f7c86;
}

.lexicon-tile.is-cursor {
  border-color: var(--lexicon-accent);
  box-shadow: 0 0 0 2px var(--lexicon-accent-soft);
}

.lexicon-tile.is-correct {
  background: var(--games-tile-correct);
  border-color: var(--games-tile-correct);
  border-radius: .55rem;
  color: var(--games-tile-correct-ink);
}

.lexicon-tile.is-present {
  background: var(--games-tile-present);
  border-color: var(--games-tile-present);
  border-radius: 50%;
  color: var(--games-tile-present-ink);
}

.lexicon-tile.is-absent {
  background: var(--games-tile-absent);
  border-color: var(--games-tile-absent);
  color: var(--games-tile-absent-ink);
}

.lexicon-row.is-shake {
  animation: lexicon-shake .4s ease;
}

@keyframes lexicon-shake {
  20%, 60% { transform: translateX(-.4rem); }
  40%, 80% { transform: translateX(.4rem); }
}

/* Invalid-guess toast, shown just above the grid (over the legend) */
.lexicon-toast {
  background: var(--games-ink);
  border-radius: .5rem;
  box-shadow: 0 .5rem 1.25rem rgba(20, 30, 45, .25);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  left: 50%;
  max-width: calc(100% - 1rem);
  padding: .55rem .9rem;
  position: absolute;
  text-align: center;
  bottom: calc(100% - .25rem);
  transform: translateX(-50%);
  width: max-content;
  z-index: 6;
}

.lexicon-toast[hidden] {
  display: none;
}

/* On-screen keyboard */
.lexicon-keyboard {
  display: grid;
  gap: .4rem;
  margin: .75rem auto 0;
  max-width: 32rem;
  touch-action: manipulation;
  user-select: none;
}

.lexicon-keyboard[hidden] {
  display: none;
}

.lexicon-keyboard-row {
  display: flex;
  gap: .3rem;
  justify-content: center;
}

.lexicon-key {
  align-items: center;
  background: var(--lexicon-key);
  border: 0;
  border-radius: .4rem;
  color: var(--games-ink);
  display: inline-flex;
  flex: 1 1 0;
  font-size: 1rem;
  font-weight: 700;
  height: 3.25rem;
  justify-content: center;
  max-width: 2.9rem;
  min-width: 0;
  padding: 0;
}

.lexicon-key--wide {
  flex-grow: 1.55;
  font-size: .78rem;
  max-width: 4.5rem;
  text-transform: uppercase;
}

.lexicon-key:hover:not(:disabled) {
  filter: brightness(.94);
}

.lexicon-key:focus-visible {
  outline: 3px solid var(--lexicon-accent);
  outline-offset: 1px;
}

.lexicon-key:disabled {
  cursor: default;
  opacity: .6;
}

.lexicon-key.is-correct {
  background: var(--games-tile-correct);
  color: var(--games-tile-correct-ink);
}

.lexicon-key.is-present {
  background: var(--games-tile-present);
  border-radius: 999px;
  color: var(--games-tile-present-ink);
}

.lexicon-key.is-absent {
  background: var(--games-tile-absent);
  color: var(--games-tile-absent-ink);
}

/* Visually hidden text-input fallback; it appears only when focused. */
.lexicon-form {
  text-align: center;
}

.lexicon-form input:focus {
  margin-top: .75rem;
  text-transform: uppercase;
}

/* Signed-out preview */
.doc-lexicon-page[data-locked="true"] .doc-lexicon-board,
.doc-lexicon-page[data-locked="true"] .lexicon-keyboard {
  filter: blur(1.5px);
}

.lexicon-overlay {
  background: rgba(255, 255, 255, .55);
}

/* Results */
.lexicon-results.is-failed {
  background: var(--games-surface);
  border-color: var(--games-rule);
}

.lexicon-results.is-failed .games-results-kicker {
  color: var(--games-tile-reveal);
}

.lexicon-reveal {
  margin-top: .75rem;
}

.lexicon-answer {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lexicon-answer-row {
  display: flex;
  gap: .35rem;
  margin-top: .35rem;
}

.lexicon-answer-tile {
  align-items: center;
  background: var(--games-tile-reveal);
  border-radius: .55rem;
  color: #fff;
  display: flex;
  font-size: 1.2rem;
  font-weight: 800;
  height: 2.6rem;
  justify-content: center;
  width: 2.6rem;
}

.lexicon-results .games-results-stats dd {
  white-space: nowrap;
}

.lexicon-results .games-results-stats small {
  color: var(--games-muted);
  font-size: .7em;
  font-weight: 600;
}

.lexicon-result-stages li + li {
  margin-top: .25rem;
}

.lexicon-message:empty {
  display: none;
}

@media (max-width: 575.98px) {
  /* Full-bleed on phones, like the Sudoku board, for wider keys. */
  .doc-lexicon-page {
    --lexicon-gap: .3rem;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .doc-lexicon-page .games-hero--compact {
    margin-bottom: .5rem !important;
    padding-bottom: .5rem;
  }

  .doc-lexicon-card {
    box-shadow: none !important;
  }

  .lexicon-key {
    height: 3.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lexicon-row.is-shake {
    animation: none;
  }
}

.lexicon-legend[hidden] {
  display: none;
}