/* Print button + print-only puzzle sheet, for the classic 9x9 game pages that load static/js/print-puzzle.js. The button reuses the existing .act button styling from app.css, so it only needs a grid tweak here (5 controls instead of 4). Everything under @media print is new: it hides the whole site and prints only the puzzle sheet, in plain black on white regardless of dark mode / data-theme / data-contrast. */ .pad-actions-5 { grid-template-columns: repeat(5, 1fr); } .print-only-sheet { display: none; } @media print { @page { size: A4 portrait; margin: 14mm; } html, body { background: #fff !important; color: #000 !important; } /* Hide everything else: header, nav, ads, board, sidebar, cookie/consent widgets, footer, whatever else lives as a direct child of . */ body > *:not(.print-only-sheet) { display: none !important; } .print-only-sheet { display: block !important; position: static; width: 100%; text-align: center; background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; } .pp-heading { margin: 0 0 3mm; font-size: 20pt; font-weight: 700; color: #000; } .pp-date { margin: 0 0 7mm; font-size: 11pt; color: #000; } .pp-grid { margin: 0 auto; border-collapse: collapse; border: 2.4pt solid #000; } .pp-grid td { width: 17mm; height: 17mm; border: 0.6pt solid #000; text-align: center; vertical-align: middle; font-size: 22pt; font-weight: 700; color: #000; padding: 0; } /* Thick lines between 3x3 boxes (also lands on the outer edge for the last row/column, which just doubles up on the table's own border). */ .pp-grid tr:nth-child(3n) td { border-bottom-width: 2.4pt; } .pp-grid td:nth-child(3n) { border-right-width: 2.4pt; } .pp-footer { margin-top: 7mm; font-size: 8.5pt; color: #000; } }