/* Print layout for a comic book: a cover sheet, then two panels per sheet (letter or A4,
   portrait), each with its caption and speech bubbles. Only applies while the comic reader is open
   (body.wc-comic), so printing any other screen is unaffected. */
@media print {
  @page { size: portrait; margin: 12mm; }

  body.wc-comic { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body.wc-comic > :not(#app) { display: none !important; }
  body.wc-comic #app > :not(.comic) { display: none !important; }
  body.wc-comic #app { overflow: visible !important; height: auto !important; }
  body.wc-comic .comic { background: #fff !important; }
  body.wc-comic .comic-screen { display: none !important; }
  body.wc-comic .comic-print { display: block !important; }

  .comic-print {
    --c-ink: #3b2a1e;
    --c-caption: #ffe873;
    color: #3b2a1e;
    font-family: "Chalkboard SE", "Comic Sans MS", "Marker Felt", cursive;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  /* 250mm tall sheets fit inside both A4 (273mm) and US letter (255mm) printable areas. */
  .print-sheet {
    position: relative;
    height: 250mm;
    display: flex;
    flex-direction: column;
    gap: 6mm;
    box-sizing: border-box;
    padding-bottom: 8mm;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    overflow: hidden;
  }
  .print-sheet:last-child { break-after: auto; page-break-after: auto; }
  .print-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font: 10pt/1 system-ui, sans-serif;
    color: #7a6655;
  }

  .print-cover { align-items: center; justify-content: center; text-align: center; border: 2mm solid #3b2a1e; border-radius: 4mm; padding: 10mm 10mm 14mm; }
  .print-title { margin: 0; font-size: 34pt; line-height: 1.1; overflow-wrap: anywhere; }
  .print-by { margin: 0; font-size: 18pt; overflow-wrap: anywhere; }
  .print-cover-img { display: block; max-width: 100%; max-height: 170mm; object-fit: contain; border: 1.2mm solid #3b2a1e; border-radius: 2mm; }

  .print-panel {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2.5mm;
    break-inside: avoid;
  }
  .print-imgbox { flex: 1 1 auto; min-height: 30mm; display: flex; justify-content: center; align-items: center; }
  .print-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    object-fit: contain;
    border: 1.2mm solid #3b2a1e;
    border-radius: 1.5mm;
    box-sizing: border-box;
  }
  .print-num {
    position: absolute;
    top: 1.5mm;
    left: 1.5mm;
    min-width: 7mm;
    padding: 0.8mm 1.5mm;
    background: #fff;
    border: 0.6mm solid #3b2a1e;
    border-radius: 3mm;
    font: 700 10pt/1 system-ui, sans-serif;
    text-align: center;
  }
  .comic-print .comic-caption {
    flex: 0 0 auto;
    background: #ffe873;
    border: 0.7mm solid #3b2a1e;
    padding: 1.5mm 3mm;
    font-size: 12pt;
    line-height: 1.3;
    white-space: pre-line;
    overflow-wrap: anywhere;
  }
  .comic-print .comic-bubbles { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4mm 3mm; padding-top: 2mm; }
  .comic-print .comic-bubble {
    position: relative;
    background: #fff;
    border: 0.7mm solid #3b2a1e;
    border-radius: 4mm;
    padding: 1.5mm 3mm;
    font-size: 12pt;
    line-height: 1.25;
    white-space: pre-line;
    overflow-wrap: anywhere;
    max-width: 100%;
    box-sizing: border-box;
  }
  .comic-print .comic-bubble.role-villain { border-width: 1mm; border-radius: 1.5mm; }
  .comic-print .comic-bubble::before {
    content: "";
    position: absolute;
    left: 6mm;
    top: -2.6mm;
    border-style: solid;
    border-width: 0 1.6mm 2.6mm;
    border-color: transparent transparent #3b2a1e;
  }
  .comic-print .comic-who { display: block; font: 700 8pt/1.2 system-ui, sans-serif; text-transform: uppercase; color: #7a6655; }
  .comic-print .comic-text { display: block; }
  .comic-print .comic-bubble.shout .comic-text { font-weight: 900; }
}