/* ================================================================
   BAGHOLDER ELITES — membership parlor
   Palette pulled from the club portraits:
   felt green, lamp gold, banknote sage, paper cream, suit navy.
   ================================================================ */

:root {
  --felt:       #33472c;
  --felt-deep:  #24331f;
  --felt-edge:  #1b2717;
  --paper:      #f0e6c9;
  --paper-dim:  #e6d9b4;
  --paper-edge: #cbb98c;
  --ink:        #2b2721;
  --ink-soft:   #5c5344;
  --gold:       #d9b45f;
  --gold-deep:  #a9843c;
  --brass:      #c9a24b;
  --bill:       #a8b087;
  --bill-deep:  #8d9a6e;
  --bill-ink:   #5f6b4a;
  --navy:       #434659;
  --stamp-red:  #a4423a;
  --stamp-green:#4c7a4a;
  --shirt:      #cfe0ea;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --body:  Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* keep the hidden attribute authoritative over display: flex/grid rules */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  color: var(--paper);
  background: var(--felt-deep);
  min-height: 100vh;
  overflow-x: hidden;
}

/* felt gradient on a viewport-fixed layer — iOS Safari ignores
   background-attachment: fixed on the body, this works everywhere */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% -10%, #46603b 0%, var(--felt) 42%, var(--felt-deep) 78%, var(--felt-edge) 100%);
}

/* ------------------------------------------------------------ fx */

.fx-lamp {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(46% 34% at 50% 0%, rgba(232, 197, 106, 0.20), rgba(232, 197, 106, 0.05) 55%, transparent 75%);
}

.fx-grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 3; opacity: 0.05;
  background-image: 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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation: grain 9s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-2%,2%); }
  40% { transform: translate(2%,-1%); }
  60% { transform: translate(-1%,-2%); }
  80% { transform: translate(1%,2%); }
}

.fx-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(90% 80% at 50% 45%, transparent 55%, rgba(12, 18, 10, 0.55) 100%);
}

/* ------------------------------------------------------------ topbar */

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.4rem;
  background: linear-gradient(rgba(27, 39, 23, 0.92), rgba(27, 39, 23, 0.78));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(217, 180, 95, 0.25);
}

.topbar__brand {
  font-family: var(--serif); font-weight: 700; letter-spacing: 0.32em;
  font-size: 0.8rem; color: var(--gold);
}

.topbar__seats {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--paper-dim); display: inline-flex; align-items: center; gap: 0.45em;
}
.topbar__seats b { color: var(--gold); font-weight: 600; }

