/* The Skeptic's own styles: the suspend button and the closed debate, the early-exit offer, the lamp running out of
   oil, and the certificate of suspension of judgment with its wax seal (and printing it). Loaded after style.css
   (the shared styles). */

/* The Suspend judgment button, then the big finish */
.suspend-cta { margin-top: 20px; text-align: center; animation: pop 0.5s ease-out; }
#suspend-button {
  font: 600 1.3rem var(--loud);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 16px 40px;
  background: var(--win);
  border-color: var(--win);
  box-shadow: 5px 5px 0 var(--sun);
}
#suspend-button:hover { filter: brightness(1.1); }

.closed-note {
  margin-top: 20px;
  padding: 16px;
  text-align: center;
  background: var(--sun-soft);
  border: 1px dashed var(--sun);
  border-radius: 8px;
}
.closed-note p { margin: 0 0 12px; }
.closed-note strong { color: var(--win); }

@media (prefers-reduced-motion: reduce) { .suspend-cta, .certificate { animation: none; } }

.suspend-cta p { margin: 10px 0 0; }

.out-of-oil .funding { display: block; margin-top: 6px; font-size: 0.9rem; }

.early-exit { margin: 14px auto; max-width: 560px; padding: 12px 16px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; font-size: 0.95rem; color: var(--muted); }
.early-exit p { margin: 0 0 10px; }
.early-exit button { margin: 0 6px; }

/* Print just the certificate */
@media print {
  body { background: #fff; }
  .masthead, footer, #start, #debate, .end > .congrats, .end-actions, .end-keep, .rating { display: none !important; }
  .end { padding: 0; }
  @page { size: landscape; margin: 12mm; }
}

/* The certificate */
.certificate {
  --gold: #b08a3e;
  width: 100%;
  max-width: 760px;
  padding: 14px;
  background: #fdf8ec;
  border: 3px double var(--gold);
  box-shadow: 0 2px 0 var(--line), 0 18px 40px rgba(90, 60, 20, 0.18);
  animation: pop 0.6s ease-out;
  font-family: var(--serif);
}
.cert-inner {
  position: relative;
  padding: 36px 40px 28px;
  text-align: center;
  border: 2px solid var(--gold);
  outline: 1px solid var(--gold);
  outline-offset: -8px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
    repeating-linear-gradient(45deg, rgba(176, 138, 62, 0.05) 0 2px, transparent 2px 10px);
}
/* Corner ornaments */
.cert-inner::before, .cert-inner::after {
  content: "❦";
  position: absolute;
  top: 14px;
  font-size: 1.5rem;
  color: var(--gold);
}
.cert-inner::before { left: 20px; transform: scaleX(-1); }
.cert-inner::after { right: 20px; }

.cert-school {
  font: 500 0.78rem var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin: 0 0 10px;
}
.cert-title {
  font: 400 3.6rem/1 "UnifrakturMaguntia", var(--display);
  color: var(--accent-dark);
  margin: 0;
}
.cert-of {
  font: 600 1.15rem var(--display);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  margin: 4px 0 22px;
}
.cert-text { margin: 4px 0; font-size: 1.05rem; }
.cert-name {
  font: 400 3.6rem/1.15 "Pinyon Script", cursive;
  color: var(--ink);
  margin: 6px auto 4px;
  padding: 0 16px 4px;
  border-bottom: 1px solid var(--gold);
  display: inline-block;
  min-width: 60%;
  overflow-wrap: anywhere;
}
.cert-claim { font-style: italic; font-size: 1.15rem; margin: 6px 0; }
.cert-gift { color: var(--muted); font-size: 0.95rem; margin-top: 10px; }

.cert-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 16px;
  margin-top: 26px;
}
.cert-sign { display: flex; flex-direction: column; align-items: center; }
.cert-signature {
  /* An old-fashioned copperplate hand in iron-gall ink, nearly level, as if signed with a quill. */
  font: 400 3.4rem/0.9 "Monsieur La Doulaise", cursive;
  color: #3a2716;
  text-shadow: 0 0 0.6px rgba(58, 39, 22, 0.55);
  transform: rotate(-1.5deg) translateY(6px);
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.cert-date { font: italic 1.05rem var(--serif); }
.cert-line {
  width: 100%;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--ink);
  font-size: 0.78rem;
  color: var(--muted);
}

/* Wax seal: an irregular blob of wax with a stamped, slightly sunken impression */
.seal { width: 160px; height: 160px; filter: drop-shadow(1px 3px 2px rgba(70, 15, 8, 0.4)); transform: rotate(-4deg); }
.seal-hi { fill: none; stroke: rgba(255, 190, 170, 0.35); stroke-width: 1.5; }
.seal-lo { fill: none; stroke: rgba(70, 10, 5, 0.45); stroke-width: 2; }
.seal-rim { fill: none; stroke: rgba(255, 205, 190, 0.55); stroke-width: 1.2; }
.seal-ring-text { font: 600 11.5px var(--display); fill: rgba(255, 228, 218, 0.92); }
.seal-centre { font: 600 31px var(--display); fill: rgba(255, 232, 224, 0.95); }
.seal-centre-hi { fill: rgba(70, 10, 5, 0.45); }

@media (max-width: 800px) {
  .cert-inner { padding: 30px 16px 22px; }
  .cert-title { font-size: 2.6rem; }
  .cert-name { font-size: 2.6rem; min-width: 80%; }
  .cert-footer { grid-template-columns: 1fr 1fr; }
  .seal { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: 140px; height: 140px; }
}

@media print {
  .certificate { box-shadow: none; animation: none; max-width: none; }
}

/* What to keep and share, under the certificate (Angela, 2026-11-09): the map and the debate (the same size), the
   certificate, then small round share buttons. */
.end-keep { display: grid; gap: 10px; justify-items: center; }
.end-keep .end-actions { margin: 0; }
.end-main button { min-width: 11em; }   /* (the three downloads alike, side by side) */