/* Create By Asking: scavenger hunt clue generator. Loaded after style.css, tools.css and family.css.
   The printable sheets are drawn at real paper size (mm) and scaled down for the on-screen preview. */

.hunt { grid-template-columns: minmax(0, 350px) minmax(0, 1fr); align-items: start; gap: 22px 26px; }
.hn-set, .hn-trail, .hn-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; align-content: start; }
.hn-out { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 18px; }
.hn-h { font: 600 0.68rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #A597CC; margin: 6px 0 -2px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.hn-h b { color: #FFC93C; font-weight: 700; }
.hn-set input[type="text"] { width: 100%; }
.hn-set label small { color: #A597CC; font-size: 0.74rem; }

.hn-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hn-themes button { border: 0; background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 8px 6px; color: #CBBFE8; font: 600 0.76rem/1.15 var(--body); cursor: pointer; display: grid; gap: 6px; justify-items: center; text-align: center; }
.hn-themes button[aria-pressed="true"] { background: #FFC93C; color: #1C0F3F; }
.hn-thumb { width: 100%; max-width: 58px; aspect-ratio: 1.08; border-radius: 5px; position: relative; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); background: #fff; }
.hn-thumb::before, .hn-thumb::after { content: ""; position: absolute; }
.t-christmas { background: repeating-linear-gradient(45deg, #c8102e 0 4px, #fff 4px 7px, #1f6b3d 7px 8.5px, #fff 8.5px 11px); }
.t-christmas::before { inset: 4px; background: #fffdf8; border-radius: 3px; }
.t-christmas::after { left: 8px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: #c8102e; box-shadow: 7px 0 0 #c8102e, 3px -4px 0 1px #1f6b3d; }
.t-birthday { background: radial-gradient(circle at 20% 70%, #ffc93c 2px, transparent 2.5px), radial-gradient(circle at 75% 80%, #3fb6e8 2px, transparent 2.5px), radial-gradient(circle at 55% 55%, #45d19e 1.6px, transparent 2px), #fff; }
.t-birthday::before { left: 0; right: 0; top: 0; height: 12px; background: linear-gradient(90deg, #ff5c8a 0 25%, #ffc93c 25% 50%, #3fb6e8 50% 75%, #7a5cff 75%); clip-path: polygon(0 0, 100% 0, 100% 10%, 87.5% 100%, 75% 10%, 62.5% 100%, 50% 10%, 37.5% 100%, 25% 10%, 12.5% 100%, 0 10%); }
.t-birthday::after { width: 12px; height: 15px; border-radius: 50%; right: 8px; bottom: 10px; background: #ff5c8a; }
.t-indoor { background: #f4e4c1; }
.t-indoor::before { width: 20px; height: 20px; border-radius: 50%; border: 3.5px solid #5a4127; left: 12px; top: 10px; box-sizing: border-box; }
.t-indoor::after { width: 4px; height: 13px; background: #5a4127; border-radius: 2px; left: 33px; top: 26px; transform: rotate(-45deg); }
.t-outdoor { background: linear-gradient(transparent 72%, #5fae4e 72%), #e9f6df; }
.t-outdoor::before { width: 15px; height: 15px; border-radius: 50%; background: #ffc93c; right: 8px; top: 7px; box-shadow: 0 0 0 3px rgba(255, 201, 60, 0.35); }
.t-outdoor::after { width: 14px; height: 14px; left: 8px; top: 10px; background: #7cc36a; border-radius: 0 100% 0 100%; }
.t-easter { background: #fffaf2; }
.t-easter::before { width: 13px; height: 17px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #c7b6f2; left: 10px; bottom: 7px; box-shadow: 16px 2px 0 #ffd36e, 32px -1px 0 #9fe0c9; }
.t-easter::after { width: 6px; height: 18px; border-radius: 50%; background: #ffc6d6; right: 11px; top: 3px; box-shadow: 8px 1px 0 #ffc6d6; }
.t-classroom { background: repeating-linear-gradient(#fff 0 7px, #b9d3f0 7px 8px); }
.t-classroom::before { left: 10px; top: 0; bottom: 0; width: 1.5px; background: #f08a8a; }
.t-classroom::after { width: 12px; height: 12px; right: 7px; top: 7px; background: #ffc93c; clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 61%, 81% 100%, 50% 78%, 19% 100%, 29% 61%, 0 38%, 37% 35%); }

.hn-places { display: grid; gap: 10px; }
.hn-group { display: grid; gap: 6px; }
.hn-group > p { margin: 0; font-size: 0.74rem; color: #A597CC; font-weight: 600; }
.hn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hn-chip { border: 0; border-radius: 999px; padding: 7px 12px; background: rgba(255, 255, 255, 0.08); color: #CBBFE8; font: 600 0.8rem/1.1 var(--body); cursor: pointer; }
.hn-chip:hover { background: rgba(255, 255, 255, 0.14); }
.hn-chip[aria-pressed="true"] { background: #FFC93C; color: #1C0F3F; }
.hn-chip[aria-pressed="true"]::before { content: "✓ "; }
.hn-ownchip { display: inline-flex; }
.hn-ownchip .hn-chip { border-radius: 999px 0 0 999px; padding-right: 8px; }
.hn-x { border: 0; border-radius: 0 999px 999px 0; background: rgba(255, 255, 255, 0.14); color: #fff; font: 700 0.9rem/1 var(--body); padding: 0 10px 0 8px; cursor: pointer; }
.hn-x:hover { background: #FF7A62; color: #1C0F3F; }
.hn-more summary { cursor: pointer; font-size: 0.8rem; color: #CBBFE8; font-weight: 600; padding: 4px 0; }
.hn-more[open] summary { margin-bottom: 8px; }
.hn-more .hn-group + .hn-group { margin-top: 10px; }
.hn-addrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.hn-addrow .btn { padding: 9px 14px; }

.hn-private { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.hn-private p { margin: 0; font-size: 0.8rem; color: #CBBFE8; }
.hn-check { display: flex !important; align-items: center; gap: 8px !important; font-size: var(--step--1) !important; color: #F2ECFF !important; cursor: pointer; }
.hn-check input { width: 18px; height: 18px; accent-color: #FFC93C; flex: none; margin: 0; }

.hn-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.hn-tools .btn { padding: 9px 14px; font-size: var(--step--1); }
.hn-sum { margin: 0; font-size: 0.86rem; color: #CBBFE8; }
.hn-sum b { color: #fff; }
.hn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: none; }
.hn-step { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 10px 12px 12px; display: grid; gap: 8px; }
.hn-step.is-last { box-shadow: inset 0 0 0 1.5px rgba(255, 201, 60, 0.6); }
.hn-step-top { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.hn-num { width: 30px; height: 30px; border-radius: 50%; background: #FFC93C; color: #1C0F3F; display: grid; place-items: center; font: 800 0.95rem/1 var(--display); }
.hn-where { display: grid; gap: 2px; min-width: 0; }
.hn-where b { color: #fff; font-size: 0.9rem; font-weight: 650; line-height: 1.25; }
.hn-where small { color: #A597CC; font-size: 0.74rem; line-height: 1.3; }
.hn-where em { color: #FFE08F; font-style: normal; }
.hn-star { display: inline-block; margin-left: 4px; background: rgba(255, 201, 60, 0.18); color: #FFC93C; border-radius: 999px; padding: 2px 8px; font-size: 0.72rem; white-space: nowrap; }
.hn-btns { display: flex; gap: 4px; }
.hn-btns .icon-btn { width: 32px; height: 32px; font-size: 0.95rem; }
.hn-prize[aria-pressed="true"] { background: #FFC93C; color: #1C0F3F; opacity: 1; }
.hn-step textarea { width: 100%; font-size: 0.9rem; line-height: 1.45; resize: vertical; }
.hn-own { margin: 0; font-size: 0.74rem; color: #FFE08F; }
.hn-empty { color: #A597CC; font-size: var(--step--1); padding: 16px; background: rgba(255, 255, 255, 0.04); border-radius: 12px; }

.hn-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.hn-stage { position: relative; background: rgba(255, 255, 255, 0.05); border-radius: 14px; padding: 16px; display: grid; gap: 16px; justify-items: center; overflow: hidden; }
.hn-pg { position: relative; overflow: hidden; border-radius: 3px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); max-width: 100%; }
.hn-scale { transform-origin: 0 0; width: max-content; }
.hn-measure { position: absolute; left: -12000px; top: 0; visibility: hidden; pointer-events: none; }
.hn-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hn-actions .btn { justify-content: center; }
.hn-hint { margin: 0; font-size: 0.8rem; color: #FFE08F; }
.hn-warn { margin: 0; color: #FFB4A6; font-size: 0.82rem; }
.hn-warn:empty { display: none; }
@media (min-width: 1100px) { .hn-stage { max-height: 1180px; overflow-y: auto; } }
@media (max-width: 920px) { .hunt { grid-template-columns: minmax(0, 1fr); } .hn-out { grid-column: auto; } }
@media (max-width: 560px) {
  .hn-stage { padding: 8px; gap: 10px; }
  .hn-actions .btn { flex: 1 1 140px; }
  .hn-step-top { grid-template-columns: 26px minmax(0, 1fr); }
  .hn-num { width: 26px; height: 26px; font-size: 0.85rem; }
  .hn-btns { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ---------- the sheets (real size) ---------- */
.hc-print { display: none; }
.hc-sheet {
  --pw: 210mm; --ph: 297mm; --cw: 95mm; --ch: 88mm;
  --fun: "Shrikhand", "Cooper Black", Georgia, serif;
  --sans: "Figtree", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  width: var(--pw); height: calc(var(--ph) - 1mm); position: relative; overflow: hidden; box-sizing: border-box;
  background: #fff; color: #2b2420; padding: 8mm 10mm 0; font-family: var(--sans); line-height: 1.35; text-align: left; letter-spacing: normal;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.hc-sheet.p-us { --pw: 215.9mm; --ph: 279.4mm; --cw: 97mm; --ch: 82mm; padding-left: 10.95mm; padding-right: 10.95mm; }
.hc-sheet *, .hc-sheet *::before, .hc-sheet *::after { box-sizing: border-box; }
.hc-sheet p { margin: 0; }
.hc-sheet svg { display: block; }
.hc-sheet .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hc-blank { display: grid; place-items: center; color: #8a83a3; font-size: 14pt; }
.hc-top { display: flex; justify-content: space-between; font: 600 7.5pt/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a8a; padding: 0 1mm 3mm; }
.hc-made { position: absolute; left: 0; right: 0; bottom: 5mm; text-align: center; font: 7pt/1 var(--sans); color: #a3a3a3; letter-spacing: 0.04em; }
.hc-grid { display: grid; grid-template-columns: repeat(2, var(--cw)); grid-auto-rows: var(--ch); }
.hc-card { position: relative; padding: 3mm; border-right: 0.3mm dashed #a9a9a9; border-bottom: 0.3mm dashed #a9a9a9; break-inside: avoid; page-break-inside: avoid; }
.hc-card:nth-child(-n+2) { border-top: 0.3mm dashed #a9a9a9; }
.hc-card:nth-child(odd) { border-left: 0.3mm dashed #a9a9a9; }
.hc-face { position: relative; height: 100%; border-radius: 3mm; display: flex; flex-direction: column; padding: 7mm 6mm 3.2mm; overflow: hidden; background: #fff; }
.hc-face > :not(.dc) { position: relative; z-index: 1; }
.dc { position: absolute; z-index: 0; pointer-events: none; }
.hc-head { text-align: center; flex: none; display: grid; justify-items: center; gap: 0.6mm; }
.hc-kick { font: 700 6.8pt/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--k2, #777); }
.hc-title { font: 400 21pt/1.05 var(--fun); color: var(--k1, #333); }
.hc-badge { background: var(--k1, #333); color: #fff; padding: 1mm 2.4mm 0.9mm; border-radius: 999px; letter-spacing: 0.12em; }
.hc-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 2mm 0; }
.hc-txt { margin: auto 0; text-align: center; font-size: calc(var(--fs, 13pt) * var(--k, 1)); }
.age-s .hc-txt { --fs: 16.5pt; }
.age-m .hc-txt { --fs: 12.5pt; }
.age-o .hc-txt { --fs: 11.5pt; }
.age-o .hc-riddle { font-weight: 500; }
.hc-riddle { line-height: 1.38; font-weight: 600; color: #2b2420; }
.hc-riddle .ln { display: block; text-wrap: balance; }
.age-s .hc-riddle { font-weight: 700; line-height: 1.32; }
.hc-intro { font-size: 0.74em; font-style: italic; line-height: 1.35; color: #5b5260; margin-bottom: 0.55em !important; }
.hc-found { font-size: 1.12em; }
.hc-foot { flex: none; display: flex; gap: 1.6mm; align-items: baseline; justify-content: center; border-top: 0.25mm dotted #b9b2a6; padding-top: 1.6mm; font: 6.6pt/1.25 var(--sans); color: #6f6a64; text-align: center; }
.hc-foot b { color: #3b3631; font-weight: 700; }
.hc-cut { font-size: 7pt; color: #9a948c; }

/* Christmas: candy-cane frame, holly and a snowflake */
.th-christmas { --k1: #c8102e; --k2: #1f6b3d; }
.th-christmas .hc-face { background: repeating-linear-gradient(45deg, #c8102e 0 2.6mm, #fff 2.6mm 3.8mm, #1f6b3d 3.8mm 4.4mm, #fff 4.4mm 5.6mm); padding: 8.5mm 6.6mm 4.6mm; }
.th-christmas .hc-face::before { content: ""; position: absolute; inset: 2.6mm; border-radius: 1.8mm; background: #fffdf8; z-index: 0; box-shadow: 0 0 0 0.35mm #c8102e; }
.th-christmas .dc-holly { left: 1.4mm; top: 1.2mm; width: 17mm; transform: rotate(-14deg); z-index: 1; }
.th-christmas .dc-flake { right: 5.5mm; top: 5mm; width: 8mm; color: #8fb0d8; z-index: 1; opacity: 0.8; }
.th-christmas .hc-foot { margin: 0 -2mm; }

/* Birthday: bunting, confetti and a balloon */
.th-birthday { --k1: #7a5cff; --k2: #ff5c8a; }
.th-birthday .hc-face { background:
  radial-gradient(circle at 3.5% 78%, #ffc93c 0.8mm, transparent 1mm), radial-gradient(circle at 96.5% 70%, #3fb6e8 0.8mm, transparent 1mm),
  radial-gradient(circle at 4% 42%, #45d19e 0.7mm, transparent 0.9mm), radial-gradient(circle at 96% 46%, #ff5c8a 0.7mm, transparent 0.9mm),
  radial-gradient(circle at 3% 60%, #7a5cff 0.6mm, transparent 0.8mm), radial-gradient(circle at 97% 88%, #ff8a3d 0.7mm, transparent 0.9mm),
  radial-gradient(circle at 10% 27%, #ff8a3d 0.6mm, transparent 0.8mm), radial-gradient(circle at 90% 25%, #45d19e 0.6mm, transparent 0.8mm), #fff;
  box-shadow: inset 0 0 0 0.6mm #ffd1e0; padding-top: 10mm; }
.th-birthday .dc-bunting { left: 0; right: 0; top: 0; width: 100%; height: 8.5mm; }
.th-birthday .dc-balloon { right: 3.5mm; top: 9mm; width: 7mm; transform: rotate(8deg); }

/* Indoor: detective case file */
.th-indoor { --k1: #a3201c; --k2: #7a5a32; }
.th-indoor .hc-face { background: linear-gradient(#f7ebcf, #f1e0bb); box-shadow: inset 0 0 0 0.5mm #c9a66b, inset 0 0 0 1.6mm #f7ebcf, inset 0 0 0 1.85mm #d9bd85; padding-top: 7mm; }
.th-indoor .hc-title { font: 800 15pt/1 var(--display, "Arial Black", sans-serif); letter-spacing: 0.12em; text-transform: uppercase; border: 0.6mm solid currentColor; border-radius: 1.2mm; padding: 1.2mm 2.6mm 1mm; transform: rotate(-3deg); margin-top: 1mm; opacity: 0.9; }
.th-indoor .hc-riddle { font-family: var(--serif); font-weight: 400; color: #2e2216; }
.th-indoor .hc-intro { font-family: var(--serif); }
.th-indoor .dc-glass { right: 4mm; top: 4mm; width: 10mm; }
.th-indoor .dc-steps { left: 4mm; top: 5mm; width: 17mm; opacity: 0.4; transform: rotate(-8deg); }
.th-indoor .hc-foot { border-color: #b59a6a; }

/* Outdoor: sun, leaf and grass */
.th-outdoor { --k1: #2f7a32; --k2: #c07a12; }
.th-outdoor .hc-face { background: linear-gradient(#eef8ff, #f6fbef 45%); box-shadow: inset 0 0 0 0.5mm #a7d595; padding-bottom: 6.4mm; }
.th-outdoor .dc-sun { right: 3mm; top: 3mm; width: 12mm; }
.th-outdoor .dc-leaf { left: 3.5mm; top: 3.5mm; width: 8mm; transform: rotate(-90deg); }
.th-outdoor .dc-grass { left: 0; right: 0; bottom: 0; width: 100%; height: 5.2mm; }
.th-outdoor .hc-foot { border-color: #a7d595; }

/* Easter: pastel eggs and bunny ears */
.th-easter { --k1: #8a5cd6; --k2: #e0709a; }
.th-easter .hc-face { background: radial-gradient(ellipse 80% 60% at 50% 100%, #f3fbe9, transparent 70%), #fffaf4; box-shadow: inset 0 0 0 0.6mm #d9cdf5; }
.th-easter .dc-ears { right: 2mm; top: -1mm; width: 12mm; }
.th-easter .dc-eggs { left: 3mm; top: 3.5mm; width: 17mm; }

/* Classroom: lined exercise book, pencil and a gold star */
.th-classroom { --k1: #1f4fa3; --k2: #d1453b; }
.th-classroom .hc-face { background: repeating-linear-gradient(#fff 0 5.6mm, #c5dcf3 5.6mm 5.85mm); background-position: 0 1.8mm; box-shadow: inset 0 0 0 0.4mm #c5dcf3; padding-left: 12mm; padding-right: 5mm; }
.th-classroom .hc-face::before { content: ""; position: absolute; left: 10mm; top: 0; bottom: 0; width: 0.4mm; background: #f08a8a; z-index: 0; }
.th-classroom .hc-face::after { content: ""; position: absolute; left: 3.2mm; top: 22%; width: 3.2mm; height: 3.2mm; border-radius: 50%; background: #e9e6ef; box-shadow: inset 0 0.4mm 0.6mm rgba(0, 0, 0, 0.18), 0 28mm 0 #e9e6ef; z-index: 0; }
.p-us .th-classroom .hc-face::after, .th-classroom.p-us .hc-face::after { box-shadow: inset 0 0.4mm 0.6mm rgba(0, 0, 0, 0.18), 0 25mm 0 #e9e6ef; }
.th-classroom .hc-title { font: 800 19pt/1.05 var(--display, "Arial Black", sans-serif); letter-spacing: -0.01em; }
.th-classroom .dc-sticker { right: 3.5mm; top: 3.5mm; width: 9mm; transform: rotate(12deg); }
.th-classroom .dc-pencil { left: 12mm; top: 3mm; width: 17mm; transform: rotate(-8deg); }
.th-classroom .hc-foot { border-color: #c5dcf3; }

/* ---------- the grown-up's cheat sheet ---------- */
.hc-cheat { padding: 18mm 18mm 16mm; --acc: var(--k1, #333); }
.cs-head { display: grid; gap: 2mm; padding-bottom: 6mm; border-bottom: 0.6mm solid var(--k1); margin-bottom: 4mm; }
.cs-head h2 { font: 400 24pt/1.1 var(--fun); color: var(--k1); margin: 0; letter-spacing: 0; }
.th-indoor .cs-head h2, .th-classroom .cs-head h2 { font: 800 22pt/1.1 var(--display, "Arial Black", sans-serif); }
.cs-head p { font-size: 11pt; color: #4a4450; max-width: 150mm; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 10.5pt; table-layout: fixed; }
.cs-table th:nth-child(2) { width: 28mm; }
.cs-table th:nth-child(3) { width: 44%; }
.cs-table th { text-align: left; font: 700 7.5pt/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #7a7480; padding: 2.4mm 2mm; border-bottom: 0.3mm solid #cfc9d6; }
.cs-table td { padding: 2.2mm 2mm; border-bottom: 0.25mm solid #e6e1ec; vertical-align: top; }
.cs-table td:nth-child(2) { white-space: nowrap; width: 26mm; }
.cs-table td em { color: #6f6a75; }
.cs-tick { width: 9mm; }
.cs-tick i { display: block; width: 4.2mm; height: 4.2mm; border: 0.35mm solid #8a8490; border-radius: 0.8mm; margin-top: 0.2mm; }
.cs-prize td { background: #fff7db; font-weight: 600; border-bottom: 0.3mm solid #e9cf7a; }
.cs-tips { margin-top: 8mm; background: #f6f4f9; border-radius: 3mm; padding: 5mm 7mm 4mm; font-size: 10pt; }
.cs-tips h3 { font: 700 11pt/1.2 var(--sans); color: var(--k1); margin: 0 0 2mm; letter-spacing: 0; }
.cs-tips ol { margin: 0; padding-left: 5mm; display: grid; gap: 1.4mm; }

/* ---------- printing ---------- */
@media print {
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body > *:not(.hc-print) { display: none !important; }
  .hc-print { display: block !important; }
  .hc-print .hc-sheet { break-after: page; page-break-after: always; margin: 0; }
  .hc-print .hc-sheet:last-child { break-after: auto; page-break-after: auto; }
}