/* Cryptograms: play online or print */
.cp-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 640px) { .cp-opts { grid-template-columns: 1fr; } }
.cp-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 16px 0 2px; font-weight: 600; color: var(--ink-secondary); }
.cp-time { font: 600 15px var(--font-mono, monospace); color: var(--muted); white-space: nowrap; }
.cp-streak { margin: 0 0 6px; font-size: 14px; color: var(--muted); }

.cp-board { display: flex; flex-wrap: wrap; gap: 14px 18px; padding: 16px 12px; border-radius: var(--radius-md); background: var(--bg-subtle); border: 1px solid var(--line); line-height: 1; transition: background .3s; }
.cp-board.cp-solved { background: var(--success-light, #dcfce7); }
.cp-word { display: inline-flex; gap: 3px; }
.cp-cell { display: inline-flex; flex-direction: column; align-items: center; width: 28px; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; border-radius: 4px; }
.cp-cell .cp-a { display: block; width: 26px; height: 30px; line-height: 30px; text-align: center; font: 800 20px/30px var(--font-sans); color: var(--accent); border-bottom: 2px solid var(--ink-secondary); }
.cp-cell .cp-c { display: block; padding-top: 5px; font: 700 15px var(--font-sans); color: var(--ink-secondary); white-space: nowrap; }
.cp-punct { width: 12px; cursor: default; }
.cp-punct .cp-a { width: 12px; border-bottom: 0; color: var(--ink); }
.cp-cell.cp-same .cp-a { background: var(--accent-tint); }
.cp-cell.cp-cur .cp-a { background: var(--accent); color: #fff; border-radius: 4px 4px 0 0; }
.cp-cell.cp-given .cp-a, .cp-cell.cp-rev .cp-a { color: var(--ink); }
.cp-cell.cp-rev .cp-a { text-decoration: underline dotted; }
.cp-cell.cp-dup .cp-a, .cp-cell.cp-wrong .cp-a { color: var(--danger, #dc2626); }
.cp-cell.cp-cur.cp-dup .cp-a, .cp-cell.cp-cur.cp-wrong .cp-a { background: var(--danger, #dc2626); color: #fff; }
.cp-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cp-solved .cp-cell .cp-a { color: #15803d; }
@media (max-width: 420px) { .cp-board { gap: 12px 12px; padding: 12px 8px; } .cp-cell { width: 23px; } .cp-cell .cp-a { width: 21px; font-size: 17px; } .cp-cell .cp-c { font-size: 13px; } .cp-word { gap: 2px; } }

.cp-by { margin: 10px 0 0; text-align: right; font-style: italic; color: var(--ink-secondary); }
.cp-keys { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 14px 0 6px; }
.cp-krow { display: flex; gap: 5px; justify-content: center; width: 100%; }
.cp-key { flex: 0 1 42px; min-width: 0; height: 44px; padding: 0; font: 700 17px var(--font-sans); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-card); color: var(--ink); cursor: pointer; }
.cp-key:hover { border-color: var(--accent); color: var(--accent); }
.cp-key.used { background: var(--bg-muted); color: var(--muted); }
.cp-key.cp-del { flex-basis: 56px; }
.cp-actions { margin-top: 6px; }
.cp-printrow { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }

/* print area: hidden on screen, filled just before printing */
.cp-print { display: none; }
@media print {
  .cp-print { display: block !important; }
  .cp-sheet .cp-sub { text-align: center; margin: 0 0 4pt; font-size: 10pt; color: #000; }
  .cp-instr { font-size: 9.5pt; margin: 0 0 8pt; color: #000; }
  .cp-keypage { break-before: page; page-break-before: always; }
  .cp-pboard { display: flex; flex-wrap: wrap; gap: 12pt 14pt; margin: 6pt 0 16pt; line-height: 1; }
  .cp-pw { display: inline-flex; gap: 2pt; }
  .cp-pcell { display: inline-flex; flex-direction: column; align-items: center; width: 17pt; }
  .cp-pa { display: block; width: 15pt; height: 17pt; line-height: 17pt; text-align: center; border-bottom: 1pt solid #000; font: 700 13pt var(--font-sans); color: #000; }
  .cp-pc { display: block; padding-top: 2pt; font: 700 10pt var(--font-sans); color: #000; white-space: nowrap; }
  .cp-ppunct { width: 7pt; }
  .cp-ppunct .cp-pa { width: 7pt; border-bottom: 0; }
  .cp-alpha { font: 700 12pt var(--font-sans); letter-spacing: 3pt; text-align: center; color: #000; }
  .cp-pby { text-align: right; font-style: italic; color: #000; }
  .cp-six .cp-pitem { display: flex; gap: 6pt; align-items: flex-start; break-inside: avoid; }
  .cp-pnum { font: 700 11pt var(--font-sans); padding-top: 4pt; min-width: 14pt; }
  .cp-six .cp-pboard { gap: 5pt 9pt; margin: 2pt 0 8pt; flex: 1; }
  .cp-six .cp-pcell { width: 14pt; }
  .cp-six .cp-pa { width: 12.5pt; height: 14pt; line-height: 14pt; font-size: 11pt; }
  .cp-six .cp-pc { font-size: 8.5pt; }
  .cp-six .cp-ppunct, .cp-six .cp-ppunct .cp-pa { width: 6pt; }
  .cp-keylist { font-size: 11pt; line-height: 1.5; color: #000; }
  .cp-keylist li { margin-bottom: 8pt; }
}
.cp-optbox { margin-top: 16px; padding-top: 6px; border-top: 1px dashed var(--line-strong); }
.cp-newrow { margin-top: 10px; }
.cp-bar { margin-top: 0; }
@media print {
  .cp-sheet h2 { justify-content: center; text-align: center !important; }
  .cp-sheet:not(.cp-six) .cp-pboard { gap: 16pt 18pt; margin: 14pt 0 24pt; }
  .cp-sheet:not(.cp-six) .cp-pcell { width: 22pt; }
  .cp-sheet:not(.cp-six) .cp-pa { width: 20pt; height: 24pt; line-height: 24pt; font-size: 17pt; }
  .cp-sheet:not(.cp-six) .cp-pc { font-size: 13pt; padding-top: 3pt; }
  .cp-sheet:not(.cp-six) .cp-ppunct, .cp-sheet:not(.cp-six) .cp-ppunct .cp-pa { width: 9pt; }
}