/* The anagram game (anagrams.php): a card per scrambled word - letter tiles, the answer box, Show - in as many
   columns as fit, one on phones. The page header and bar are the shared play-page pieces (.ec-play-* in css/ui.css). */
.ec-ag-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.ec-ag-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--ec-line); border-radius: var(--ec-radius); background: var(--ec-surface);
	box-shadow: var(--ec-shadow); transition: background-color .2s, border-color .2s; }
.ec-ag-letters { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; }
.ec-ag-letters span { display: grid; place-items: center; min-width: 30px; height: 38px; padding: 0 3px; border-radius: 7px; background: var(--t-bg); color: var(--t-ink);
	font: 600 19px/1 "Poppins", "Lato", sans-serif; }
.ec-ag-letters span.gap { min-width: 12px; background: none; }
.ec-ag-letters span.p { min-width: 0; padding: 0 1px; background: none; color: var(--ec-ink); }
/* the answer: the worksheet's letter boxes (.ec-anm-* in css/ui.css, bigger here) with the real text box laid over them,
   invisible, so tapping the boxes types into it; the next empty box is marked while it has focus */
.ec-ag-answer { position: relative; }
.ec-ag-entry .ec-anm-boxes { gap: 8px 16px; }
.ec-ag-entry .ec-anm-w { gap: 4px; }
.ec-ag-entry .ec-anm-w i { width: 34px; height: 40px; font-size: 21px; border-color: #8a93a6; border-radius: 6px; background: #fff; }
.ec-ag-entry .ec-anm-w i.is-given { background: var(--ec-surface-2); color: var(--ec-ink-2); }
.ec-ag-answer:focus-within .ec-anm-w i.is-next { border: 2px solid var(--ec-focus); box-shadow: 0 0 0 2px var(--ec-blue-soft); }
.ec-ag-answer:focus-within { outline: 3px solid var(--ec-focus); outline-offset: 4px; border-radius: 6px; }
.ec-ag-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: 0; padding: 0; cursor: text; }
.ec-ag-input[readonly] { pointer-events: none; }
.ec-ag-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.ec-ag-status { margin: 0; min-height: 0; font-size: 14px; font-weight: 700; }
.ec-ag-card.is-solved { background: var(--ec-green-soft); border-color: #9fd3a3; }
.ec-ag-card.is-solved .ec-anm-w i { border-color: #6fbf75; color: var(--ec-green-ink); background: #fff; }
.ec-ag-card.is-solved .ec-ag-status { color: var(--ec-green-ink); }
.ec-ag-card.is-shown { background: #fdf3e7; border-color: #f0c99a; }
.ec-ag-card.is-shown .ec-anm-w i { border-color: #e0a764; color: #8a4b0a; background: #fff; }
.ec-ag-card.is-shown .ec-ag-status { color: #8a4b0a; }
.ec-ag-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 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); }
.ec-ag-done .fa-star { color: #d99a00; }
.ec-ag-clue { margin: 0; font-size: 16px; line-height: 1.35; color: var(--ec-ink); }
.ec-ag-bank { margin-top: 16px; }
.ec-ag-bank .ec-anm-bank { background: var(--ec-surface); border-color: var(--ec-line); border-radius: var(--ec-radius); }
.ec-ag-bank .ec-anm-bank h3 { margin: 0 0 6px; font: 700 13px "Lato", sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--ec-ink-2); text-align: center; }
.ec-ag-bank .ec-anm-bank ul { font-size: 17px; color: var(--ec-ink); }
.ec-ag-bank s { color: var(--ec-ink-2); }
.ec-ag-pic { display: block; max-width: 100%; max-height: 140px; margin: 0 auto; border-radius: 8px; object-fit: contain; }