/* The crossword: the printable (maker.php, scripts/maker.js) and the online game (index.php, scripts/play.js). The grid
   is a CSS grid of squares sized by --cell; numbered squares carry the clue number in their corner. */
/* each square's edge is an outline centred on its border, so a shared edge is one line and no square shifts (a negative
   margin overlap moved squares out of line wherever a word stood on its own) */
.ec-cw-grid { display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-auto-rows: var(--cell); justify-content: center; margin: 4px auto; padding: 1px; }
.ec-cw-cell { position: relative; display: grid; place-items: center; outline: 2px solid #222; outline-offset: -1px; background: #fff;
	font: 600 calc(var(--cell) * .55) "Poppins", "Lato", sans-serif; color: #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ec-cw-num { position: absolute; top: 1px; left: 2px; font: 700 calc(var(--cell) * .3) / 1 "Lato", sans-serif; color: #222; }
.ec-cw-void { background: transparent; }
.ec-cw-clues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; align-items: start; }
.ec-cw-clues h2, .ec-cw-clues h3 { margin: 0 0 6px; font: 700 15px "Lato", sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #333; }
.ec-cw-clues ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 15px; color: #111; }
.ec-cw-clues li { display: flex; gap: 8px; align-items: flex-start; break-inside: avoid; }
.ec-cw-clues li > b { flex: none; min-width: 1.4em; text-align: right; }
.ec-cw-cpic { flex: none; max-width: 90px; max-height: 64px; border-radius: 4px; object-fit: contain; }
.ec-cw-len { color: #555; white-space: nowrap; }
.ec-cw-keylist ol { font-family: "Poppins", "Lato", sans-serif; }
.ec-cw-bank { border: 1.5px solid #333; border-radius: 6px; padding: 8px 12px; break-inside: avoid; }
.ec-cw-bank h2, .ec-cw-bank h3 { margin: 0 0 4px; font: 700 14px "Lato", sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #333; }
.ec-cw-bank p { margin: 0; font-size: 15px; line-height: 1.7; color: #111; }
@media (max-width: 575px) { .ec-cw-clues { grid-template-columns: minmax(0, 1fr); } }
@media print {
	.ec-cw-grid { break-inside: avoid; }
	.ec-cw-clues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the online game (index.php): the current clue above the grid (it stays in view on phones), the grid, and the clue
   lists beside it (under it on phones); the current word, square and clue are blue (green would read as "right") */
.ec-cw { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 20px; align-items: start; }
.ec-cw[hidden] { display: none; }
.ec-cw-main { min-width: 0; display: grid; gap: 10px; }
.ec-cw-current { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 52px; padding: 8px 14px 10px; border-radius: 12px;
	background: #e6f0fb; border: 1px solid #b9d3f2; color: var(--ec-ink); font-size: 17px; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.ec-cw-keys { margin: 8px 0 0; font-size: 14px; color: #5b6573; }
@media (pointer: coarse) { .ec-cw-keys { display: none; } }
.ec-cw-current-label { flex: 0 0 100%; font: 700 12px "Lato", sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #1f5fae; }
.ec-cw-current > b { flex: none; color: #1f5fae; }
.ec-cw-current .ec-cw-cpic { max-height: 56px; max-width: 80px; }
.ec-cw-board { position: relative; overflow-x: auto; padding: 2px; }
.ec-cw-play { width: max-content; margin: 0 auto; } /* centred while it fits, scrolls from its left edge when it doesn't */
.ec-cw-play .ec-cw-cell { cursor: pointer; outline-color: #3a3d46; user-select: none; }
.ec-cw-play .ec-cw-cell.is-word { background: #d9e8fb; } /* blue, not green: green would look like "right" */
.ec-cw-play .ec-cw-cell.is-cur { background: #ffe58a; box-shadow: inset 0 0 0 2px #1f5fae; }
.ec-cw-play .ec-cw-cell.is-wrong .ec-cw-letter { color: #c62828; }
.ec-cw-play .ec-cw-cell.is-wrong { background-image: linear-gradient(to top right, transparent 46%, rgba(198, 40, 40, .55) 48%, rgba(198, 40, 40, .55) 52%, transparent 54%); }
.ec-cw-play .ec-cw-cell.is-shown .ec-cw-letter { color: #1f5fae; }
.ec-cw-letter { font: 600 calc(var(--cell) * .55) "Poppins", "Lato", sans-serif; text-transform: uppercase; }
.ec-cw-input { position: absolute; z-index: 1; opacity: 0; border: 0; padding: 0; margin: 0; background: transparent; color: transparent; caret-color: transparent;
	font-size: 16px; /* 16px or more, or iPhones zoom in when it's focused */ }
.ec-cw-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-cw-side { min-width: 0; display: grid; gap: 14px; }
.ec-cw-play-clues { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ec-cw-play-clues ol { gap: 2px; }
.ec-cw-clue { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; text-align: left;
	font: 15px/1.35 "Lato", sans-serif; color: var(--ec-ink); cursor: pointer; }
.ec-cw-clue > b { flex: none; min-width: 1.4em; text-align: right; }
.ec-cw-clue:hover { background: #f1f4f9; }
.ec-cw-clue:focus-visible { outline: 3px solid var(--ec-focus); outline-offset: 1px; }
.ec-cw-clue.is-current { background: #e6f0fb; box-shadow: inset 3px 0 0 #1f5fae; }
.ec-cw-clue.is-done > span:last-child { color: var(--ec-ink-2); text-decoration: line-through; }
.ec-cw-clue.is-done > b::after { content: " \2713"; color: var(--ec-green-ink); }
.ec-cw-clue .ec-cw-cpic { max-height: 48px; max-width: 64px; }
.ec-cw-done { margin-top: 16px; }
@media (min-width: 761px) { .ec-cw-side { max-height: 80vh; overflow-y: auto; padding-right: 4px; } }
@media (max-width: 760px) {
	.ec-cw { grid-template-columns: minmax(0, 1fr); }
	.ec-cw-current { font-size: 16px; }
}
/* the solved box, as on the anagram and matching games */
.ec-ag-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; padding: 16px; border-radius: 14px; background: var(--ec-green-soft); border: 1px solid #9fd3a3; }
.ec-ag-done[hidden] { display: none; }
.ec-ag-done p { margin: 0; font: 600 20px "Rubik", "Lato", sans-serif; color: var(--ec-green-ink); text-align: center; }
.ec-ag-done .fa-star { color: #d99a00; }