/* Secret Santa Generator — pine ink, cranberry, kraft tags on cool linen. */
:root {
  --bg: #e6e9e2;
  --panel: #f5f6f2;
  --ink: #1b3326;
  --ink-soft: #4b5f53;
  --red: #a11d33;
  --red-ink: #fff;
  --kraft: #c69c6d;
  --kraft-ink: #2c1f12;
  --kraft-edge: #9b7448;
  --twine: #a88c64;
  --rule: #c5ccc1;
  --focus: #a11d33;
  --display: "Ultra", "Rockwell Extra Bold", "Rockwell", Georgia, serif;
  --body: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1914;
    --panel: #17241d;
    --ink: #e7e5db;
    --ink-soft: #a9b3a9;
    --red: #e0566a;
    --red-ink: #1a0a0d;
    --kraft: #b48a5c;
    --kraft-ink: #24180c;
    --kraft-edge: #7c5a35;
    --twine: #8c7556;
    --rule: #2c3d33;
    --focus: #f08a98;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--body);
  overflow-x: hidden;
}
a { color: inherit; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
img, svg { max-width: 100%; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }

/* Header / footer */
header.site { border-bottom: 2px solid var(--ink); }
header.site .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; padding-top: 14px; padding-bottom: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 400 19px/1 var(--display); text-decoration: none; letter-spacing: .01em; }
.brand svg { width: 30px; height: 30px; flex: none; }
nav.main { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }
nav.main a { text-decoration: none; padding: 4px 0; }
nav.main a:hover { text-decoration: underline; }
footer.site { margin-top: 72px; border-top: 2px solid var(--ink); font-size: 14px; color: var(--ink-soft); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 18px; padding-bottom: 32px; }
footer.site span { margin-left: auto; }

/* Type */
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: .005em; }
h1 { font-size: clamp(38px, 8vw, 76px); margin: 36px 0 12px; max-width: 14ch; }
h2 { font-size: clamp(26px, 4.4vw, 36px); margin: 56px 0 14px; }
h3 { font-size: 20px; margin: 28px 0 8px; }
p, li { max-width: 66ch; }
.lead { font-size: 19px; color: var(--ink-soft); margin: 0 0 28px; max-width: 54ch; }
.small { font-size: 14px; color: var(--ink-soft); }
.breadcrumb { margin-top: 22px; font-size: 14px; color: var(--ink-soft); }

/* Ad slots: reserved height so ads do not shift the layout */
.ad-slot { min-height: 120px; margin: 40px 0; border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule); }
.ad-slot:empty { background: transparent; }

/* Tool layout */
.tool { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .tool { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 44px; } }
.step { border-top: 2px solid var(--ink); padding: 14px 0 22px; }
.step-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.step-h .n { font: 400 28px/1 var(--display); color: var(--red); min-width: 1.1em; }
.step-h h2 { font-size: 22px; margin: 0; }
.step-h p { margin: 0; }

label { display: block; font-weight: 600; font-size: 15px; margin: 0 0 6px; }
input[type=text], input[type=number], input[type=date], textarea, select {
  width: 100%; min-width: 0; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--panel); border: 1.5px solid var(--rule); border-radius: 3px;
  padding: 10px 12px;
}
input:focus, textarea:focus, select:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent); }
textarea { resize: vertical; min-height: 64px; }
.field { margin-bottom: 14px; }
.row2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.money { position: relative; }
.money span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.money input { padding-left: 26px; }

