body { gap: 14px; }

/* scoreboard chips */
#stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
#time.low { color: var(--red); }

/* ---- the 4x4 board ---- */
#board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: var(--surface-2);
  padding: 12px;
  border-radius: 16px;
  box-shadow: 0 10px 40px var(--shadow);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.bcell {
  width: var(--cell, 66px);
  height: var(--cell, 66px);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: calc(var(--cell, 66px) * 0.42);
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 6px var(--shadow);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, transform 0.08s;
}
.bcell:hover { opacity: 1; background: var(--surface-3); }
/* cells in the current chain */
.bcell.sel {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
}
/* the most recent cell in the chain — tap it again to submit */
.bcell.sel-last {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px var(--accent), 0 2px 6px var(--shadow);
}
/* brief flash when a word scores */
.bcell.scored {
  background: var(--green);
  color: #fff;
  border-color: transparent;
}

@media (max-width: 420px) {
  #board { --cell: 60px; }
}

/* board frozen after time-up */
#board.over { opacity: 0.65; }
#board.over .bcell { cursor: default; }

/* ---- current chain readout ---- */
#current {
  min-height: 1.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- type-a-word entry ---- */
#entry {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#typeInput {
  padding: 10px 14px;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--shadow);
  width: min(220px, 60vw);
}
#typeInput:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#entry button {
  padding: 10px 18px;
  font-size: 0.95rem;
}
#clearSel {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px var(--shadow);
}
#clearSel:hover { opacity: 1; background: var(--surface-3); }

/* ---- found words list ---- */
#found {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  justify-content: center;
  max-width: min(460px, 92vw);
  padding: 0;
}
#found li {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.85rem;
}
#found .fw {
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
#found .fp {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--green);
}