/* Mini Crossword Maker + Criss-Cross Puzzle Maker (shared by both pages) */
.fg-opts { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 12px; }
.fg-opts select { font: 500 15px var(--font-sans); padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--bg-card); color: var(--ink); }
.tool-in .fg-opts label { margin: 0; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; font-weight: 500; }
.fg-out { margin-top: 18px; max-width: 820px; margin-left: auto; margin-right: auto; }
.fg-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fg-bar .btn { padding: 9px 14px; font-size: 14px; }
.fg-timer { font: 700 15px var(--font-mono); color: var(--ink-secondary); margin-left: auto; min-width: 3.5em; text-align: right; }

/* the on-screen grid: squares share the width, up to 54px (mini) / 36px (criss-cross) each */
.fg-grid { margin: 16px auto; }
.fg-table { border-collapse: collapse; margin: 0 auto; table-layout: fixed; width: min(100%, calc(var(--n) * var(--fg-max, 54px))); }
.fg-table td { padding: 0; position: relative; border: 1.5px solid #1e293b; background: #fff; }
.fg-table td::before { content: ""; display: block; padding-top: 100%; }
.fg-table td.fg-b { border: none; background: transparent; }
.fg-table td.fg-hole, .fg-mini .fg-table td.fg-b { background: #1e293b; border: 1.5px solid #1e293b; }
.fg-table td sup { position: absolute; left: 2px; top: 1px; font: 700 clamp(8px, 1.6vw, 11px)/1 var(--font-sans); color: #334155; pointer-events: none; z-index: 1; }
.fg-table input { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; padding: 0; background: transparent; text-align: center;
  font: 700 clamp(13px, 4.2vw, 24px) var(--font-sans); color: #1e3a8a; text-transform: uppercase; caret-color: transparent; border-radius: 0; }
.fg-mini .fg-table input { padding-top: 12%; font-size: clamp(16px, 6vw, 28px); }
.fg-table input:focus { outline: none; }
.fg-table td.fg-hl { background: #dbeafe; }
.fg-table td.fg-cur { background: #fde68a; }
.fg-table td.fg-given input { color: #0f172a; }
.fg-table td.fg-given { background: #e5e7eb; }
.fg-table td.fg-given.fg-hl { background: #cbd5e1; }
.fg-table td.fg-bad input { color: #dc2626; text-decoration: line-through; }
.fg-table td.fg-ok input { color: #15803d; }

.fg-clue { min-height: 1.5em; margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: #eef2ff; color: #1e293b; font: 600 15px var(--font-sans); }
.fg-clue b { color: #4338ca; margin-right: 6px; }
.sheet .clues li { cursor: pointer; border-radius: 4px; padding: 0 4px; }
.sheet .clues li.on { background: #dbeafe; }

/* criss-cross word list, grouped by length */
.fg-instr { text-align: center; color: #334155; margin: -10px 0 8px; font-size: 14px; }
.fg-wl { columns: 4 110px; column-gap: 20px; margin-top: 12px; }
.fg-grp { break-inside: avoid; margin: 0 0 12px; }
.fg-grp h3 { margin: 0 0 4px; font-size: 14px; color: #0f172a !important; border-bottom: 1px solid #cbd5e1; padding-bottom: 2px; }
.fg-grp ul { list-style: none; margin: 0; padding: 0; }
.fg-grp li { font: 600 14px/1.5 var(--font-mono); color: #1e293b; cursor: pointer; overflow-wrap: anywhere; }
.fg-grp li.done, .fg-grp li.fg-given { text-decoration: line-through; color: #94a3b8; }
.fg-grp li.fg-given::after { content: " (given)"; font: 400 12px var(--font-sans); text-decoration: none; display: inline-block; margin-left: 2px; }

@media (max-width: 640px) {
  .fg-out { padding: 12px; }
  .fg-out .sheet { padding: 16px 8px; }
  .fg-out .sheet h2 { font-size: 22px; }
  .fg-cc .fg-table td sup { display: none; }
  .fg-timer { margin-left: 0; }
}

@media print {
  .fg-out { padding: 0 !important; margin: 0 !important; }
  .fg-instr { margin: 0 0 4pt; font-size: 9pt; color: #000; }
  .fg-out .pgrid { margin: 4pt 0 8pt; }
  .fg-mini-sheet .clues li { font-size: 10.5pt; line-height: 1.35; margin-bottom: 3pt; }
  .fg-mini-sheet .clues h3 { font-size: 12pt; }
  .fg-wl { columns: 4; column-gap: 14pt; margin-top: 4pt; }
  .fg-grp { margin: 0 0 5pt; }
  .fg-grp h3 { font-size: 9pt; margin: 0 0 1pt; border-bottom-color: #000; }
  .fg-grp li { font-size: var(--fg-wfs, 9pt); line-height: 1.3; color: #000; cursor: auto; }
  .fg-grp li.done { text-decoration: none; color: #000; }
  .fg-grp li.fg-given { color: #000; }
  .fg-keylist { font-size: 10pt; }
  .fg-keywrap h3 { font-size: 11pt; margin: 0 0 3pt; border-bottom: 1px solid #000; }
}
.fg-keylist { list-style: none; padding: 0; margin: 8px 0; }
.fg-keylist li { margin: 0 0 2px; }
.fg-out .sheet h3 { color: #0f172a !important; }
.fg-keywrap > div { flex: 1 1 0; }
@media print { .fg-out .sheet h3 { color: #000 !important; } }