.people { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.person { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto auto; gap: 6px; align-items: center; margin-bottom: 8px; }
.person::before { counter-increment: p; content: counter(p); color: var(--ink-soft); font-size: 14px; text-align: right; padding-right: 2px; }
.person .hints { grid-column: 2 / -1; display: none; }
.person.show-hints .hints { display: block; }
.person .hints textarea { min-height: 52px; font-size: 15px; }

button, .btn {
  font: 600 16px/1.2 var(--body); cursor: pointer; border-radius: 3px;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  padding: 10px 14px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
button:hover, .btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
button.primary, .btn.primary { background: var(--red); border-color: var(--red); color: var(--red-ink); }
button.primary:hover, .btn.primary:hover { background: color-mix(in srgb, var(--red) 86%, #000); color: var(--red-ink); }
button.big { font-size: 19px; padding: 15px 22px; width: 100%; font-family: var(--display); font-weight: 400; letter-spacing: .02em; }
button.icon { padding: 9px 10px; border-color: var(--rule); color: var(--ink-soft); font-size: 14px; font-weight: 500; }
button.link { border: 0; padding: 4px 0; text-decoration: underline; text-decoration-color: var(--red); font-weight: 500; }
button.link:hover { background: none; color: var(--red); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

.pairs { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pairs li { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--rule); border-radius: 3px; padding: 4px 4px 4px 10px; font-size: 15px; background: var(--panel); }
.pairs button { padding: 2px 8px; border: 0; font-size: 18px; line-height: 1; color: var(--ink-soft); }
.pair-add { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto; gap: 8px; align-items: center; }
.pair-add .x { color: var(--ink-soft); font-size: 14px; }
@media (max-width: 480px) {
  .pair-add { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .pair-add .x { display: none; }
  .pair-add button { grid-column: 1 / -1; }
}

.error { border-left: 4px solid var(--red); background: color-mix(in srgb, var(--red) 9%, var(--panel)); padding: 12px 14px; margin: 12px 0 0; font-size: 15px; }
.error[hidden] { display: none; }

/* The hat: live pile of name tags */
.hat { position: relative; background: var(--panel); border: 1.5px solid var(--rule); border-radius: 4px; padding: 22px 18px 20px; }
@media (min-width: 900px) { .hat { position: sticky; top: 16px; } }
.hat h2 { font-size: 22px; margin: 0 0 4px; }
.hat .small { margin: 0 0 16px; }
.pile { display: flex; flex-wrap: wrap; gap: 14px 10px; min-height: 92px; align-content: flex-start; padding: 4px 2px 8px; }
.pile .empty { color: var(--ink-soft); font-size: 15px; font-style: italic; }

/* Gift tag */
.tag {
  --w: auto; position: relative; display: inline-flex; align-items: center;
  min-height: 42px; padding: 8px 14px 8px 30px; max-width: 100%;
  background: var(--fiber), var(--kraft); color: var(--kraft-ink);
  font: 400 16px/1.15 var(--display); letter-spacing: .01em;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  filter: drop-shadow(0 1px 0 var(--kraft-edge));
  word-break: break-word;
}
.tag::before { /* punched hole */
  content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 2px var(--kraft-edge);
}
.pile .tag { transform: rotate(var(--rot, 0deg)); }
.pile .tag:nth-child(3n+1) { --rot: -2deg; }
.pile .tag:nth-child(3n+2) { --rot: 1.5deg; }
.pile .tag:nth-child(4n) { --rot: -.6deg; }
@media (prefers-reduced-motion: no-preference) {
  .pile .tag.new { animation: drop .35s cubic-bezier(.2,.9,.3,1.3); }
  @keyframes drop { from { transform: translateY(-14px) rotate(-8deg); opacity: 0; } }
}

/* Results */
.results[hidden] { display: none; }
.results .summary { margin: 0 0 16px; }
.links { list-style: none; padding: 0; margin: 0; }
.links li { border-top: 1.5px solid var(--rule); padding: 14px 0; display: grid; gap: 10px; }
.links li:last-child { border-bottom: 1.5px solid var(--rule); }
.links .who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.links .url { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.links .actions button, .links .actions a { padding: 7px 11px; font-size: 14px; }
.copied { color: var(--red); font-size: 14px; font-weight: 600; }
.warn-note { font-size: 14px; color: var(--ink-soft); border-left: 3px solid var(--kraft); padding-left: 10px; margin: 14px 0; }

/* Content sections */
.how { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; counter-reset: h; }
@media (min-width: 720px) { .how { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.how li { counter-increment: h; border-top: 2px solid var(--ink); padding-top: 10px; }
.how li::before { content: counter(h); font: 400 30px/1 var(--display); color: var(--red); display: block; margin-bottom: 6px; }
.how strong { display: block; font-size: 18px; margin-bottom: 4px; }

.budget-links { display: flex; flex-wrap: wrap; gap: 14px 12px; padding: 0; margin: 0; list-style: none; }
.budget-links .tag { text-decoration: none; font-size: 20px; min-height: 52px; padding-right: 20px; }
.budget-links .tag:hover { color: var(--kraft-ink); filter: drop-shadow(0 3px 0 var(--kraft-edge)); }

.faq details { border-top: 1.5px solid var(--rule); padding: 12px 0; }
.faq details:last-child { border-bottom: 1.5px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; font-family: var(--display); color: var(--red); width: 1ch; flex: none; }
.faq details[open] summary::before { content: "\2013"; }
.faq details p { margin: 8px 0 4px 1.6em; }

/* Gift idea list */
.ideas { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
@media (min-width: 720px) { .ideas { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.ideas li { border-top: 1.5px solid var(--rule); padding: 12px 0 14px; max-width: none; }
.ideas a { font-weight: 600; font-size: 17px; }
.ideas p { margin: 3px 0 0; font-size: 15px; color: var(--ink-soft); }
.disclosure { font-size: 14px; color: var(--ink-soft); border-left: 3px solid var(--kraft); padding: 2px 0 2px 12px; margin: 14px 0 20px; }

/* Reveal page */
.reveal-stage { display: grid; justify-items: start; gap: 0; margin: 20px 0 8px; }
.twine { width: 2px; height: 46px; background: var(--twine); margin-left: 36px; }
.big-tag {
  appearance: none; border: 0; cursor: pointer; text-align: left; display: block;
  width: min(100%, 520px); min-height: 230px; padding: 30px 30px 30px 74px;
  background: var(--fiber), var(--kraft); color: var(--kraft-ink);
  clip-path: polygon(44px 0, 100% 0, 100% 100%, 44px 100%, 0 calc(100% - 44px), 0 44px);
  position: relative; transform-origin: 40px 0; border-radius: 0;
  transition: transform .5s cubic-bezier(.3,1.4,.4,1);
}
.big-tag:hover { background: var(--fiber), var(--kraft); color: var(--kraft-ink); }
.big-tag::before { content: ""; position: absolute; left: 26px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 4px var(--kraft-edge); }
.big-tag .front, .big-tag .back { display: block; }
.big-tag .back { display: none; }
.big-tag.open .front { display: none; }
.big-tag.open .back { display: block; }
.big-tag .line1 { font: 500 16px/1.3 var(--body); display: block; margin-bottom: 8px; }
.big-tag .name { font: 400 clamp(36px, 9vw, 58px)/1.02 var(--display); display: block; word-break: break-word; }
.big-tag .tap { display: inline-block; margin-top: 16px; font: 600 15px/1 var(--body); border-bottom: 2px solid currentColor; padding-bottom: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .big-tag:not(.open) { animation: sway 3.2s ease-in-out infinite; }
  @keyframes sway { 0%,100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
  .big-tag.flip { animation: flip .55s ease-in-out; }
  @keyframes flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
}
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 24px; margin: 26px 0; padding: 0; list-style: none; }
.facts li { border-top: 2px solid var(--ink); padding-top: 8px; }
.facts b { display: block; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.facts span { font: 400 22px/1.2 var(--display); }
.note { background: var(--panel); border-left: 4px solid var(--red); padding: 14px 16px; margin: 18px 0; white-space: pre-wrap; max-width: 66ch; }

/* Countdown */
.countdown { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 10px 0 6px; }
.countdown div { min-width: 70px; }
.countdown b { display: block; font: 400 clamp(44px, 12vw, 104px)/1 var(--display); color: var(--red); font-variant-numeric: tabular-nums; }
.countdown span { font-size: 15px; color: var(--ink-soft); }
.countdown.small-cd b { font-size: clamp(32px, 8vw, 46px); }

/* Print slips */
.slips { display: none; }
@media print {
  @page { margin: 12mm; }
  body { background: #fff; color: #000; }
  body.printing > *:not(.slips) { display: none !important; }
  body.printing .slips { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0; }
  .slip { border: 1px dashed #777; height: 62mm; display: grid; grid-template-rows: 1fr 1fr; break-inside: avoid; page-break-inside: avoid; }
  .slip > div { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 4mm; font-family: var(--body); }
  .slip .in { transform: rotate(180deg); border-top: 1px dotted #999; }
  .slip .nm { font: 400 20pt/1.1 var(--display); }
  .slip .sm { font-size: 9pt; color: #444; }
}

/* ===================================================================== shared additions */
[hidden] { display: none !important; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; margin: 0 0 10px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--red); }
.center { text-align: center; justify-content: center; }
.print-area { display: none; }
.table-scroll { overflow-x: auto; max-width: 100%; }
table.sum { border-collapse: collapse; width: 100%; font-size: 16px; }
table.sum th, table.sum td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1.5px solid var(--rule); vertical-align: top; }
table.sum th { font-size: 14px; font-weight: 600; color: var(--ink-soft); border-bottom: 2px solid var(--ink); }
.more-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 720px) { .more-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.more-cards li { max-width: none; }
.more-cards a { display: block; height: 100%; text-decoration: none; border: 1.5px solid var(--rule); border-top: 4px solid var(--red); background: var(--panel); padding: 14px 16px; border-radius: 3px; }
.more-cards a:hover { border-color: var(--ink); color: var(--ink); }
.more-cards b { display: block; font: 400 19px/1.15 var(--display); margin-bottom: 6px; }
.more-cards span { font-size: 15px; color: var(--ink-soft); }
fieldset.choice { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
fieldset.choice legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 6px; }
fieldset.choice label { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 0 0 6px; cursor: pointer; }
fieldset.choice input { accent-color: var(--red); width: 17px; height: 17px; margin: 0; }
fieldset.choice.inline { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
fieldset.choice.inline legend { float: left; margin: 0 6px 0 0; }
fieldset.choice.inline label { margin: 0; }

/* Guide pages */
.prose h2 { max-width: 30ch; }
.answer { background: var(--panel); border: 1.5px solid var(--rule); border-left: 5px solid var(--red); padding: 18px 20px 16px; margin: 8px 0 10px; max-width: 72ch; }
.answer h2 { font-size: 22px; margin: 0 0 8px; }
.steps { padding-left: 1.4em; }
.steps li { margin-bottom: 10px; padding-left: 4px; }
.steps li::marker { font-family: var(--display); color: var(--red); }
.themes li { margin-bottom: 4px; }

/* ===================================================================== white elephant generator */
.party { margin: 36px 0 0; background: var(--ink); color: var(--bg); border-radius: 6px; padding: 18px 18px 26px; }
@media (prefers-color-scheme: dark) { .party { background: #08110c; color: var(--ink); border: 1.5px solid var(--rule); } }
.party[hidden] { display: none; }
.party button { border-color: currentColor; color: inherit; }
.party button:hover { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.party button.primary { background: var(--red); border-color: var(--red); color: #fff; }
.party button:disabled { opacity: .45; cursor: default; }
.party .small { color: inherit; opacity: .75; }
.party-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.party-title { font: 400 18px/1 var(--display); letter-spacing: .04em; color: var(--kraft); }
.party-bar button { padding: 7px 12px; font-size: 14px; }
.order-card {
  display: grid; justify-items: center; align-content: center; gap: 6px; text-align: center;
  min-height: 230px; margin: 6px auto 18px; max-width: 760px; padding: 26px 22px 26px 64px; position: relative;
  background: var(--fiber), var(--kraft); color: var(--kraft-ink);
  clip-path: polygon(44px 0, 100% 0, 100% 100%, 44px 100%, 0 calc(100% - 44px), 0 44px);
}
.order-card::before { content: ""; position: absolute; left: 22px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 4px var(--kraft-edge); }
.order-card .num { font: 400 clamp(56px, 16vw, 150px)/.95 var(--display); color: var(--red); }
.order-card .nm { font: 400 clamp(26px, 6vw, 58px)/1.05 var(--display); word-break: break-word; }
@media (prefers-reduced-motion: no-preference) {
  .order-card.pop { animation: pop .45s cubic-bezier(.2,1.4,.4,1); }
  @keyframes pop { from { transform: scale(.86) rotate(-3deg); opacity: .2; } }
}
.order-list { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.order-list li { display: flex; gap: 10px; align-items: baseline; border-top: 1.5px solid color-mix(in srgb, currentColor 30%, transparent); padding: 6px 0; font-size: 17px; max-width: none; min-width: 0; }
.order-list li span { overflow-wrap: anywhere; }
.order-list b { font: 400 20px/1 var(--display); color: var(--kraft); min-width: 1.6em; }
.order-list .hidden-slot span { opacity: .4; }
.rules-line { font-size: 14px; opacity: .75; margin: 0 0 10px; }
.party .turn { font: 600 15px/1.2 var(--body); text-transform: uppercase; letter-spacing: .12em; color: var(--kraft); margin: 0; }
.party .who { font: 400 clamp(38px, 9vw, 96px)/1 var(--display); margin: 6px 0 10px; overflow-wrap: anywhere; max-width: none; }
.party .hint { font-size: clamp(17px, 2.4vw, 24px); margin: 0 0 16px; max-width: 46ch; }
.open-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; max-width: 620px; }
.open-row input { background: color-mix(in srgb, var(--bg) 96%, transparent); color: #1b3326; border-color: transparent; }
@media (max-width: 480px) { .open-row { grid-template-columns: 1fr; } }
.gifts-h { font-size: 20px; margin: 26px 0 10px; }
.gift-board { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.gift-board .empty { opacity: .7; font-style: italic; }
.gift { max-width: none; display: grid; gap: 6px; align-content: start; background: var(--fiber), var(--kraft); color: var(--kraft-ink); border-radius: 4px; padding: 12px 12px 12px; min-width: 0; }
.gift .g-top { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.gift .g-label { font: 400 20px/1.1 var(--display); overflow-wrap: anywhere; }
.gift .g-holder { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.badge { font: 700 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; background: #2c5e86; color: #fff; padding: 5px 7px; border-radius: 2px; flex: none; }
.gift.frozen { background: linear-gradient(135deg, #dfeaf2, #c3d7e6); color: #1d3346; }
.pips { display: flex; gap: 5px; align-items: center; font-size: 13px; }
.pips i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; opacity: .55; }
.pips i.on { background: var(--red); border-color: var(--red); opacity: 1; }
.gift.frozen .pips i.on { background: #2c5e86; border-color: #2c5e86; }
.party .gift .steal { margin-top: 4px; padding: 8px 10px; font-size: 15px; border-color: var(--kraft-ink); color: var(--kraft-ink); }
.party .gift .steal:not(:disabled) { background: var(--kraft-ink); color: var(--kraft); }
.party .gift .steal:not(:disabled):hover { background: var(--red); border-color: var(--red); color: #fff; }
.party .gift.frozen .steal { border-color: #1d3346; color: #1d3346; }
.game-tools { margin-top: 18px; }
.party table.sum th, .party table.sum td { border-color: color-mix(in srgb, currentColor 25%, transparent); color: inherit; }
.party table.sum th { border-bottom-color: currentColor; }
.log { margin-top: 18px; font-size: 15px; }
.log summary { cursor: pointer; font-weight: 600; }
.log ol { margin: 8px 0 0; padding-left: 1.4em; max-height: 260px; overflow: auto; }
.party:fullscreen { overflow: auto; padding: 3vh 4vw; border-radius: 0; }
.party:fullscreen .order-card { min-height: 46vh; max-width: 1100px; }
.party:fullscreen .gift-board { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.party:fullscreen .gift .g-label { font-size: 24px; }

/* ===================================================================== dice game */
.dice-tool { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .dice-tool { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; } }
.dice-play { background: var(--ink); color: var(--bg); border-radius: 6px; padding: 18px 18px 22px; text-align: center; }
@media (prefers-color-scheme: dark) { .dice-play { background: #08110c; color: var(--ink); border: 1.5px solid var(--rule); } }
.dice-play .small { color: inherit; opacity: .8; margin: 10px auto 4px; max-width: 44ch; }
.round-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.round-tabs button { border-color: currentColor; color: inherit; font-size: 15px; padding: 8px 12px; }
.round-tabs button[aria-pressed="true"] { background: var(--kraft); border-color: var(--kraft); color: var(--kraft-ink); }
.die { appearance: none; background: none; border: 0; padding: 0; margin: 18px auto 6px; width: clamp(140px, 40vw, 200px); display: block; cursor: pointer; }
.die:hover { background: none; }
.die svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 0 rgba(0,0,0,.25)); }
.d-body { fill: #f5f1e6; stroke: var(--kraft-edge); stroke-width: 2; }
.d-pip { fill: var(--red); }
@media (prefers-reduced-motion: no-preference) { .die.rolling svg { animation: shake .14s linear infinite; } @keyframes shake { 0% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } 100% { transform: rotate(-9deg); } } }
.dice-result { min-height: 3.2em; font: 400 clamp(22px, 4vw, 30px)/1.15 var(--display); margin: 10px auto 16px; max-width: 22ch; display: grid; gap: 4px; }
.dice-num { color: var(--kraft); font-size: .8em; }
.dice-num:empty { display: none; }
.dice-side h2 { font-size: 24px; margin: 0 0 10px; }
.dice-side h2 + * { margin-top: 0; }
.dice-side h2:not(:first-child) { margin-top: 28px; }
.dice-rules { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 8px; }
.dice-rules li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; max-width: none; }
.mini-die svg { width: 34px; height: 34px; display: block; }
.mini-die .d-body { fill: var(--panel); stroke: var(--ink); }
.mini-die .d-pip { fill: var(--ink); }
.timer { display: grid; gap: 10px; }
.t-display { font: 400 clamp(48px, 10vw, 76px)/1 var(--display); color: var(--red); font-variant-numeric: tabular-nums; }
.t-display.over { font-size: clamp(36px, 8vw, 56px); }

/* ===================================================================== Santa letter */
.lt-tool { display: grid; gap: 28px; align-items: start; }
@media (min-width: 980px) { .lt-tool { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; } .lt-out { position: sticky; top: 12px; } }
.lt-form .step:first-child { padding-top: 14px; }
.print-box { background: var(--panel); border: 1.5px solid var(--rule); border-radius: 4px; padding: 14px 16px 16px; margin-bottom: 12px; }
.print-box .choice { margin-bottom: 10px; }
.lt-preview { display: grid; gap: 4px; }
.pv-h { font: 600 14px/1.2 var(--body); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; margin: 14px 0 6px; }
.sheet-wrap { width: 100%; overflow: hidden; position: relative; }
.sheet-wrap > .sheet { transform-origin: 0 0; box-shadow: 0 2px 0 rgba(0,0,0,.12), 0 10px 30px rgba(0,0,0,.18); }
.mail-offer { margin: 36px 0 0; background: var(--fiber), var(--kraft); color: var(--kraft-ink); padding: 20px 22px; border-radius: 4px; }
.mail-offer[hidden] { display: none; }
.mail-offer h2 { margin: 0 0 8px; font-size: 26px; }
.mail-offer .small { color: inherit; opacity: .8; }

/* The paper itself. Sizes are real paper sizes; the preview scales them down. */
.sheet {
  --paper: #fbf7ec; --ink-l: #2a1d12; --acc: #a11d33; --acc2: #2f5a3c; --fs: 14pt;
  width: 8.5in; height: 10.99in; background: var(--paper); color: var(--ink-l); position: relative; overflow: hidden;
  font-family: "IM Fell English", Georgia, "Times New Roman", serif; font-size: var(--fs-fit, var(--fs)); line-height: 1.42;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sheet.land { width: 11in; height: 8.49in; }
.paper-a4 .sheet { width: 210mm; height: 296.8mm; }
.paper-a4 .sheet.land { width: 297mm; height: 209.8mm; }
.sheet .inner { position: absolute; inset: .62in .78in .7in; display: flex; flex-direction: column; overflow: hidden; }
.sheet [contenteditable]:hover { outline: 1px dashed color-mix(in srgb, var(--acc) 60%, transparent); outline-offset: 2px; }
.sheet [contenteditable]:focus { outline: 2px solid var(--acc); outline-offset: 2px; }
.sheet p { margin: 0 0 .62em; max-width: none; }
.sheet.letter::before, .sheet.letter::after { content: ""; position: absolute; pointer-events: none; }
.sheet .dateline { text-align: right; font-style: italic; margin: .5em 0 1em; }
.sheet .greet { font-size: 1.28em; margin-bottom: .55em; }
.sheet .lbody { flex: 0 1 auto; }
.nice-notes { list-style: none; margin: -.2em 0 .7em 1.1em; padding: 0; }
.nice-notes li { position: relative; padding-left: 1.5em; margin: .18em 0; font-style: italic; max-width: none; }
.nice-notes li::before { content: ""; position: absolute; left: 0; top: .28em; width: .78em; height: .45em; border-left: 2.5px solid var(--acc); border-bottom: 2.5px solid var(--acc); transform: rotate(-45deg); }
.sheet .signoff { margin: .5em 0 0; }
.sig { color: var(--acc); width: 2.6in; margin: -.1em 0 .1em; }
.sig span { font: 400 32pt/1 "Pinyon Script", "Snell Roundhand", cursive; display: block; padding-left: .1in; white-space: nowrap; }
.sig svg { width: 100%; height: .22in; display: block; margin-top: -.08in; }
.sig.small { width: 2.2in; }
.sig.small span { font-size: 30pt; text-align: center; padding: 0; }
.sheet .ps { font-style: italic; margin-top: .6em; padding-right: 1.9in; }
.pm { position: absolute; right: .55in; bottom: .5in; width: 2.1in; max-width: none; color: color-mix(in srgb, var(--acc) 72%, transparent); transform: rotate(-12deg); opacity: .8; }
.sheet.tone-short { --fs: 21pt; }
.sheet.tone-short .nice-notes li { font-size: .9em; }
.sheet.tone-short .greet { font-size: 1.15em; }

/* Letterheads */
.lh { text-align: center; margin-bottom: .1in; position: relative; }
.lh .lh-k { display: block; }
.lh .lh-s { display: block; font: 600 8.5pt/1.3 "Libre Franklin", Arial, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--acc2); }
.d-northpole::before { inset: .28in; border: 3px double var(--acc); }
.d-northpole::after { inset: .38in; border: 1px solid color-mix(in srgb, var(--acc2) 70%, transparent); }
.d-northpole .holly { width: 1.15in; display: block; margin: 0 auto -.06in; }
.d-northpole .lh-k { font: 400 40pt/1.05 "Pinyon Script", cursive; color: var(--acc); }
.d-northpole .lh { border-bottom: 1px solid color-mix(in srgb, var(--acc2) 50%, transparent); padding-bottom: .1in; }
.d-workshop { --paper: #ecdcbf; --ink-l: #33230f; --acc: #8f2a1c; --acc2: #5b4224; background: var(--fiber), var(--paper); }
.d-workshop::before { inset: .3in; border: 2px dashed color-mix(in srgb, var(--acc2) 55%, transparent); }
.d-workshop .lh { display: flex; align-items: center; gap: .22in; text-align: left; border-bottom: 3px solid var(--acc2); padding-bottom: .12in; --stamp-bg: #ecdcbf; }
.d-workshop .lh .stamp { width: .82in; flex: none; transform: rotate(-4deg); filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.d-workshop .lh-k { font: 400 27pt/1 Ultra, Georgia, serif; color: var(--acc); }
.d-workshop .lh-s { margin-top: .06in; letter-spacing: .14em; }
.d-starry { --paper: #fdfcf7; --ink-l: #1d2a22; --acc: #1f4a33; --acc2: #a8892f; }
.d-starry .inner { top: .22in; }
.d-starry .lh { height: 1.3in; display: grid; place-content: center; margin-bottom: .45in; color: #f7f1df; }
.d-starry .lh-band { position: absolute; left: 0; right: 0; top: 0; height: 1.72in; background:
  radial-gradient(circle at 12% 30%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 28% 70%, #fff 0 1px, transparent 1.8px),
  radial-gradient(circle at 46% 22%, #fff 0 1.4px, transparent 2.2px), radial-gradient(circle at 63% 64%, #fff 0 1px, transparent 1.8px),
  radial-gradient(circle at 80% 28%, #fff 0 1.3px, transparent 2px), radial-gradient(circle at 92% 72%, #fff 0 1px, transparent 1.8px),
  radial-gradient(circle at 6% 80%, #fff 0 .9px, transparent 1.6px), radial-gradient(circle at 54% 88%, #fff 0 .9px, transparent 1.6px),
  linear-gradient(180deg, #13301f, #1f4a33); }
.d-starry .lh-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.09in; height: .09in; background: linear-gradient(90deg, var(--acc2), #e3c46b, var(--acc2)); }
.d-starry .lh-t { position: relative; display: grid; justify-items: center; gap: .04in; }
.d-starry .emblem { width: .72in; color: #e3c46b; }
.d-starry .lh-k { font: 400 30pt/1.05 "Pinyon Script", cursive; color: #fff; }
.d-starry .lh-s { color: #e3c46b; }
.d-starry::after { left: 0; right: 0; bottom: 0; height: .16in; background: linear-gradient(180deg, var(--acc2), #13301f 35%); }
.emblem { display: block; }

/* Certificate */
.cert .inner { inset: .42in; }
.cert .frame { position: relative; height: 100%; border: 4px double var(--acc2); outline: 1.5px solid var(--acc); outline-offset: -.16in; padding: .42in .6in .28in; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cert.d-northpole::before, .cert.d-northpole::after, .cert.d-workshop::before { display: none; }
.cert.d-starry::after { display: none; }
.cert { --acc2: #b8902e; }
.cert.d-workshop { --acc2: #6c4d27; }
.cert.d-starry { --acc: #1f4a33; --acc2: #b8902e; }
.c-kicker { margin-top: auto !important; font: 600 9pt/1 "Libre Franklin", Arial, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--acc2); margin: 0 0 .1in !important; }
.c-title { font: 400 34pt/1.05 Ultra, Georgia, serif; color: var(--acc); margin: 0 0 .14in; max-width: 8in; }
.c-small { font-style: italic; font-size: 13pt; margin: 0 0 .02in !important; }
.c-name { font: 400 62pt/1.1 "Pinyon Script", cursive; color: var(--ink-l); margin: 0 !important; border-bottom: 1.5px solid color-mix(in srgb, var(--acc2) 70%, transparent); padding: 0 .4in .02in; max-width: 8.2in; overflow-wrap: anywhere; }
.c-body { font-size: 15pt; max-width: 6.6in; margin: .14in 0 0 !important; }
.c-nice { font: 400 40pt/1 Ultra, Georgia, serif; letter-spacing: .06em; color: var(--acc2); margin: .06in 0 .1in !important; text-transform: uppercase; }
.c-reason { font-size: 14pt; max-width: 7.4in; }
.c-reason b { font-family: "Libre Franklin", Arial, sans-serif; font-size: 9pt; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); margin-right: .06in; }
.c-foot { margin-top: auto; width: 100%; display: grid; grid-template-columns: 1fr 1.25in 1fr; align-items: end; gap: .2in; }
.c-signed { display: grid; justify-items: center; }
.c-line { border-top: 1px solid var(--ink-l); padding-top: .05in; font: 500 8.5pt/1.2 "Libre Franklin", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; width: 2.4in; }
.seal { width: 1.15in; display: block; margin-bottom: -.12in; }
.paper-a4 .cert .frame { padding-left: .5in; padding-right: .5in; }

/* Envelope front */
.env { --paper: #fff; }
.env .inner { inset: .4in; display: grid; place-items: center; align-content: center; gap: .16in; }
.env-howto { font: 500 9pt/1.3 "Libre Franklin", Arial, sans-serif; color: #777; margin: 0 !important; }
.envelope { width: 9.5in; height: 4.125in; position: relative; background: #fbf7ec; border: 1.5px dashed #8a8a8a; color: #2a1d12; --stamp-bg: #fbf7ec; }
.envelope .ret { position: absolute; left: .32in; top: .28in; display: flex; gap: .12in; align-items: center; font-size: 11pt; line-height: 1.3; color: #2f5a3c; }
.envelope .ret .emblem { width: .58in; color: #a11d33; }
.envelope .ret b { font: 400 18pt/1 "Pinyon Script", cursive; color: #a11d33; }
.env-stamp { position: absolute; right: .3in; top: .24in; width: .95in; }
.env-stamp .stamp { width: .95in; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.env-stamp .pm { right: auto; left: -1.3in; top: .3in; bottom: auto; width: 1.9in; max-width: none; color: rgba(40,40,60,.62); transform: rotate(-8deg); }
.envelope .via { position: absolute; left: .32in; bottom: .3in; font: 700 9pt/1 "Libre Franklin", Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: #a11d33; padding: .07in .14in; }
.envelope .to { position: absolute; left: 3.4in; right: .4in; top: 1.65in; display: grid; gap: .04in; }
.envelope .to span { font: 400 44pt/1.05 "Pinyon Script", cursive; overflow-wrap: anywhere; }
.envelope .to small { font-size: 16pt; padding-left: .1in; }

/* ===================================================================== printing for the new pages */
@media print {
  body.print-mode > *:not(.print-area) { display: none !important; }
  body.print-mode .print-area { display: block !important; }
  body.print-mode { background: #fff; }
  .print-area .sheet { break-after: page; page-break-after: always; box-shadow: none; transform: none !important; margin: 0; }
  .print-area .sheet:last-child { break-after: auto; page-break-after: auto; }
  .print-area .sheet.land { page: land; }
  .print-area .sheet [contenteditable] { outline: none; }
  .num-slips { display: grid; grid-template-columns: repeat(3, 1fr); }
  .num-slip { height: 62mm; border: 1px dashed #888; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; padding: 5mm 3mm; break-inside: avoid; page-break-inside: avoid; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .num-slip b { font: 400 64pt/1 var(--display); color: #a11d33; }
  .num-slip .ns-top { font: 600 8pt/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: #2f5a3c; }
  .num-slip .ns-bot { font: 500 11pt/1.2 var(--body); color: #333; overflow-wrap: anywhere; }
  .dice-cards { display: grid; gap: 10mm; }
  .dice-card { border: 2px solid #1b3326; padding: 7mm 9mm; break-inside: avoid; height: 122mm; overflow: hidden; color: #1b3326; font-family: var(--body); font-size: 10.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dice-card h2 { font: 400 20pt/1 var(--display); color: #a11d33; margin: 0 0 3mm; }
  .dice-card h3 { font: 400 12pt/1 var(--display); margin: 3mm 0 2mm; }
  .dice-card ol { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 6mm; }
  .dice-card li { display: flex; gap: 2.5mm; align-items: center; margin-bottom: 1.6mm; break-inside: avoid; }
  .dice-card .mini-die svg { width: 7mm; height: 7mm; }
  .dice-card .mini-die .d-body { fill: #fff; stroke: #1b3326; }
  .dice-card .mini-die .d-pip { fill: #a11d33; }
  .dice-card p { margin: 3mm 0 0; font-size: 9pt; color: #555; }
}