.crosswords td {
  border: 4px solid black;
  height: 6rem;
  width: 6rem;
  padding: 0;
}

.crosswords td.clue {
  background-color: rgb(147, 197, 253); /* bg-blue-300 */
}

@media print {
  .crosswords td.clue {
    background-color: #ccc;
  }

  #submitsolution {
    display: none;
  }
}

.crosswords td.merge-t, .crosswords td.merge-tt {
  border-top-style: dashed
}

.crosswords td.merge-r, .crosswords td.merge-rr {
  border-right-style: dashed
}

.crosswords td.merge-b, .crosswords td.merge-bb {
  border-bottom-style: dashed
}

.crosswords td.merge-l, .crosswords td.merge-ll {
  border-left-style: dashed
}

.crosswords td.clue > ul {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.crosswords td.clue li {
  --arrow-size: 20px;
  font-size: 30%;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-style: solid;
  border-color: black;
  border-width: 1px 0;
  position: relative;
}

.crosswords td.clue li:first-child {
  border-top-width: 0;
}

.crosswords td.clue li:last-child {
  border-bottom-width: 0;
}

.crosswords td.clue li.rr:after,
.crosswords td.clue li.rt:after,
.crosswords td.clue li.rb:after,
.crosswords td.clue li.bb:after,
.crosswords td.clue li.bl:after,
.crosswords td.clue li.br:after,

.crosswords td.clue li.ll:before,
.crosswords td.clue li.lt:before,
.crosswords td.clue li.lb:before,
.crosswords td.clue li.tt:before,
.crosswords td.clue li.tl:before,
.crosswords td.clue li.tr:before {
  content: ' ';
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  background-size: var(--arrow-size) var(--arrow-size);
  background-repeat: no-repeat;
  position: absolute;
}

.crosswords td.clue li.tt:before,
.crosswords td.clue li.tl:before,
.crosswords td.clue li.tr:before {
  top: calc(-4px - var(--arrow-size));
  left: calc(50% - var(--arrow-size)/2);
}

.crosswords td.clue li.rr:after,
.crosswords td.clue li.rt:after,
.crosswords td.clue li.rb:after {
  right: calc(-4px - var(--arrow-size));
  top: calc(50% - var(--arrow-size)/2);
}

.crosswords td.clue li.bb:after,
.crosswords td.clue li.bl:after,
.crosswords td.clue li.br:after {
  bottom: calc(-4px - var(--arrow-size));
  left: calc(50% - var(--arrow-size)/2);
}

.crosswords td.clue li.ll:before,
.crosswords td.clue li.lt:before,
.crosswords td.clue li.lb:before {
  left: calc(-4px - var(--arrow-size));
  top: calc(50% - var(--arrow-size)/2);
}

.crosswords td.clue li.tt:before {
  background-image: url(crosswords-arrows.svg#TT)
}

.crosswords td.clue li.tl:before {
  background-image: url(crosswords-arrows.svg#TL)
}

.crosswords td.clue li.tr:before {
  background-image: url(crosswords-arrows.svg#TR)
}

.crosswords td.clue li.rr:after  {
  background-image: url(crosswords-arrows.svg#RR)
}

.crosswords td.clue li.rt:after  {
  background-image: url(crosswords-arrows.svg#RT)
}

.crosswords td.clue li.rb:after  {
  background-image: url(crosswords-arrows.svg#RB)
}

.crosswords td.clue li.bb:after  {
  background-image: url(crosswords-arrows.svg#BB)
}

.crosswords td.clue li.br:after  {
  background-image: url(crosswords-arrows.svg#BR)
}

.crosswords td.clue li.bl:after  {
  background-image: url(crosswords-arrows.svg#BL)
}

.crosswords td.clue li.ll:before {
  background-image: url(crosswords-arrows.svg#LL)
}

.crosswords td.clue li.lt:before {
  background-image: url(crosswords-arrows.svg#LT)
}

.crosswords td.clue li.lb:before {
  background-image: url(crosswords-arrows.svg#LB)
}

.crosswords td.cell input[type="text"] {
  display: block;
  width: 100%;
  height: 100%;
  padding: .5rem;
  text-align: center;
  text-transform: uppercase;
}

.crosswords td.cell.dragtarget-tt input,
.crosswords td.cell.dragtarget-rr input,
.crosswords td.cell.dragtarget-bb input,
.crosswords td.cell.dragtarget-ll input {
  color: rgba(0, 0, 0, 0.2);
}

.crosswords td.cell.dragtarget-tt input {
  background-image:
        url(crosswords-arrows.svg#TL),
        url(crosswords-arrows.svg#TT),
        url(crosswords-arrows.svg#TR),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle fill='pink' cx='5' cy='5' r='5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 25%, 25%, 25%, 80%;
  background-position: 16% center, center, 84% center, center;
}

.crosswords td.cell.dragtarget-rr input {
  background-image:
        url(crosswords-arrows.svg#RT),
        url(crosswords-arrows.svg#RR),
        url(crosswords-arrows.svg#RB),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle fill='pink' cx='5' cy='5' r='5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 25%, 25%, 25%, 80%;
  background-position: center 16%, center, center 84%, center;
}

.crosswords td.cell.dragtarget-bb input {
  background-image:
        url(crosswords-arrows.svg#BL),
        url(crosswords-arrows.svg#BB),
        url(crosswords-arrows.svg#BR),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle fill='pink' cx='5' cy='5' r='5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 25%, 25%, 25%, 80%;
  background-position: 16% center, center, 84% center, center;
}

.crosswords td.cell.dragtarget-ll input {
  background-image:
        url(crosswords-arrows.svg#LT),
        url(crosswords-arrows.svg#LL),
        url(crosswords-arrows.svg#LB),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle fill='pink' cx='5' cy='5' r='5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 25%, 25%, 25%, 80%;
  background-position: center 16%, center, center 84%, center;
}

.crosswords td.cell.dragover input {
  border: 4px solid pink;
}

.crosswords td.clue li.dragstarted {
  background-color: pink;
}

.crosswords td.clue input.clueeditor {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 2px;
  background: pink;
}

.cweditor .tools > button,
.cweditor .tools > a[download] {
  border: 1px solid #888;
  background: #ddd;
  font-size: 100%;
  line-height: inherit;
  display: inline-block;
}