/* ============================================
   TAROT FOR BUILDERS: PRINT-YOUR-OWN KIT
   Real-size sheets (A4 or US Letter) of 63 × 88 mm cards, nine to a page.
   On screen the sheets sit on the paper background like a print preview;
   in print only the sheets remain, one per page.
   ============================================ */

.tk-main {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 4rem) 4rem;
}

.tk-intro { max-width: 760px; margin-bottom: 2.5rem; }
.tk-intro .tf-title { margin-top: 0.5rem; }
.tk-intro .tf-lede { margin-top: 1rem; }

.tk-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-end;
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--tf-card);
  border: 1.5px solid var(--tf-ink);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--tf-green);
}

.tk-field { border: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.tk-field legend {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tf-green);
  margin-bottom: 0.35rem;
}
.tk-field label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--tf-ink); cursor: pointer; }
.tk-field input { accent-color: var(--tf-pink); width: 1.05rem; height: 1.05rem; }

.tk-print { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.tk-count { font-size: 0.85rem; color: var(--tf-soft); }

.tk-steps {
  margin-top: 1.75rem;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.6rem;
  color: var(--tf-soft);
}
.tk-steps strong { color: var(--tf-ink); }
.tk-printed { margin-top: 1.25rem; font-size: 0.98rem; }
.tk-printed a, .tk-steps a { color: var(--tf-ink); font-weight: 600; text-decoration-color: var(--tf-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* --- Sheets --- */
.tk-sheets {
  --tk-paper-w: 210mm;
  --tk-paper-h: 297mm;
  --tk-scale: 1;
  --tk-ink: #1E1A16;
  --tk-green: #1F7A4A;
  --tk-cut: #9C958A;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.tk-sheet {
  zoom: var(--tk-scale);
  position: relative;
  width: var(--tk-paper-w);
  height: var(--tk-paper-h);
  flex: none;
  background: #fff;
  box-shadow: 0 2px 0 rgba(30, 26, 22, .12), 0 12px 30px rgba(30, 26, 22, .12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--tk-ink);
}

.tk-grid {
  display: grid;
  grid-template-columns: repeat(3, 63mm);
  grid-auto-rows: 88mm;
}

.tk-sheet-note {
  position: absolute;
  bottom: 4mm;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--tf-sans);
  font-size: 7pt;
  color: var(--tk-cut);
}

/* --- Cards --- */
.tk-card {
  position: relative;
  box-sizing: border-box;
  outline: 0.25mm dashed var(--tk-cut);
  outline-offset: -0.125mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6.5mm 5mm 6mm;
  background: #FFFBF4;
  overflow: hidden;
}

.tk-blank { background: #fff; outline-color: transparent; }

.tk-frame {
  position: absolute;
  inset: 3mm;
  border: 0.7mm solid var(--tk-green);
  border-radius: 2.5mm;
  filter: url(#tf-wobble);
  pointer-events: none;
}

.tk-mood {
  position: relative;
  font-family: var(--tf-hand);
  font-size: 9pt;
  line-height: 1;
  padding: 0.7mm 2.4mm 0.5mm;
  border-radius: 99px;
  border: 0.35mm solid var(--tk-ink);
}
.tk-mood--blessed { background: #CDE8D5; }
.tk-mood--cursed { background: #F7A8C8; }
.tk-mood--chaotic { background: var(--tk-ink); color: #F7A8C8; }

.tk-art {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2mm 0;
}
.tk-art svg, .tk-art img { width: 48mm; height: 48mm; overflow: visible; }

.tk-name {
  position: relative;
  font-family: var(--tf-hand);
  font-size: 13pt;
  line-height: 1.05;
  text-align: center;
}

/* Backs: light rather than solid black, so a full deck doesn't empty the
   printer. */
.tk-back { justify-content: center; gap: 3mm; }
.tk-back .tk-frame { border-color: #C2256A; border-style: dashed; }
.tk-star { width: 20mm; height: 20mm; fill: #F7A8C8; stroke: var(--tk-ink); stroke-width: 1.1; stroke-linejoin: round; }
.tk-back-title { font-family: var(--tf-serif); font-weight: 800; font-size: 12pt; text-align: center; line-height: 1.1; }
.tk-back-sub { font-family: var(--tf-hand); font-size: 10pt; color: #C2256A; }

/* --- Colour-it-in: every marker fill goes white, coloured lines go ink, so
   the doodles print as clean line art. --- */
.is-colouring .tk-card { background: #fff; }
.is-colouring .tk-art [fill="#F7A8C8"],
.is-colouring .tk-art [fill="#C2256A"],
.is-colouring .tk-art [fill="#1F7A4A"],
.is-colouring .tk-art [fill="#CDE8D5"],
.is-colouring .tk-art [fill="#FFFBF4"],
.is-colouring .tk-art [fill="#F8E08E"],
.is-colouring .tk-art [fill="#D9D2C5"],
.is-colouring .tk-art [fill="#E8B96A"],
.is-colouring .tk-art [fill="#F3CF6A"],
.is-colouring .tk-art [fill="#fff"] { fill: #fff; fill-opacity: 1; }
.is-colouring .tk-art [stroke="#C2256A"],
.is-colouring .tk-art [stroke="#1F7A4A"],
.is-colouring .tk-art [stroke="#FFFBF4"],
.is-colouring .tk-art [stroke="#F8E08E"],
.is-colouring .tk-art [stroke="#fff"] { stroke: var(--tk-ink); }
.is-colouring .tk-art text[fill] { fill: var(--tk-ink); }
.is-colouring .tk-frame { border-color: var(--tk-ink); border-width: 0.45mm; }
.is-colouring .tk-mood { background: #fff; color: var(--tk-ink); }
.is-colouring .tk-star { fill: #fff; }
.is-colouring .tk-back-sub { color: var(--tk-ink); }

/* --- Guidebook --- */
.tk-sheet--guide {
  justify-content: flex-start;
  align-items: stretch;
  padding: 16mm 16mm 14mm;
  background: #FFFBF4;
}
.tk-guide-kicker { font-size: 7.5pt; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--tk-green); }
.tk-guide-title { font-family: var(--tf-serif); font-weight: 900; font-size: 26pt; line-height: 1.05; margin-top: 1mm; }
.tk-guide-lede { font-size: 9.5pt; margin-top: 2mm; max-width: 140mm; color: #4A443C; }
.tk-guide-how { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7mm 8mm; margin: 8mm 0 7mm; padding-top: 7mm; border-top: 0.35mm solid var(--tk-ink); }
.tk-guide-players { display: inline-block; font-family: var(--tf-hand); font-size: 10pt; line-height: 1; padding: 0.7mm 2.5mm 0.4mm; border: 0.3mm solid var(--tk-ink); border-radius: 99px; background: #CDE8D5; }
.tk-guide-how h3 { font-family: var(--tf-serif); font-size: 15pt; font-weight: 800; line-height: 1.15; margin-top: 2mm; }
.tk-guide-steps { padding-left: 4.5mm; margin-top: 2mm; font-size: 10pt; line-height: 1.4; color: #4A443C; }
.tk-guide-steps li { margin-bottom: 1mm; }
.tk-guide-moods { padding: 6mm 7mm; border: 0.35mm dashed var(--tk-ink); border-radius: 3mm; }
.tk-guide-moods h3 { font-family: var(--tf-serif); font-size: 13pt; font-weight: 800; }
.tk-guide-moods ul { list-style: none; display: grid; gap: 2mm; margin: 3mm 0; font-size: 10pt; color: #4A443C; }
.tk-guide-moods li { display: flex; align-items: center; gap: 2.5mm; }
.tk-guide-moods p { font-size: 10pt; line-height: 1.45; color: #4A443C; }
.tk-guide-moods .tk-mood { font-size: 9pt; color: var(--tk-ink); }
.tk-guide-moods .tk-mood--chaotic { color: #F7A8C8; }
.is-colouring .tk-guide-moods .tk-mood--chaotic { color: var(--tk-ink); }
.is-colouring .tk-guide-players { background: #fff; }
.tk-guide-list { list-style: none; columns: 2; column-gap: 8mm; margin-top: 7mm; padding-top: 6mm; border-top: 0.35mm solid var(--tk-ink); }
.tk-guide-list li { break-inside: avoid; margin-bottom: 3.6mm; }
.tk-guide-name { font-family: var(--tf-hand); font-size: 12pt; line-height: 1.1; display: flex; align-items: center; gap: 2mm; }
.tk-guide-name .tk-mood { font-size: 7.5pt; }
.tk-guide-fate { font-size: 8.8pt; line-height: 1.35; color: #4A443C; margin-top: 0.6mm; }

@media (max-width: 720px) {
  .tk-print { margin-left: 0; align-items: flex-start; width: 100%; }
  .tk-print .tf-btn { width: 100%; }
}

/* --- Print: only the sheets, exactly paper-sized, one per page. --- */
@media print {
  html, body { background: #fff !important; }
  body { display: block; min-height: 0; }
  .tk-screen { display: none !important; }
  .tk-main { max-width: none; padding: 0; }
  .tk-sheets { display: block; }
  .tk-sheet {
    zoom: 1;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .tk-sheet:last-child { break-after: auto; page-break-after: auto; }
}