/* Scanword */
.scanword { --cell: 70px; display: inline-flex; flex-direction: column; align-items: center; }
.scanword__title { min-height: 38px; margin: 10px 0 30px; max-width: 700px; font-size: 16px; line-height: 19px; text-align: center; }
.scanword__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-auto-rows: var(--cell);
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  user-select: none; -webkit-user-select: none;
}
.scanword__cell {
  position: relative;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #fff;
  overflow: visible;
}
.scanword__letter {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cell) * .43); text-transform: uppercase;
  cursor: pointer; touch-action: manipulation;
}
.scanword__cell[data-word="true"] .scanword__letter { background: var(--teal-soft); }
.scanword__cell[data-focus="true"] .scanword__letter { box-shadow: inset 0 0 0 4px var(--teal); }
.scanword__cell[data-done="true"] .scanword__letter { color: var(--teal); }

/* clue cell */
.scanword__cell--clue { display: flex; flex-direction: column; background: var(--gray); }
.scanword__clue {
  flex: 1 1 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 2px;
  font-size: clamp(7px, calc(var(--cell) * .145), 11px); line-height: 1.1;
  text-align: center; overflow: hidden; overflow-wrap: anywhere; hyphens: auto;
  color: #000; background: var(--gray);
  cursor: pointer; touch-action: manipulation;
}
.scanword__clue + .scanword__clue { border-top: 1px solid rgba(0, 0, 0, .55); }
.scanword__clue[data-selected="true"] { background: var(--teal); }
.scanword__clue[data-done="true"] { color: #5d636b; }

/* arrows (drawn in the first letter cell of every word) */
.scanword__arrow { position: absolute; z-index: 2; background: 50% / contain no-repeat; pointer-events: none; }
.scanword__arrow[data-dir="left-right"]   { left: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 8px;  background-image: url(../img/arrow-left-right.svg); }
.scanword__arrow[data-dir="left-bottom"]  { left: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 10px; background-image: url(../img/arrow-left-bottom.svg); }
.scanword__arrow[data-dir="right-bottom"] { right: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 10px; background-image: url(../img/arrow-right-bottom.svg); }
.scanword__arrow[data-dir="top-bottom"]   { top: 0; left: 50%; transform: translateX(-50%); width: 8px; height: 12px;  background-image: url(../img/arrow-top-bottom.svg); }
.scanword__arrow[data-dir="top-right"]    { top: 0; left: 50%; transform: translateX(-50%); width: 10px; height: 12px; background-image: url(../img/arrow-top-right.svg); }
.scanword__arrow[data-dir="bottom-right"] { bottom: 0; left: 50%; transform: translateX(-50%); width: 10px; height: 12px; background-image: url(../img/arrow-bottom-right.svg); }

@media (max-width: 1024px) {
  .scanword__title { display: none; }
  .scanword__arrow[data-dir="left-right"]   { width: 9px; height: 5px; }
  .scanword__arrow[data-dir="left-bottom"],
  .scanword__arrow[data-dir="right-bottom"] { width: 9px; height: 7px; }
  .scanword__arrow[data-dir="top-bottom"]   { width: 5px; height: 9px; }
  .scanword__arrow[data-dir="top-right"],
  .scanword__arrow[data-dir="bottom-right"] { width: 7px; height: 9px; }
  .scanword__cell[data-focus="true"] .scanword__letter { box-shadow: inset 0 0 0 3px var(--teal); }
}