/* The board and its tiles, shared by the Play page and the home page's small board. */

.board { position: relative; flex: none; user-select: none; -webkit-user-select: none; touch-action: none; }
.tile {
  position: absolute; left: 0; top: 0; width: var(--side); height: var(--side);
  padding: 0; border: 0; background: transparent center / 100% 100% no-repeat; cursor: pointer;
  -webkit-tap-highlight-color: transparent; will-change: transform;
  transition: filter 0.15s;
}
.tile.is-dim { filter: brightness(0.82) saturate(0.9); }
.tile.is-lit { z-index: 2; }
.burst { position: absolute; left: 0; top: 0; background: center / contain no-repeat; pointer-events: none; z-index: 3; }


/* Floating words: the points a group took, and the bonuses. */
.float {
  position: fixed; z-index: 20; pointer-events: none; transform: translate(-50%, -50%);
  font: 1.7rem/1 var(--display); color: #fff; letter-spacing: 0.02em;
  text-shadow: 0 3px 0 var(--blue-deep), 0 0 14px rgba(0, 0, 0, 0.35); white-space: nowrap;
}
.float.bonus { font-size: clamp(2rem, 6vw, 3.6rem); color: #ffe64d; text-shadow: 0 4px 0 #b36b00, 0 0 20px rgba(0,0,0,0.35); }

/* The keyboard cursor. */
.board:focus { outline: none; }
.board:focus-visible { box-shadow: 0 0 0 4px rgba(63, 143, 214, 0.55); border-radius: 6px; }
.cursor { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; border: 3px solid #fff; border-radius: 8px; box-shadow: 0 0 0 3px var(--blue), 0 0 14px rgba(0, 0, 0, 0.4); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }