/* Classic tournament board: cream squares, dark-red TW, pink DW,
   dark-blue TL, light-blue DL, ivory tiles with a bevel. */

.sc-board {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 1.5px;
  background: var(--line);
  padding: 5px;
  border: 0.45em solid #12314f;
  outline: 2px solid rgba(217, 207, 174, 0.6);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  aspect-ratio: 1;
}

.sc-cell {
  position: relative;
  background: var(--cell);
  border-radius: 1.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

.sc-cell[data-p]::after {
  content: attr(data-p);
  font-size: 0.42em;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.sc-tw { background: var(--tw); }
.sc-tw::after { color: #ffe4d6; }

.sc-dw { background: var(--dw); }
.sc-dw::after { color: #6b4a12; }

.sc-tl { background: var(--tl); }
.sc-tl::after { color: #d9f2ec; }

.sc-dl { background: var(--dl); }
.sc-dl::after { color: #274b60; }

.sc-star:not(.sc-tile)::after {
  content: '✦';
  font-size: 0.95em;
  color: #6b4a12;
}

.sc-cell.sc-tile {
  background: linear-gradient(150deg, var(--tile-hi), var(--tile-lo));
  border-radius: 14%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75),
              inset 0 -2px 2px rgba(146, 105, 44, 0.5),
              0 1px 3px rgba(0, 0, 0, 0.45);
  color: var(--tile-ink);
  font-weight: 800;
}

.sc-cell.sc-tile::after { content: none; }

.sc-letter {
  font-size: 0.78em;
  line-height: 1;
  font-family: 'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;
}

/* a played blank shows its chosen letter in red, like marking it on the score pad */
.sc-blank .sc-letter { color: #a63a2b; }

.sc-value {
  position: absolute;
  right: 7%;
  bottom: 3%;
  font-size: 0.34em;
  font-weight: 800;
}

.sc-last {
  outline: 2.5px solid #e0762f;
  z-index: 1;
}

.sc-pending {
  outline: 2.5px solid var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75),
              inset 0 -2px 2px rgba(146, 105, 44, 0.5),
              0 0 10px rgba(255, 215, 94, 0.8);
  z-index: 1;
}