/* Cards and printable sheets. Cards size everything in cqw (1cqw ≈ 1mm on a printed card). */
.card {
  container-type: inline-size; position: relative; aspect-ratio: 99 / 140; width: 100%;
  background: var(--paper); color: var(--ink); font-family: var(--font-body);
  border-radius: 4cqw; overflow: hidden; display: flex; flex-direction: column;
  border: 1.1cqw solid var(--accent); -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.card::after { content: ''; position: absolute; inset: 1.4cqw; border: 0.5cqw dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 2.6cqw; pointer-events: none; }
.c-head { display: flex; align-items: center; gap: 2.4cqw; padding: 4cqw 4.5cqw 2cqw; position: relative; z-index: 1; }
.c-motif { width: 13cqw; height: 13cqw; flex: none; }
.c-tag { flex: 1; font: 400 6.6cqw/1.05 var(--theme-font); color: var(--accent); }
.theme-space .c-tag, .theme-space .bday { font-size: 4.8cqw; font-weight: 700; }
.c-no { flex: none; width: 15cqw; height: 15cqw; border-radius: 50%; background: var(--accent2); color: var(--on2, #fff); display: grid; place-items: center; align-content: center; font: 600 7.2cqw/0.9 var(--font-display); }
.c-no small { font: 800 2.5cqw/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 0.4cqw; }
.c-no.star { font-size: 8cqw; }
.c-no.write { background: #fff; border: 0.7cqw solid var(--accent2); }
.c-key { position: absolute; right: 5cqw; bottom: 3.6cqw; font: 800 2.4cqw/1 var(--font-body); opacity: 0.45; letter-spacing: 0.04em; }
.ribbon { position: relative; z-index: 1; align-self: center; background: var(--team); color: #fff; font: 900 3.3cqw/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.12em; padding: 1.3cqw 4cqw; border-radius: 99px; margin-top: -0.5cqw; }
.c-body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1cqw 4.5cqw; gap: 2.4cqw; min-height: 0; position: relative; z-index: 1; }
.c-pic { width: 52cqw; height: 52cqw; background: #fff; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 1.2cqw var(--soft); flex: none; }
.c-pic .pic { width: 40cqw; height: 40cqw; }
.c-text, .c-say { margin: 0; }
.c-text.verse .l { display: block; }
.c-text { font-weight: 700; line-height: 1.5; background: var(--soft); border-radius: 4cqw; padding: 5cqw 3cqw; width: 100%; }
.c-text.verse { line-height: 1.55; }
.c-text.riddle { font-weight: 700; }
.c-say { font: 500 7cqw/1.25 var(--font-display); }
.small-say { font: 600 4cqw/1.3 var(--font-body) !important; opacity: 0.85; font-style: italic; }
.small-say::before { content: '👂 '; font-style: normal; }
.c-foot { display: flex; flex-direction: column; align-items: center; gap: 0.8cqw; padding: 1cqw 6cqw 4.5cqw; text-align: center; position: relative; z-index: 1; }
.c-next { font: 800 3.5cqw/1.2 var(--font-body); color: var(--accent2); }
.c-for { font: 600 3.2cqw var(--font-body); opacity: 0.8; font-style: italic; }
.c-site { font-size: 2.5cqw; opacity: 0.6; letter-spacing: 0.04em; }
.is-dark.card::after { border-color: rgba(255, 255, 255, 0.35); }
.is-dark .c-pic { background: #fff; }

/* Puzzles */
.puzzle { width: 100%; }
.how { font: 700 4.6cqw/1.3 var(--font-body); margin: 0 0 3cqw; }
.pz-body { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2cqw 0; }
.tiles { display: inline-flex; gap: 1cqw; --tile: min(9.5cqw, calc(78cqw / var(--n))); }
.tiles b { width: var(--tile); height: calc(var(--tile) * 1.15); border-radius: 1.4cqw; background: var(--soft); border: 0.5cqw solid var(--accent); display: grid; place-items: center; font: 600 calc(var(--tile) * 0.68) / 1 var(--font-display); color: var(--ink); }
.tiles .gap { width: calc(var(--tile) * 0.6); }
.tiles.write b { background: transparent; border-width: 0 0 0.6cqw; border-radius: 0; }
.wordgap { flex-basis: 100%; height: 0; }
.answer { flex-basis: 100%; margin-top: 3cqw; }
.nums { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqw; }
.nums b { min-width: 11cqw; padding: 2cqw 1.2cqw; border-radius: 1.4cqw; background: var(--soft); border: 0.5cqw solid var(--accent); font: 600 7cqw/1 var(--font-display); }
.pigs { display: inline-flex; gap: 1.4cqw; color: var(--ink); }
.pigs .pp { width: 8.5cqw; height: 8.5cqw; }
.mirror { display: inline-block; transform: scaleX(-1); font: 600 10cqw/1.1 var(--font-display); color: var(--accent2); letter-spacing: 0.05em; }
.abc { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3cqw; margin-top: 3cqw; font: 800 2.9cqw/1 var(--font-body); opacity: 0.75; }
.abc span { width: 5.2cqw; padding: 0.6cqw 0; border: 0.3cqw solid currentColor; border-radius: 0.8cqw; }

/* Treasure note */
.chest svg { width: 46cqw; height: auto; }
.bday { font: 400 7.4cqw/1.1 var(--theme-font); color: var(--accent2); margin: 0; }
.finale { font-weight: 700; }

/* ---- Sheets (print pages) -------------------------------------------------------- */
.sheets { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sheet {
  box-sizing: border-box; width: var(--pw); height: var(--ph); overflow: hidden; position: relative;
  background: #fff; color: #2b2b33; font-family: var(--font-body); page-break-after: always; break-after: page;
}
.sheet:last-child { page-break-after: auto; break-after: auto; }
.pfoot { position: absolute; bottom: 4mm; left: 0; right: 0; text-align: center; font-size: 7.5pt; opacity: 0.6; letter-spacing: 0.04em; }
.card-sheet { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; padding: 6mm; place-items: center; }
.card-sheet .slot { width: 100%; height: 100%; display: grid; place-items: center; border: 0.25mm dashed rgba(0, 0, 0, 0.3); padding: 3mm; }
.card-sheet .card { height: 100%; width: auto; max-width: 100%; }
.card-sheet .slot.blank { border-color: transparent; }

/* Intro / read-aloud page and cheat sheet */
.page-pad { padding: 16mm 17mm 14mm; display: flex; flex-direction: column; }
.intro-page { background: var(--paper); color: var(--ink); }
.intro-page .ip-motif { width: 36mm; height: 36mm; margin: 4mm auto 6mm; }
.intro-page h1 { font: 400 30pt/1.1 var(--theme-font); text-align: center; color: var(--accent); margin: 0 0 4mm; }
.theme-space.intro-page h1 { font-size: 22pt; font-weight: 700; }
.intro-page .ip-bday { text-align: center; font: 400 18pt var(--theme-font); color: var(--accent2); margin: 0 0 6mm; }
.intro-page .ip-text { font: 600 15pt/1.55 var(--font-body); background: var(--soft); border-radius: 6mm; padding: 9mm 11mm; margin: 0 0 8mm; white-space: pre-line; }
.ip-label { text-transform: uppercase; letter-spacing: 0.14em; font: 900 8.5pt var(--font-body); color: var(--accent2); text-align: center; margin: 0 0 3mm; }
.ip-how { font-size: 10.5pt; line-height: 1.5; margin-top: auto; border-top: 0.4mm solid var(--soft); padding-top: 5mm; }
.ip-how ol { margin: 2mm 0 0; padding-left: 5mm; }
.cheat h1 { font: 600 22pt/1.1 var(--font-display); margin: 0 0 1mm; }
.cheat .secret { display: inline-block; background: #d9452b; color: #fff; font: 900 8pt var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; padding: 1mm 3mm; border-radius: 99px; margin-bottom: 3mm; }
.cheat .sub { font-size: 10pt; color: #555; margin: 0 0 5mm; }
.cheat table { width: 100%; border-collapse: collapse; font-size: 9.6pt; }
.cheat th { text-align: left; font-size: 8pt; text-transform: uppercase; letter-spacing: 0.08em; color: #666; border-bottom: 0.5mm solid #2b2b33; padding: 1.5mm 2mm; }
.cheat td { border-bottom: 0.25mm solid #ddd; padding: 2mm; vertical-align: top; }
.cheat td.n { font: 600 13pt var(--font-display); width: 10mm; }
.cheat td.box { width: 8mm; }
.cheat td.box span { display: inline-block; width: 4.5mm; height: 4.5mm; border: 0.45mm solid #2b2b33; border-radius: 1mm; }
.cheat .sp { display: flex; gap: 2.5mm; align-items: center; }
.cheat .sp .pic { width: 9mm; height: 9mm; flex: none; }
.cheat .sp b { display: block; }
.cheat .sp small { color: #666; }
.cheat tr.tr-treasure td { background: #fff4cf; }
.cheat .teamhead { font: 600 12pt var(--font-display); margin: 5mm 0 1.5mm; display: flex; align-items: center; gap: 2mm; }
.cheat .teamhead i { width: 4mm; height: 4mm; border-radius: 50%; display: inline-block; }
.tips { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm 8mm; font-size: 9pt; line-height: 1.45; margin-top: auto; padding-top: 5mm; }
.cheat.compact .tips { font-size: 8.4pt; padding-top: 3mm; line-height: 1.35; }
.cheat.compact .sp small { font-size: 7.5pt; }
.intro-page h1, .cheat .sub, .cheat h1, .c-for, .inv dd { overflow-wrap: anywhere; }
.tips h3 { font: 600 10.5pt var(--font-display); margin: 0 0 1mm; }
.tips ul { margin: 0; padding-left: 4mm; }
.cheat.compact table { font-size: 8.6pt; }
.cheat.compact td { padding: 1.2mm 2mm; }
.cheat.compact .sp .pic { width: 7mm; height: 7mm; }

/* Present Hunt deck (Etsy pack): card key, steps and the plan to fill in */
.deck-key { display: grid; grid-template-columns: 2fr 1fr; gap: 6mm; font-size: 9.4pt; }
.deck-key h3 { font: 600 11pt var(--font-display); margin: 0 0 2mm; }
.deck-key ul { list-style: none; margin: 0; padding: 0; }
.deck-key > div:first-child ul { columns: 2; column-gap: 5mm; }
.deck-key li { display: flex; align-items: center; gap: 2mm; break-inside: avoid; padding: 0.7mm 0; border-bottom: 0.25mm solid #eee; }
.deck-key li b { font: 600 10.5pt var(--font-display); min-width: 7mm; }
.deck-key li .pic { width: 7mm; height: 7mm; flex: none; }
.deck-key .small { font-size: 8.5pt; color: #666; margin: 2mm 0 0; }
.deck-steps { font-size: 10pt; line-height: 1.45; margin: 6mm 0 0; padding-left: 5mm; }
.deck-steps li { margin-bottom: 1.5mm; }
.deck-eg { font-size: 9pt; line-height: 1.45; background: #fff4cf; border-radius: 3mm; padding: 3mm 4mm; margin: 4mm 0 0; }
.cheat table.plan-table td { height: 11mm; vertical-align: middle; }
.cheat table.plan-table td i { color: #666; font-size: 9pt; }

/* Decoder */
.decoder h1 { font: 600 22pt var(--font-display); text-align: center; margin: 0 0 2mm; }
.decoder .sub { text-align: center; color: #555; margin: 0 0 8mm; }
.dec-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2mm; margin-bottom: 8mm; }
.dec-grid div { border: 0.4mm solid #2b2b33; border-radius: 2mm; text-align: center; padding: 2mm 0; font: 600 13pt var(--font-display); }
.dec-grid div small { display: block; font: 800 9pt var(--font-body); color: #d9452b; }
.dec-grid .pp { width: 9mm; height: 9mm; display: block; margin: 0 auto 1mm; color: #2b2b33; }

/* Certificate */
.certificate { background: var(--paper); color: var(--ink); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 14mm; }
.cert-in { overflow-wrap: anywhere; border: 2.5mm double var(--accent); border-radius: 6mm; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12mm; gap: 4mm; }
.cert-in .motif { width: 62mm; height: 62mm; margin-bottom: 4mm; }
.cert-in h1 { font: 400 38pt/1.1 var(--theme-font); color: var(--accent); margin: 0; }
.theme-space .cert-in h1 { font-size: 22pt; font-weight: 700; }
.cert-in .cert-name { font: 600 22pt var(--font-display); border-bottom: 0.5mm solid currentColor; min-width: 120mm; padding: 2mm 6mm; min-height: 14mm; }
.cert-in p { margin: 0; font-size: 14pt; }
.cert-sign { display: flex; gap: 20mm; margin-top: 10mm; font-size: 9pt; }
.cert-sign span { border-top: 0.4mm solid currentColor; padding-top: 1.5mm; min-width: 55mm; }

/* Invitations: 4 per page */
.invite-sheet { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; padding: 6mm; }
.invite { border: 0.25mm dashed rgba(0, 0, 0, 0.3); padding: 3mm; display: grid; }
.inv { background: var(--paper); color: var(--ink); border-radius: 4mm; border: 1.2mm solid var(--accent); padding: 8mm 8mm 6mm; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2.5mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.inv .motif { width: 28mm; height: 28mm; }
.inv h2 { font: 400 24pt/1.05 var(--theme-font); color: var(--accent); margin: 0; }
.theme-space .inv h2 { font-size: 13pt; font-weight: 700; }
.inv .inv-line { font: 700 11pt/1.4 var(--font-body); margin: 0; }
.inv dl { margin: 5mm 0 0; width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 5mm 3mm; text-align: left; font-size: 11pt; }
.inv dt { font-weight: 900; color: var(--accent2); text-transform: uppercase; font-size: 8.5pt; letter-spacing: 0.08em; padding-top: 2mm; }
.inv dd { margin: 0; border-bottom: 0.3mm dotted currentColor; min-height: 7mm; font-weight: 700; }
.inv .inv-dress { font-size: 8.5pt; font-style: italic; opacity: 0.85; margin-top: auto; }

@media print {
  html, body { background: none !important; }
  body { display: block; }
  .no-print, .site-head, .site-foot, .toast, dialog, .celebrate { display: none !important; }
  main { padding: 0; }
  .preview { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .preview .sheets { display: block !important; zoom: 1 !important; gap: 0; }
  .preview .sheet { box-shadow: none !important; filter: none !important; }
  /* A locked hunt doesn't print (Ctrl+P included): only the print button unlocks it. */
  .preview.is-locked .sheets, .hunt.is-locked .chain, .hunt.is-locked .read-aloud { display: none !important; }
  .preview.is-locked::after, .hunt.is-locked::after { content: 'This hunt uses Pro features. Unlock Pro at qloovi.com/hiddlewink to print it.'; display: block; padding: 30mm 20mm; font: 700 16pt var(--font-body); text-align: center; }
}

/* Blank write-your-own cards */
.write-lines { width: 100%; display: grid; gap: 9cqw; padding: 0 3cqw; }
.write-lines span { border-bottom: 0.45cqw solid currentColor; opacity: 0.35; }