/* ═══════════════════════════════════════════════════════════
   THE CROSSWORD DESK — board.css · the printed grid
   ═══════════════════════════════════════════════════════════ */
.board-frame{position:relative;width:100%;max-width:660px;margin:0 auto}
.board{
  display:grid;gap:0;width:100%;aspect-ratio:1;
  background:var(--ink);
  border:2px solid var(--ink);
  box-shadow:var(--shadow), inset 0 0 0 1px var(--ink);
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
}
.cell{
  position:relative;border:none;padding:0;margin:0;
  font-size:inherit;color:inherit;
  background:var(--sheet);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;
  color:var(--ink);
  /* font-size set inline by JS so cells scale with the grid */
  outline:none;cursor:pointer;
  transition:background-color .1s ease;
}
.cell.black{background:var(--ink);cursor:default}
.cell .num{
  position:absolute;top:1px;left:2px;
  font-family:var(--font-mono);font-weight:500;
  font-size:calc(var(--cell-fs, 16px) * .42);line-height:1;
  color:var(--red);pointer-events:none;
}
.cell .glyph{transform:translateY(-2%);letter-spacing:0}
.cell.reveal .glyph{color:var(--red-deep);font-style:italic}
.cell.sel{box-shadow:inset 0 0 0 3px var(--red)}
.cell.in-word{background:#E4E9F0}
.cell.in-word.sel{background:#D6E0EC}
.cell.same-num{background:#E6E0EA}
.cell.err{color:var(--red);background:#EAE3E4}
.cell.err.sel{background:#DDD6E0}
.cell.just-inked{animation:inkPop .18s ease}
@keyframes inkPop{0%{transform:scale(.86)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.cell:focus-visible{box-shadow:inset 0 0 0 3px var(--red)}

/* checked sweep flash */
@keyframes sweepFlash{0%,100%{background:var(--sheet)}50%{background:#E4E9F0}}
.cell.swept{animation:sweepFlash .5s ease}

/* ── completion stamp ─────────────────────────────────── */
.stamp{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(230,224,234,.72);backdrop-filter:blur(1.5px);
  animation:msgIn .35s ease both;z-index:5;
}
.stamp-inner{
  border:4px double var(--red);color:var(--red);
  padding:18px 34px;display:flex;flex-direction:column;align-items:center;gap:4px;
  transform:rotate(-7deg);
  animation:stampIn .45s cubic-bezier(.2,1.6,.4,1) both;
  background:rgba(250,248,251,.88);
}
@keyframes stampIn{from{transform:rotate(-7deg) scale(2.2);opacity:0}to{transform:rotate(-7deg) scale(1);opacity:1}}
.stamp-word{font-family:var(--font-display);font-weight:900;font-size:clamp(34px,6vw,54px);letter-spacing:.12em;text-transform:uppercase}
.stamp-sub{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}

/* ── mobile: board stays square & tappable ────────────── */
@media (max-width:1080px){
  .board-frame{max-width:min(92vw, 560px)}
}