.led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px 1px rgba(217, 180, 95, 0.8);
  animation: led 2.4s ease-in-out infinite;
}
@keyframes led { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ------------------------------------------------------------ page */

.page {
  position: relative; z-index: 4;
  max-width: 680px;
  margin: 0 auto;
  padding: 3.2rem 1.2rem 4rem;
}

/* ------------------------------------------------------------ hero */

.hero { text-align: center; margin-bottom: 3.4rem; }

.hero__est {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.34em;
  color: rgba(240, 230, 201, 0.75); margin-bottom: 1rem;
}

.hero__title {
  font-family: var(--serif); font-weight: 900; font-size: clamp(3rem, 11vw, 4.8rem);
  line-height: 0.98; letter-spacing: 0.01em;
  background: linear-gradient(175deg, #f3dda2 20%, var(--gold) 55%, var(--gold-deep) 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
  text-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.hero__sub {
  margin-top: 1.15rem; font-size: 1rem; line-height: 1.65;
  color: rgba(240, 230, 201, 0.85);
}
.hero__sub em { color: var(--gold); font-style: italic; }

/* ---- fan of banknotes (pure CSS, mirrors the key art) */

.fan {
  position: relative; width: 150px; height: 110px; margin: 0 auto 0.6rem;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
}

.fan__bill {
  position: absolute; left: 50%; bottom: 6px;
  width: 30px; height: 86px; margin-left: -15px;
  transform-origin: 50% 92%;
  background: linear-gradient(180deg, #b3bb90 0%, var(--bill) 45%, var(--bill-deep) 100%);
  border: 2px solid #55603f;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2.5px rgba(240, 230, 201, 0.35);
}
.fan__bill::before {
  content: "100";
  position: absolute; top: 5px; left: 0; right: 0;
  font-family: var(--mono); font-size: 8px; font-weight: 600;
  color: var(--bill-ink); text-align: center; letter-spacing: 0.05em;
}
.fan__bill::after {
  content: "";
  position: absolute; left: 50%; top: 46%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid rgba(95, 107, 74, 0.75); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(240,230,201,0.5), rgba(95,107,74,0.25));
}

.fan__bill:nth-child(1) { transform: rotate(-64deg); }
.fan__bill:nth-child(2) { transform: rotate(-48deg); }
.fan__bill:nth-child(3) { transform: rotate(-32deg); }
.fan__bill:nth-child(4) { transform: rotate(-16deg); }
.fan__bill:nth-child(5) { transform: rotate(0deg); }
.fan__bill:nth-child(6) { transform: rotate(16deg); }
.fan__bill:nth-child(7) { transform: rotate(32deg); }
.fan__bill:nth-child(8) { transform: rotate(48deg); }
.fan__bill:nth-child(9) { transform: rotate(64deg); }

.fan__clip {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 34px; height: 26px; line-height: 24px;
  background: linear-gradient(180deg, #edd28a, var(--brass) 60%, var(--gold-deep));
  border: 1.5px solid #7c6128; border-radius: 6px;
  font-family: var(--serif); font-weight: 700; font-size: 15px;
  color: #5d4a1d; text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: no-preference) {
  .fan { animation: fan-sway 6s ease-in-out infinite; transform-origin: 50% 100%; }
  @keyframes fan-sway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
  }
}

/* ---- poker-chip tracker */

.chips {
  display: flex; justify-content: center; gap: clamp(1.4rem, 6vw, 2.6rem);
  list-style: none; margin-top: 2.2rem;
}

.chip { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }

.chip__disc {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  color: rgba(240, 230, 201, 0.5);
  background:
    radial-gradient(circle at 50% 50%, var(--felt-deep) 0 58%, transparent 58%),
    repeating-conic-gradient(rgba(240, 230, 201, 0.28) 0 14deg, transparent 14deg 45deg);
  background-color: #3c5233;
  border: 3px solid rgba(240, 230, 201, 0.22);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 0 0 4px rgba(0, 0, 0, 0.18);
  transition: all 0.35s ease;
}

.chip__label {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(240, 230, 201, 0.75);
  transition: color 0.35s ease;
}

.chip.is-active .chip__disc {
  color: #5d4a1d;
  background:
    radial-gradient(circle at 50% 50%, #edd28a 0 58%, transparent 58%),
    repeating-conic-gradient(#7c6128 0 14deg, transparent 14deg 45deg);
  background-color: var(--brass);
  border-color: #edd28a;
  box-shadow: 0 4px 14px rgba(217, 180, 95, 0.4), inset 0 0 0 4px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}
.chip.is-active .chip__label { color: var(--gold); }

.chip.is-done .chip__disc {
  color: var(--paper);
  background:
    radial-gradient(circle at 50% 50%, var(--stamp-green) 0 58%, transparent 58%),
    repeating-conic-gradient(rgba(240, 230, 201, 0.5) 0 14deg, transparent 14deg 45deg);
  background-color: #3f6b3d;
  border-color: rgba(240, 230, 201, 0.5);
}
.chip.is-done .chip__label { color: rgba(240, 230, 201, 0.75); }

/* ------------------------------------------------------------ panels */

.panel {
  position: relative;
  background: linear-gradient(178deg, var(--paper) 0%, var(--paper-dim) 100%);
  color: var(--ink);
  border-radius: 10px;
  border: 1px solid var(--paper-edge);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 18px 36px rgba(10, 16, 8, 0.45);
  padding: 1.7rem 1.6rem 1.9rem;
  margin-bottom: 2rem;
  transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
}

/* stacked-paper edge */
.panel::after {
  content: ""; position: absolute; inset: 5px -5px -7px 5px; z-index: -1;
  background: var(--paper-edge); border-radius: 10px; opacity: 0.5;
  transform: rotate(0.7deg);
}

.panel.is-locked {
  opacity: 0.45; filter: saturate(0.7);
  transform: scale(0.985);
  pointer-events: none; user-select: none;
}

.panel.is-locked::before {
  content: "SEALED — IN DUE COURSE";
  position: absolute; top: 50%; left: 50%; z-index: 5;
  transform: translate(-50%, -50%) rotate(-7deg);
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em;
  color: var(--stamp-red);
  border: 2.5px solid var(--stamp-red); border-radius: 6px;
  padding: 0.55em 1em; white-space: nowrap;
  opacity: 0.8;
}

.panel__head {
  display: flex; align-items: baseline; gap: 0.9rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.7rem; margin-bottom: 0.9rem;
}

.panel__no {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.18em; color: var(--ink-soft);
}

.panel__title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.15rem, 4.4vw, 1.45rem);
  flex: 1;
}

.panel__flair { color: var(--gold-deep); font-size: 0.9rem; }

.panel__count {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; color: var(--stamp-red); white-space: nowrap;
}
.panel__count.is-full { color: var(--stamp-green); }

.panel__note {
  font-size: 0.92rem; font-style: italic; color: var(--ink-soft);
  line-height: 1.55; margin-bottom: 1.3rem;
}

/* ------------------------------------------------------------ form */

.form { display: grid; gap: 1.25rem; }

.field__label {
  display: block;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.5rem;
}
.field__label i { text-transform: none; letter-spacing: 0.04em; font-style: italic; }

.field__line {
  display: flex; align-items: center; gap: 0.55rem;
  border-bottom: 2px solid rgba(43, 39, 33, 0.55);
  padding-bottom: 0.35rem;
  transition: border-color 0.25s ease;
}
.field__line:focus-within { border-color: var(--gold-deep); }

.field__at {
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  color: var(--gold-deep); width: 1.2em; text-align: center;
}

.field__input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  font-family: var(--body); font-size: 1.05rem; color: var(--ink);
}
.field__input--mono { font-family: var(--mono); font-size: 0.92rem; letter-spacing: 0.02em; }
.field__input::placeholder { color: rgba(92, 83, 68, 0.45); }

.field__err {
  margin-top: 0.45rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--stamp-red);
}

.field.is-bad .field__line { border-color: var(--stamp-red); animation: shake 0.35s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------------------------ buttons */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; font-size: 0.85rem;
  border: 0; border-radius: 7px; cursor: pointer;
  padding: 0.9em 1.9em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--gold {
  color: #4a3a14;
  background: linear-gradient(180deg, #f0d68f 0%, var(--gold) 45%, var(--brass) 100%);
  border: 1.5px solid #8a6c2c;
  box-shadow: 0 3px 0 #7c6128, 0 10px 22px rgba(0, 0, 0, 0.28);
  justify-self: start;
}
.btn--gold:hover { filter: brightness(1.05); box-shadow: 0 3px 0 #7c6128, 0 12px 26px rgba(217, 180, 95, 0.35); }

.btn--big { width: 100%; padding: 1.1em 1.9em; font-size: 0.95rem; }

/* lives on the cream certificate paper — needs ink, not gold-on-cream */
.btn--ghost {
  margin-top: 1.1rem;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--gold-deep);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(169, 132, 60, 0.12); }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--ink-soft); text-decoration: underline; margin-left: 0.5em;
}

/* ------------------------------------------------------------ received state */

.panel__done { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.panel__doneline { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }
.panel__doneline b { color: var(--ink); font-family: var(--mono); font-size: 0.84em; font-weight: 600; }

/* ------------------------------------------------------------ stamps */

.stamp {
  display: inline-block;
  font-family: var(--mono); font-weight: 600; font-size: 0.68rem;
  letter-spacing: 0.24em; white-space: nowrap;
  color: var(--stamp-red);
  border: 2.5px solid currentColor; border-radius: 5px;
  padding: 0.4em 0.75em;
  transform: rotate(-6deg);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0.28'/%3E%3CfeComposite operator='in' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='90' height='40' filter='url(%23r)'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0.28'/%3E%3CfeComposite operator='in' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='90' height='40' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-size: cover; -webkit-mask-size: cover;
}

.stamp--green { color: var(--stamp-green); }

@keyframes stamp-in {
  0% { opacity: 0; transform: rotate(-6deg) scale(2.2); }
  55% { opacity: 1; transform: rotate(-6deg) scale(0.92); }
  100% { opacity: 1; transform: rotate(-6deg) scale(1); }
}

/* ------------------------------------------------------------ duties */

.duties { list-style: none; display: grid; gap: 0.65rem; }

.duty {
  position: relative;
  display: flex; align-items: center; gap: 0.9rem;
  border: 1.5px solid rgba(43, 39, 33, 0.25);
  border-radius: 8px;
  padding: 0.85rem 0.95rem;
  background: rgba(255, 252, 240, 0.45);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.duty__no {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  color: var(--ink-soft); letter-spacing: 0.06em;
}

.duty__body { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }

.duty__name { font-family: var(--serif); font-weight: 700; font-size: 0.98rem; }

.duty__desc { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.45; }
.duty__desc b { font-family: var(--mono); font-size: 0.92em; font-weight: 600; color: var(--ink); }

.duty__btn {
  font-family: var(--mono); font-weight: 600; font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  border: 1.5px solid rgba(43, 39, 33, 0.5); border-radius: 5px;
  padding: 0.55em 1em; cursor: pointer; white-space: nowrap;
  transition: all 0.2s ease;
}
.duty__btn:hover { background: var(--ink); color: var(--paper); }

.duty.is-pending .duty__btn {
  color: var(--gold-deep); border-color: var(--gold-deep);
  animation: led 1.2s ease-in-out infinite;
}

.duty__stamp { display: none; position: static; }

.duty.is-done { border-color: rgba(76, 122, 74, 0.55); background: rgba(76, 122, 74, 0.08); }
.duty.is-done .duty__btn { display: none; }
.duty.is-done .duty__stamp {
  display: inline-block; color: var(--stamp-green);
  animation: stamp-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

/* ------------------------------------------------------------ claim + certificate */

.claimwrap { display: grid; gap: 0.4rem; }

.claim__err {
  font-family: var(--mono); font-size: 0.72rem; color: var(--stamp-red);
  letter-spacing: 0.04em; margin-top: 0.6rem;
}

.cert { text-align: center; }

.cert__frame {
  position: relative;
  border: 2px solid var(--gold-deep);
  outline: 1px solid rgba(169, 132, 60, 0.5);
  outline-offset: 5px;
  border-radius: 6px;
  padding: 2rem 1.4rem 2.2rem;
  margin: 0.4rem 0.3rem 1.1rem;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(217, 180, 95, 0.12), transparent 60%),
    linear-gradient(178deg, #f5ecd3, var(--paper-dim));
  animation: cert-in 0.7s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
@keyframes cert-in {
  0% { opacity: 0; transform: translateY(18px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.cert__club {
  font-family: var(--serif); font-weight: 900; letter-spacing: 0.3em;
  font-size: 0.85rem; color: var(--gold-deep);
}

.cert__kind {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 1.35rem; margin-top: 0.35rem; color: var(--ink);
}

.cert__serial {
  font-family: var(--mono); font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.28em; color: var(--stamp-red); margin-top: 0.9rem;
}

.cert__rule {
  height: 1px; margin: 1.1rem 10%;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}

.cert__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.3rem 8%; font-size: 0.9rem; color: var(--ink);
}
.cert__row span {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
}
.cert__row b { font-weight: 700; }
.cert__row .mono { font-family: var(--mono); font-size: 0.8rem; font-weight: 600; }

.cert__motto { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-soft); }

.cert__seal {
  position: absolute; right: 9%; bottom: -16px;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 900; font-size: 1.1rem; color: #f2d7d0;
  background:
    radial-gradient(circle at 35% 30%, #c96a5e, var(--stamp-red) 55%, #7e2f28 100%);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.35),
    inset 0 0 0 3px rgba(126, 47, 40, 0.6),
    inset 0 0 0 7px rgba(242, 215, 208, 0.18);
  transform: rotate(-10deg);
}

.stamp--cert {
  position: absolute; left: 7%; top: 12%;
  font-size: 0.78rem;
  animation: stamp-in 0.5s 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.cert__after { font-size: 0.9rem; color: var(--ink-soft); font-style: italic; }

/* ------------------------------------------------------------ falling bills */

.rain {
  position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden;
}
.rain__bill {
  position: absolute; top: -8vh;
  width: 34px; height: 16px; border-radius: 3px;
  background: linear-gradient(180deg, #b3bb90, var(--bill-deep));
  border: 1.5px solid #55603f;
  box-shadow: inset 0 0 0 1.5px rgba(240, 230, 201, 0.4);
  animation: bill-fall linear both;
}
@keyframes bill-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(115vh) rotate(540deg); opacity: 0; }
}

/* ------------------------------------------------------------ footer */

.footer { text-align: center; margin-top: 3rem; }

.footer__rule {
  display: block; height: 1px; width: 60%; margin: 0 auto 1.4rem;
  background: linear-gradient(90deg, transparent, rgba(217, 180, 95, 0.5), transparent);
}

.footer__motto { font-size: 0.9rem; color: rgba(240, 230, 201, 0.6); font-style: normal; }
.footer__motto em { color: var(--gold); }

.footer__x {
  display: inline-block; margin-top: 0.7rem;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em;
  color: var(--paper-dim); text-decoration: none;
  border-bottom: 1px solid rgba(217, 180, 95, 0.4);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer__x:hover { color: var(--gold); border-color: var(--gold); }

/* ------------------------------------------------------------ small screens */

@media (max-width: 640px) {
  /* drop the APPROVED stamp into flow so it never covers the heading */
  .stamp--cert { position: static; display: inline-block; margin-top: 0.8rem; }
}

@media (max-width: 480px) {
  .topbar { flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0.75rem 1rem; }
  .topbar__brand { letter-spacing: 0.2em; font-size: 0.74rem; }
  .page { padding: 2.4rem 0.9rem 3rem; }
  .panel { padding: 1.4rem 1.1rem 1.6rem; }
  .panel__head { flex-wrap: wrap; gap: 0.4rem 0.9rem; }
  .panel__count { width: 100%; order: 3; }
  .duty { flex-wrap: wrap; }
  .duty__body { flex-basis: calc(100% - 3rem); }
  .duty__btn, .duty__stamp { margin-left: auto; }
  .cert__row { padding: 0.3rem 2%; }
  .cert__seal { right: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}