/* Crossword generator (/crossword-generator/, /cryptic-crossword-generator/). Loaded only on those pages. */
.xg-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 14px; align-items: end; }
.xg-opt { display: grid; gap: 4px; }
.xg-go .btn { width: 100%; }
.xg-note { margin: 12px 0 0; }
.xg-codebox input { flex: 1 1 180px; text-transform: uppercase; }
.xg-play { margin-top: 18px; padding: 14px; }
.xg-placeholder { min-height: 420px; display: grid; place-items: center; }
.xg-play.xg-busy .xg-inner { opacity: .5; }
.xg-bar { display: grid; gap: 8px; margin-bottom: 10px; }
.xg-info { margin: 0; color: var(--ink-2); }
.xg-info b { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--ink); letter-spacing: .03em; }
.xg-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.xg-tools .btn { padding: 9px 13px; }
.xg-menu { position: relative; }
.xg-menu summary { list-style: none; display: inline-block; font: 600 .95rem/1 var(--font); border-radius: var(--radius); padding: 9px 13px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.xg-menu summary::-webkit-details-marker { display: none; }
.xg-menu summary::after { content: " ▾"; font-size: .8em; }
.xg-menu summary:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.xg-pop { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 140px; display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 22px rgba(0, 0, 0, .18); overflow: hidden; }
.xg-pop button { font: 500 .95rem/1.2 var(--font); text-align: left; padding: 11px 14px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.xg-pop button:hover, .xg-pop button:focus-visible { background: var(--tile-hi); color: var(--tile-ink); outline: none; }
.xg-clock { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.xg-time { font: 700 1.05rem/1 ui-monospace, Menlo, Consolas, monospace; min-width: 3.6em; text-align: right; }
.xg-pa { margin: 0; }
.xg-current { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; align-items: center; background: var(--tile-hi); color: var(--tile-ink); border: 1px solid var(--tile-edge); border-radius: 10px; padding: 6px; margin-bottom: 10px; }
.xg-current p { flex: 1; margin: 0; font-size: .98rem; line-height: 1.35; min-height: 2.7em; display: flex; align-items: center; }
.xg-current p > span { display: block; }
.xg-current .btn { background: var(--surface); color: var(--ink); font-size: 1.2rem !important; }
.xg-main { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 18px; align-items: start; }
.xg-board { position: relative; }
.xg-grid { --n: 13; display: grid; grid-template-columns: repeat(var(--n), 1fr); width: 100%; max-width: 520px; aspect-ratio: 1; background: var(--ink); border: 2px solid var(--ink); gap: 1px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.xg-grid.xg-free { background: transparent; border-color: transparent; gap: 0; }
.xg-c { position: relative; background: #fff; color: #1c2333; cursor: pointer; display: grid; place-items: center; container-type: size; }
.xg-free .xg-c { outline: 1px solid #1c2333; }
.xg-b { background: #1c2333; }
.xg-e { background: transparent; }
.xg-n { position: absolute; top: 1px; left: 2px; font: 600 9px/1 var(--font); }
.xg-l { font: 700 1.2rem/1 var(--font); text-transform: uppercase; }
@supports (font-size: 1cqh) { .xg-l { font-size: 62cqh; } .xg-n { font-size: max(8px, 26cqh); } }
.xg-c.xg-word { background: #dbe7ff; }
.xg-c.xg-sel { background: #f2d59b; }
.xg-board.xg-focus .xg-c.xg-sel { box-shadow: inset 0 0 0 2px #2557c4; }
.xg-c.xg-bad .xg-l { color: #b3261e; }
.xg-c.xg-bad::after { content: ""; position: absolute; inset: 18%; background: linear-gradient(to top right, transparent calc(50% - 1px), #b3261e calc(50% - 1px), #b3261e calc(50% + 1px), transparent calc(50% + 1px)); pointer-events: none; }
.xg-c.xg-rev::before { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 9px 9px 0; border-color: transparent #2557c4 transparent transparent; }
.xg-c.xg-rev .xg-l { color: #2557c4; }
.xg-key { position: absolute; opacity: 0; padding: 0; margin: 0; border: 0; font-size: 16px; caret-color: transparent; background: transparent; color: transparent; z-index: 2; pointer-events: none; }
.xg-clues { display: grid; gap: 14px; max-height: 520px; overflow: auto; padding-right: 4px; border-bottom: 1px solid var(--line); overscroll-behavior: contain; }
.xg-clues h2 { font-size: 1rem; margin: 0 0 6px; }
.xg-clues ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.xg-clues li { border-radius: 8px; }
.xg-cl { display: block; width: 100%; text-align: left; font: 400 .95rem/1.35 var(--font); color: var(--ink); background: none; border: 0; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.xg-cl b { display: inline-block; min-width: 1.6em; }
.xg-clues li.xg-on { background: var(--tile-hi); }
.xg-clues li.xg-on .xg-cl { color: var(--tile-ink); }
.xg-clues li.xg-cross { box-shadow: inset 3px 0 0 var(--action); }
.xg-clues li.xg-full .xg-cl span:not(.xg-sr) { text-decoration: line-through; text-decoration-color: var(--ink-2); opacity: .75; }
.xg-why { margin: 0 0 4px 32px; font: 600 .82rem/1 var(--font); color: var(--action); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; cursor: pointer; }
.xg-expl { margin: 2px 8px 8px 32px; padding: 8px 10px; border-left: 3px solid var(--solved); background: var(--solved-bg); border-radius: 0 8px 8px 0; }
.xg-keys { margin: 12px 0 0; }
.xg-done { position: relative; overflow: hidden; margin-top: 14px; padding: 18px; border: 2px solid var(--solved); background: var(--solved-bg); border-radius: 12px; }
.xg-done p { font-size: 1.1rem; font-weight: 600; margin: 0 0 12px; }
.xg-burst { position: absolute; inset: 0; pointer-events: none; }
.xg-burst i { position: absolute; top: 50%; left: 50%; width: 8px; height: 12px; border-radius: 2px; opacity: 0; background: #f2d59b; }
.xg-burst i:nth-child(3n) { background: #2557c4; } .xg-burst i:nth-child(3n+1) { background: #1e8a6e; }
.xg-party .xg-burst i { animation: xg-pop 1.3s ease-out forwards; }
@keyframes xg-pop { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(400deg); } }
.xg-burst i:nth-child(1) { --x: -160px; --y: -70px; } .xg-burst i:nth-child(2) { --x: 150px; --y: -60px; } .xg-burst i:nth-child(3) { --x: -110px; --y: 60px; }
.xg-burst i:nth-child(4) { --x: 120px; --y: 70px; } .xg-burst i:nth-child(5) { --x: -40px; --y: -90px; } .xg-burst i:nth-child(6) { --x: 60px; --y: -95px; }
.xg-burst i:nth-child(7) { --x: -210px; --y: 10px; } .xg-burst i:nth-child(8) { --x: 220px; --y: 0; } .xg-burst i:nth-child(9) { --x: 10px; --y: 90px; }
.xg-burst i:nth-child(10) { --x: -80px; --y: -40px; } .xg-burst i:nth-child(11) { --x: 90px; --y: 30px; } .xg-burst i:nth-child(12) { --x: -150px; --y: 90px; }
.xg-burst i:nth-child(13) { --x: 170px; --y: -100px; } .xg-burst i:nth-child(14) { --x: 30px; --y: -60px; }
@media (prefers-reduced-motion: reduce) { .xg-party .xg-burst i { animation: none; } }
@media (prefers-color-scheme: dark) {
  .xg-c.xg-word { background: #c9d9fb; }
  .xg-grid.xg-free .xg-c { outline-color: #e7ecf5; }
}
@media (max-width: 760px) {
  .xg-main { grid-template-columns: 1fr; }
  .xg-grid { margin: 0 auto; }
  .xg-clues { max-height: none; overflow: visible; }
  .xg-clock { margin-left: 0; }
  .xg-play { padding: 10px; }
}
.xg-print { display: none; }

/* ---------- print: only the puzzle (and the answers page) ---------- */
@media print {
  @page { margin: 11mm 12mm; }
  body.xg-has > *:not(.xg-print) { display: none !important; }
  body.xg-has { background: #fff !important; }
  body.xg-has .xg-print, body.xg-has .xg-print * { visibility: visible !important; }      /* the word search print rule hides body * */
  body.xg-has .xg-print { display: block; color: #000; font: 10pt/1.28 Georgia, "Times New Roman", serif; }
  .xg-pp { break-inside: auto; }
  .xg-pp + .xg-pp { break-before: page; page-break-before: always; }
  .xg-pp h1 { font: 700 17pt/1.2 Arial, Helvetica, sans-serif; margin: 0 0 2mm; }
  .xg-pmeta { margin: 0 0 4mm; font: 9pt/1.3 Arial, Helvetica, sans-serif; }
  .xg-pg { --n: 13; border-collapse: collapse; margin: 0 auto 4mm; table-layout: fixed; width: calc(var(--n) * min(8.6mm, 128mm / var(--n))); }
  .xg-pg td { position: relative; width: min(8.6mm, 128mm / var(--n)); height: min(8.6mm, 128mm / var(--n)); border: .3mm solid #000; padding: 0; text-align: center; vertical-align: middle; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .xg-pg td.b { background: #000 !important; }
  .xg-pg td.e { border: 0; }
  .xg-pg i { position: absolute; top: .4mm; left: .7mm; font: 6.5pt/1 Arial, Helvetica, sans-serif; font-style: normal; }
  .xg-pg b { font: 700 11pt/1 Arial, Helvetica, sans-serif; }
  .xg-pcl { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
  .xg-pc h2 { font: 700 11pt/1.2 Arial, Helvetica, sans-serif; margin: 0 0 1.5mm; }
  .xg-pc ol { list-style: none; margin: 0; padding: 0; }
  .xg-pc li { margin: 0 0 .8mm; break-inside: avoid; }
  .xg-pc li b { display: inline-block; min-width: 6mm; }
  .xg-credit { margin: 3mm 0 0; font: 7.5pt/1.3 Arial, Helvetica, sans-serif; color: #444; text-align: center; }
}