/* Letter Bridge overview and player. The player also loads doc-lexicon.css for
   the shared keyboard, toast, and text-input styles. */
.letter-bridge-page {
  --games-ink: #173d47;
  --bridge-accent: #0b6e80;
  --bridge-accent-soft: #e3f4f6;
  --bridge-deck: #f3f7f8;
  --lexicon-accent: var(--bridge-accent);
  --lexicon-accent-soft: var(--bridge-accent-soft);
  --lexicon-key: #d8dee4;
  /* Piece levels: saturated fills, each with a darker edge and readable ink. */
  --bridge-plank: #ff922b;
  --bridge-plank-edge: #d9480f;
  --bridge-plank-ink: #2b1400;
  --bridge-beam: #1971c2;
  --bridge-beam-edge: #0b4a8a;
  --bridge-beam-ink: #fff;
  --bridge-arch: #7048e8;
  --bridge-arch-edge: #4527a0;
  --bridge-arch-ink: #fff;
  --bridge-span: linear-gradient(135deg, #ffe066, #fab005 55%, #f08c00);
  --bridge-span-edge: #b35c00;
  --bridge-span-ink: #3d2400;
}

/* Overview */
.letter-bridge-intro-mark { color: var(--bridge-accent); font-size: 3rem; line-height: 1; margin-bottom: 1rem; }
.letter-bridge-tier-key { display: flex; flex-wrap: wrap; gap: .45rem; }
.letter-bridge-tier-key span { border-radius: 999px; font-size: .78rem; font-weight: 700; padding: .3rem .7rem; }
.letter-bridge-tier-key span:nth-child(1) { background: var(--bridge-plank); color: var(--bridge-plank-ink); }
.letter-bridge-tier-key span:nth-child(2) { background: var(--bridge-beam); color: var(--bridge-beam-ink); }
.letter-bridge-tier-key span:nth-child(3) { background: var(--bridge-arch); color: var(--bridge-arch-ink); }
.letter-bridge-tier-key span:nth-child(4) { background: var(--bridge-span); color: var(--bridge-span-ink); }
.letter-bridge-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }

/* Player card, matching Doc Lexicon's */
.letter-bridge-card { border-top: 5px solid var(--bridge-accent); }
.letter-bridge-score { color: var(--bridge-accent); flex: 0 0 auto; font-size: 1.1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.letter-bridge-timer { display: inline-block; font-variant-numeric: tabular-nums; font-weight: 700; margin-right: .6rem; min-width: 2.6rem; text-align: right; white-space: nowrap; }
.letter-bridge-timer.is-low { color: var(--games-danger); }

/* Anchors: the two letters every word must start and end with */
.letter-bridge-anchors { align-items: center; display: flex; gap: .75rem; justify-content: center; margin-bottom: .75rem; }
.letter-bridge-anchor { align-items: center; display: flex; flex-direction: column; gap: .2rem; }
.letter-bridge-anchor-label { color: var(--games-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.letter-bridge-anchor-tile { background: var(--bridge-accent); border-radius: .55rem; box-shadow: 0 .25rem 0 #07505d; color: #fff; display: grid; font-size: 1.7rem; font-weight: 800; height: 3.2rem; place-items: center; width: 3.2rem; }
.letter-bridge-anchors.is-hidden .letter-bridge-anchor-tile { background: var(--games-tile-empty); box-shadow: none; color: #fff; }
.letter-bridge-anchor-span { align-self: flex-end; border-top: 4px dotted var(--bridge-accent); flex: 1 1 auto; margin-bottom: 1.5rem; max-width: 10rem; }
.letter-bridge-anchors.is-hidden .letter-bridge-anchor-span { border-color: var(--games-tile-empty); }

/* Built words, newest first */
.letter-bridge-play { position: relative; }
.letter-bridge-build { background: var(--bridge-deck); border-radius: .6rem; max-height: min(16rem, 34svh); min-height: 7rem; overflow: auto; padding: .5rem; }
.letter-bridge-build[hidden] { display: none; }
.letter-bridge-intro { padding: 1rem .5rem; text-align: center; }
.letter-bridge-intro[hidden], .letter-bridge-empty[hidden] { display: none; }
.letter-bridge-empty { color: var(--games-muted); margin: 0; padding-top: 2.25rem; text-align: center; }
.letter-bridge-stack { display: flex; flex-direction: column; gap: .35rem; margin: 0; }
.letter-bridge-stack:empty { display: none; }
.letter-bridge-piece { align-items: center; border-bottom: 4px solid; border-radius: .45rem; display: flex; gap: .5rem; justify-content: space-between; min-height: 2.6rem; padding: .35rem .75rem; }
.letter-bridge-piece strong { letter-spacing: .08em; overflow-wrap: anywhere; }
.letter-bridge-piece span { font-size: .72rem; font-weight: 700; white-space: nowrap; }
.letter-bridge-piece.is-new { animation: letter-bridge-drop .35s ease-out; }
.letter-bridge-piece--plank, .letter-bridge-chip--plank { background: var(--bridge-plank); border-color: var(--bridge-plank-edge); color: var(--bridge-plank-ink); }
.letter-bridge-piece--beam, .letter-bridge-chip--beam { background: var(--bridge-beam); border-color: var(--bridge-beam-edge); color: var(--bridge-beam-ink); }
.letter-bridge-piece--arch, .letter-bridge-chip--arch { background: var(--bridge-arch); border-color: var(--bridge-arch-edge); color: var(--bridge-arch-ink); }
.letter-bridge-piece--span, .letter-bridge-chip--span { background: var(--bridge-span); border-color: var(--bridge-span-edge); color: var(--bridge-span-ink); }
.letter-bridge-piece--beam { margin-inline: -.1rem; }
.letter-bridge-piece--arch { border-radius: 1.3rem 1.3rem .45rem .45rem; }
.letter-bridge-piece--span { border-radius: 1.3rem 1.3rem .45rem .45rem; box-shadow: 0 0 0 2px #fff inset, 0 .2rem .6rem rgba(240, 140, 0, .35); }

@keyframes letter-bridge-drop {
  from { opacity: 0; transform: translateY(-.5rem) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* Word builder: typed letters as tiles, with the first and last letters
   marked when they match the anchors. */
.letter-bridge-builder { margin: .75rem 0 0; position: relative; }
.letter-bridge-toast { bottom: calc(100% + .35rem); }
.letter-bridge-word {
  --bridge-tile: min(2.6rem, calc((100vw - 2.5rem - 11 * .25rem) / 12));
  align-items: center;
  display: flex;
  gap: .25rem;
  justify-content: center;
  min-height: calc(var(--bridge-tile) + 4px);
}
.letter-bridge-word[hidden] { display: none; }
.letter-bridge-tile { border: 2px solid var(--games-tile-empty); display: grid; font-size: calc(var(--bridge-tile) * .5); font-weight: 800; height: var(--bridge-tile); place-items: center; text-transform: uppercase; width: var(--bridge-tile); }
.letter-bridge-tile.is-filled { border-color: #6f7c86; }
.letter-bridge-tile.is-cursor { border-color: var(--bridge-accent); box-shadow: 0 0 0 2px var(--bridge-accent-soft); }
.letter-bridge-tile.is-anchor { background: var(--bridge-accent-soft); border-color: var(--bridge-accent); border-radius: .45rem; color: var(--bridge-accent); }
.letter-bridge-word.is-shake { animation: lexicon-shake .4s ease; }
.letter-bridge-word-hint { color: var(--games-muted); font-size: .85rem; }
.letter-bridge-keyboard[hidden] { display: none; }

/* Signed-out preview */
.letter-bridge-page[data-locked="true"] .letter-bridge-build,
.letter-bridge-page[data-locked="true"] .letter-bridge-word,
.letter-bridge-page[data-locked="true"] .letter-bridge-keyboard { filter: blur(1.5px); }
.letter-bridge-overlay { background: rgba(255, 255, 255, .55); }

/* Results, grouped by level */
.letter-bridge-results.is-empty { background: var(--games-surface); border-color: var(--games-rule); }
.letter-bridge-results.is-empty .games-results-kicker { color: var(--games-muted); }
.letter-bridge-levels { display: grid; gap: .6rem; margin-bottom: 1rem; }
.letter-bridge-level { background: #fff; border-radius: .5rem; padding: .55rem .65rem; }
.letter-bridge-level-head { align-items: center; display: flex; flex-wrap: wrap; gap: .25rem .6rem; justify-content: space-between; margin-bottom: .4rem; }
.letter-bridge-level-name { align-items: center; display: inline-flex; font-weight: 700; gap: .45rem; }
.letter-bridge-level-swatch { border-radius: .25rem; display: inline-block; height: .9rem; width: .9rem; }
.letter-bridge-level-total { color: var(--games-muted); font-size: .82rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.letter-bridge-level-words { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.letter-bridge-chip { border-bottom: 3px solid; border-radius: .35rem; font-size: .8rem; font-weight: 700; letter-spacing: .05em; padding: .15rem .5rem; }
.letter-bridge-level.is-empty .letter-bridge-level-head { margin-bottom: 0; }
.letter-bridge-level.is-empty { opacity: .7; }

@media (max-width: 575.98px) {
  .letter-bridge-choices { grid-template-columns: 1fr; }
  /* Full-bleed on phones, like Doc Lexicon, for wider keys. */
  .letter-bridge-page:has(.letter-bridge-card) { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .letter-bridge-page .games-hero--compact { margin-bottom: .5rem !important; padding-bottom: .5rem; }
  .letter-bridge-card { box-shadow: none !important; }
  .letter-bridge-piece span { font-size: .66rem; }
  .letter-bridge-anchor-tile { font-size: 1.45rem; height: 2.8rem; width: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .letter-bridge-piece.is-new, .letter-bridge-word.is-shake { animation: none; }
}