/* Word Grid. Board squares scale with the board's width (container query units), so 13 squares fit a 360px phone
   (about 25px each) and grow on wider screens. Every class starts with wg-. */
.wg {
  --wg-frame: #0d2b1d;
  --wg-plain: #e9e1c6;
  --wg-plain-ink: #75674a;
  --wg-dl: #b7d9ee;
  --wg-dl-ink: #1f4f6e;
  --wg-tl: #3a7fc0;
  --wg-dw: #f4b8b0;
  --wg-dw-ink: #7a2620;
  --wg-tw: #c93b36;
  --wg-tile: #fbf3dc;
  --wg-tile-ink: #1b1b1b;
  --wg-blank-ink: #b0412e;
  --wg-last: #fff0b3;
  --wg-pend: #ffcf5a;
}

/* scores */
.wg-seats { grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr)); gap: .4rem; margin-bottom: .5rem; }
.wg-seats .seat { padding: .3rem .5rem; font-size: .9rem; }
.wg-seats .wg-bag { background: rgba(0, 0, 0, .12); }
.wg-last-line { margin: 0 0 .45rem; color: var(--muted); }

/* board */
.wg-boardwrap { container-type: inline-size; width: 100%; max-width: 36rem; margin: 0 auto; }
.wg-board {
  display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 1px; padding: 2px;
  background: var(--wg-frame); border-radius: 8px; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.wg-cell {
  position: relative; aspect-ratio: 1 / 1; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 2px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--wg-plain); color: var(--wg-plain-ink);
  font: 700 7px/1 var(--body); font-size: 2.2cqw; -webkit-tap-highlight-color: transparent;
}
button.wg-cell { cursor: pointer; }
button.wg-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; z-index: 2; }
.wg-cell.wg-dl { background: var(--wg-dl); color: var(--wg-dl-ink); }
.wg-cell.wg-tl { background: var(--wg-tl); color: #fff; }
.wg-cell.wg-dw { background: var(--wg-dw); color: var(--wg-dw-ink); }
.wg-cell.wg-tw { background: var(--wg-tw); color: #fff; }
.wg-lab { pointer-events: none; letter-spacing: -.02em; }
.wg-cell.wg-center .wg-lab { font-size: 15px; font-size: 5.2cqw; color: var(--wg-dw-ink); }

.wg-tile {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 2px;
  background: var(--wg-tile); color: var(--wg-tile-ink); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); pointer-events: none;
}
.wg-tile .wg-l { font-size: 15px; font-size: 4.5cqw; font-weight: 800; line-height: 1; }
.wg-tile .wg-v { position: absolute; right: 1px; bottom: 1px; font-size: 6px; font-size: 1.9cqw; font-weight: 700; line-height: 1; }
.wg-tile.wg-blank .wg-l { color: var(--wg-blank-ink); }
.wg-cell.wg-last .wg-tile { background: var(--wg-last); box-shadow: inset 0 0 0 2px #d9a400; }
.wg-cell.wg-pend .wg-tile { background: var(--wg-pend); box-shadow: inset 0 0 0 2px #1b1b1b; }
.wg-cell.wg-cursor { background: var(--gold); }
.wg-arrow { font-size: 15px; font-size: 4.8cqw; font-weight: 800; color: #1b1b1b; pointer-events: none; }

/* rack */
.wg-rack { display: flex; justify-content: center; gap: 5px; margin: .8rem 0 .3rem; min-height: 50px; }
.wg-rtile, .wg-rslot { flex: 1 1 0; min-width: 0; max-width: 52px; height: 50px; border-radius: 8px; }
.wg-rtile {
  position: relative; display: flex; align-items: center; justify-content: center; padding: 0; border: 0;
  background: var(--wg-tile); color: var(--wg-tile-ink); font: 800 1.45rem/1 var(--body);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 2px 5px rgba(0, 0, 0, .35); transition: transform .12s;
}
button.wg-rtile { cursor: pointer; }
.wg-rtile .wg-v { position: absolute; right: 4px; bottom: 4px; font-size: .68rem; font-weight: 700; }
.wg-rtile.wg-blank { border: 2px dashed #b9a77a; }
.wg-rtile.wg-sel { transform: translateY(-6px); outline: 3px solid var(--gold); outline-offset: 1px; }
.wg-rslot { border: 2px dashed var(--line); }

/* buttons */
.wg-hint { margin: .2rem 0 0; text-align: center; }
.wg-actions { margin: .5rem 0; }
.wg-actions .btn { min-width: 0; padding: .5rem .8rem; }

/* blank letter picker */
.wg-picker-back {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .55);
}
.wg-picker { width: 100%; max-width: 26rem; margin: 0; background: var(--felt-dark); }
.wg-picker-title { font-weight: 700; }
.wg-letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-bottom: .75rem; }
.wg-pick {
  min-height: 44px; border: 0; border-radius: 8px; background: var(--cream); color: var(--ink);
  font: 800 1.15rem/1 var(--body); cursor: pointer;
}
.wg-pick:active { background: var(--gold); }