/* Wordgrid's own table, under table.css's bar and panel: the board in the
   middle, your rack under it. The board is cool grey; its premium squares
   teal for a letter's (light doubles, deep trebles) and violet for a word's,
   each labelled; the tiles are slate with cream letters, their values in
   the corner. A tile you have put down this turn is outlined in gold until
   it is played; the last play's tiles are ringed. */

:root {
  --cell: 36px;
  --sq: #dfe5ea; --sq-rule: #aeb9c2; --sq-ink: #3a4652;
  --dl: #a9dccf; --tl: #2f8f84; --dw: #c4b3ec; --tw: #6a46b0; --start: #c4b3ec;
  --tile: #27313b; --tile-edge: #121820; --tile-ink: #f6eedb; --tile-value: #f2c14e; --blank-ink: #9fd8ff;
  --mine: #f2c14e; --last: #ff9e5e;
}

/* Its glyphs, from its own Assets/ (as table.css says a game's must be set). */
.ico-play { -webkit-mask-image: url(../Assets/Icons/btn-play.svg); mask-image: url(../Assets/Icons/btn-play.svg); }
.ico-recall { -webkit-mask-image: url(../Assets/Icons/btn-recall.svg); mask-image: url(../Assets/Icons/btn-recall.svg); }
.ico-shuffle { -webkit-mask-image: url(../Assets/Icons/btn-shuffle.svg); mask-image: url(../Assets/Icons/btn-shuffle.svg); }
.ico-exchange { -webkit-mask-image: url(../Assets/Icons/btn-exchange.svg); mask-image: url(../Assets/Icons/btn-exchange.svg); }
.ico-pass { -webkit-mask-image: url(../Assets/Icons/btn-pass.svg); mask-image: url(../Assets/Icons/btn-pass.svg); }
.ico-deal { -webkit-mask-image: url(../Assets/Icons/btn-deal.svg); mask-image: url(../Assets/Icons/btn-deal.svg); }

.wg { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 14px 16px; }
.board-box { position: relative; }

/* The board: a square of squares. */
.board {
  display: grid; grid-template-columns: repeat(var(--n), var(--cell)); grid-auto-rows: var(--cell);
  gap: 1px; padding: 3px; background: var(--sq-rule); border-radius: 6px; border: 2px solid #1d2730;
  box-shadow: 0 8px 22px rgb(0 0 0 / .35); outline: none;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.sq {
  position: relative; display: grid; place-items: center; background: var(--sq); color: var(--sq-ink);
  font-size: calc(var(--cell) * .26); font-weight: 700; letter-spacing: -.02em; cursor: pointer; overflow: hidden;
}
.sq.dl { background: var(--dl); } .sq.tl { background: var(--tl); color: #fff; }
.sq.dw { background: var(--dw); } .sq.tw { background: var(--tw); color: #fff; }
.sq.start { background: var(--start); font-size: calc(var(--cell) * .5); font-weight: 400; }
body.no-labels .sq:not(.start) .lab { display: none; }
.sq.cursor { box-shadow: inset 0 0 0 3px var(--mine); }
.sq.cursor::after {
  content: "\25B6"; position: absolute; right: 1px; bottom: 0; font-size: calc(var(--cell) * .28); color: #b07d00;
}
.sq.cursor.down::after { content: "\25BC"; }

/* A tile, on the board or the rack. */
.tile {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%;
  background: linear-gradient(160deg, #36424e, var(--tile)); color: var(--tile-ink);
  border-radius: 4px; box-shadow: inset 0 -2px 0 var(--tile-edge), inset 0 1px 0 rgb(255 255 255 / .12);
  font: 700 calc(var(--size) * .56) / 1 system-ui, "Segoe UI", sans-serif;
}
.tile .v { position: absolute; right: 8%; bottom: 6%; font-size: calc(var(--size) * .24); color: var(--tile-value); font-weight: 600; }
.tile.blank { color: var(--blank-ink); }
.tile.blank .v { color: var(--blank-ink); opacity: .7; }
/* A blank on the rack, its letter not yet chosen: a "?" in a pale ring. */
.tile.unset { color: rgb(159 216 255 / .75); box-shadow: inset 0 0 0 2px var(--tile), inset 0 0 0 3px rgb(159 216 255 / .55), inset 0 -2px 0 var(--tile-edge); }
.sq .tile { --size: var(--cell); }
.sq.mine .tile { box-shadow: inset 0 0 0 2px var(--mine), inset 0 -2px 0 var(--tile-edge); cursor: pointer; }
.sq.last .tile { box-shadow: inset 0 0 0 2px var(--last), inset 0 -2px 0 var(--tile-edge); }

/* Your rack, and what you have put down so far, scored. */
.mine { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.preview { min-height: 1.5em; color: var(--label); font-size: 14px; text-align: center; }
.preview b { color: #fff; }
.preview .bad { color: var(--red); }
.rack {
  --size: 48px; --gap: 6px;
  display: flex; gap: var(--gap); padding: 8px 10px; min-height: calc(var(--size) + 16px);
  min-width: calc(7 * var(--size) + 6 * var(--gap) + 20px);           /* a rack's room, empty before the game */
  background: rgb(0 0 0 / .25); border-radius: 10px;
}
.rack .tile { width: var(--size); height: var(--size); cursor: pointer; border: 0; padding: 0; }
.rack .tile.chosen { transform: translateY(-6px); box-shadow: inset 0 0 0 3px var(--mine), 0 6px 10px rgb(0 0 0 / .4); }
.rack .tile.gone { visibility: hidden; }
.rack .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The game over, over the board. */
.banner {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 5;
  min-width: 240px; max-width: 90%; padding: 16px 22px; text-align: center;
  background: var(--chrome); border: 1px solid var(--accent); border-radius: 12px; box-shadow: 0 10px 28px rgb(0 0 0 / .5);
}
.banner h2 { margin: 0 0 8px; font-size: 18px; }
.banner table { margin: 0 auto; border-collapse: collapse; }
.banner td { padding: 2px 10px; text-align: left; } .banner td.n { text-align: right; font-variant-numeric: tabular-nums; }
.banner tr.won td { color: var(--accent); font-weight: 600; }
.banner td.ready { color: #7fd6aa; font-size: 12px; font-weight: 400; }
.banner .note.next { color: var(--ink); }
.banner .note { color: var(--ink-soft); font-size: 13px; margin: 8px 0 0; }

/* The dialogs' letters: the blank's choice, and the tiles to change. */
dialog .letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; max-width: 360px; }
dialog .letters button { width: 40px; height: 40px; justify-content: center; padding: 0; font-weight: 700; }
dialog .letters .tile { --size: 44px; width: 44px; height: 44px; cursor: pointer; border: 0; padding: 0; }
dialog .letters .tile[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--mine); transform: translateY(-3px); }
dialog .note { color: var(--ink-soft); font-size: 13px; margin: 0; }

/* The panel's help and the scores. */
.wg-help p, .wg-help li { font-size: 13px; line-height: 1.5; }
.wg-help .key { display: inline-block; min-width: 2.2em; padding: 0 4px; text-align: center; border-radius: 4px; font-size: 12px; font-weight: 700; color: #1b1b1b; }
.values { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; margin: 8px 0; }
.values span { font-size: 13px; } .values b { color: #fff; }

@media (max-width: 600px) {
  .wg { padding: 6px 4px 10px; }
  .rack { --size: 40px; --gap: 4px; padding: 6px; min-width: calc(7 * var(--size) + 6 * var(--gap) + 12px); }
}