/* The community raffle page.

   This is the one Doughies page a stranger is most likely to see first — it
   gets pasted into a community's Discord and opened by people who have never
   heard of us. It used to be a stack of plain cards on a striped background:
   correct, and nothing like the rest of the diner.

   Same tokens, same art, same furniture as /catering and /regulars — the
   checkered floor, the receipt dividers, the guest-check stub, the diner-at-
   night footer — so arriving here from a Discord link and arriving from the
   homepage feel like the same shop. */

@font-face { font-family:'Fredoka'; src:url('/fonts/fredoka.woff2') format('woff2'); font-weight:400 600; font-display:swap; }
@font-face { font-family:'Bowlby One'; src:url('/fonts/bowlby-one.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Pacifico'; src:url('/fonts/pacifico.woff2') format('woff2'); font-weight:400; font-display:swap; }

:root {
  --cream:#FFF3D6; --paper:#F8E5BC; --mint:#78C3B5; --neon:#8FF3E0; --teal:#216A69;
  --cherry:#E9362B; --butter:#F5B82E; --pink:#ED8FAE; --navy:#101D35; --choc:#2B130D;
  --line:3px; --r-md:26px; --r-lg:32px;
  --headline:'Bowlby One','Fredoka',ui-rounded,system-ui,sans-serif;
  --script:'Pacifico','Brush Script MT',cursive;
  --display:'Fredoka',ui-rounded,ui-sans-serif,system-ui,sans-serif;
  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
* { box-sizing:border-box; }
html, body { overflow-x:clip; margin:0; }
html { scroll-behavior:smooth; scrollbar-color:var(--cherry) var(--paper); }
::-webkit-scrollbar { width:12px; }
::-webkit-scrollbar-track { background:var(--paper); }
::-webkit-scrollbar-thumb { background:var(--cherry); border-radius:999px; border:3px solid var(--paper); }

/* the diner floor, washed back so text stays comfortable on it */
body {
  background-color:var(--cream); color:var(--choc); font:17px/1.6 var(--body);
  -webkit-font-smoothing:antialiased; min-height:100dvh; display:flex; flex-direction:column;
  background-image:
    radial-gradient(1200px 520px at 50% -200px, rgba(120,195,181,.4), transparent 72%),
    linear-gradient(rgba(255,243,214,.94), rgba(255,243,214,.94)),
    url('/assets/background/bg_checkered_tile.webp');
  background-size:auto, auto, 900px auto;
  background-repeat:no-repeat, no-repeat, repeat;
  background-position:center top, center, center;
}
h1,h2,h3 { font-family:var(--headline); font-weight:400; line-height:1.1; margin:0; letter-spacing:.012em; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
p { margin:0; }
::selection { background:rgba(245,184,46,.55); }
:focus-visible { outline:3px solid var(--cherry); outline-offset:3px; border-radius:6px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
[hidden] { display:none !important; }

/* paper grain, the same one every other page puts on its cards */
.grain { position:relative; }
.grain::after {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------------- the nav, same as every other page ----------------
   A raffle link is the front door for people arriving from a Discord, and it
   was showing them a different shop: a thin sticky strip with a shrunken logo
   where the rest of the site has the floating chrome pill. Same markup, same
   CSS, same drawer — including the Connect X button, which also gives this
   page the account modal it was missing. */
header {
  position:fixed; top:14px; left:0; right:0; z-index:80;
  padding:0 clamp(12px,2.5vw,28px); pointer-events:none;
}
.navbar {
  pointer-events:auto; position:relative; max-width:1400px; margin:0 auto;
  padding:4px; border-radius:999px;
  background:linear-gradient(180deg,#FDFDFB 0%,#CBD4DA 28%,#8E9AA4 52%,#EAEEF1 74%,#A6B0B8 100%);
  box-shadow:0 6px 0 rgba(43,19,13,.4);
  transition:box-shadow .3s ease;
}
header.scrolled .navbar { box-shadow:0 10px 26px rgba(16,29,53,.35), 0 6px 0 rgba(43,19,13,.4); }
.navwrap {
  border-radius:999px; background:rgba(255,243,214,.97);
  border:var(--line) solid var(--choc);
  display:flex; align-items:center; gap:10px;
  padding:6px 8px 6px 14px;
}
.wordmark { display:inline-flex; align-items:center; text-decoration:none; flex:none; }
.wordmark img { height:46px; width:auto; display:block; transform:rotate(-2deg); transition:transform .25s cubic-bezier(.2,.7,.3,1); }
.wordmark:hover img { transform:rotate(2deg) scale(1.05); }
.navlinks { display:flex; gap:2px; margin:0 auto; align-items:center; min-width:0; }
.navlinks a {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--display); font-weight:600; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  color:var(--choc); white-space:nowrap;
  padding:8px 9px; border-radius:999px;
  transition:color .2s, background .2s, transform .2s;
}
.navlinks a:hover { background:rgba(233,54,43,.13); color:var(--cherry); transform:translateY(-1px); }
.navlinks a[aria-current="page"] { background:rgba(233,54,43,.13); color:var(--cherry); }
.navlinks a img { width:21px; height:21px; flex:none; }
.nav-cta {
  min-height:44px; padding:9px 18px; font-size:.88rem; flex:none;
  align-self:center; margin-top:-2px;
  box-shadow:0 3px 0 var(--choc), inset 0 3px 0 rgba(255,255,255,.28);
}
.nav-cta:hover { transform:none; box-shadow:0 5px 0 var(--choc), inset 0 3px 0 rgba(255,255,255,.28); }
.nav-cta:active { transform:none; box-shadow:0 2px 0 var(--choc), inset 0 3px 0 rgba(255,255,255,.28); }
.nav-cta img { width:22px; height:22px; }
.menu-btn {
  display:none; margin-left:auto; width:46px; height:46px; border-radius:999px;
  background:var(--cherry); border:var(--line) solid var(--choc); box-shadow:0 4px 0 var(--choc);
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:0; flex:none;
}
.menu-btn .bar { display:block; width:20px; height:3px; border-radius:2px; background:var(--cream); }
.menu-btn .bar:last-child { width:14px; }
/* Scoped to .navwrap so these beat `.btn { display:inline-flex }`, which is
   declared later in this file — equal specificity, and last one wins, so the
   CTA sat next to the hamburger on a phone instead of collapsing into it. */
@media (max-width:1120px) {
  .navwrap .navlinks, .navwrap .nav-cta { display:none; }
  .navwrap .menu-btn { display:inline-flex; }
}

/* ---------------- drawer ---------------- */
#drawer {
  position:fixed; inset:0; z-index:100; background:var(--cream);
  display:flex; flex-direction:column;
  padding:20px 24px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(-102%); transition:transform .32s cubic-bezier(.2,.7,.3,1);
  overflow:hidden;
}
#drawer.open { transform:translateY(0); }
#drawer .drawer-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
#drawer .drawer-top img { height:44px; width:auto; }
#drawer .close-x {
  width:46px; height:46px; border-radius:999px; background:var(--cream);
  border:var(--line) solid var(--choc); box-shadow:0 3px 0 rgba(43,19,13,.3);
  cursor:pointer; font-size:22px; font-weight:700; color:var(--choc); line-height:1; padding:0;
}
#drawer nav { display:flex; flex-direction:column; gap:4px; position:relative; z-index:2; }
#drawer nav a {
  display:flex; align-items:center; gap:14px;
  font-family:var(--display); font-weight:600; font-size:1.25rem; text-decoration:none;
  padding:11px 12px; border-radius:16px; min-height:44px; color:var(--choc);
}
#drawer nav a:hover { background:rgba(233,54,43,.12); color:var(--cherry); }
#drawer nav a img { width:40px; height:40px; flex:none; }
#drawer .drawer-cta { margin-top:20px; align-self:flex-start; position:relative; z-index:2; }
#drawer .peek { position:relative; margin-top:auto; height:min(215px,26vh); min-height:70px; pointer-events:none; }
#drawer .peek::before, #drawer .peek::after { content:''; position:absolute; bottom:0; top:0; }
#drawer .peek::before { left:-40px; width:46%; background:url('/assets/doughies/peek-left.webp') left bottom / contain no-repeat; }
#drawer .peek::after { right:-40px; width:46%; background:url('/assets/doughies/peek-right.webp') right bottom / contain no-repeat; }

/* ---------------- buttons ---------------- */
.btn {
  font-family:var(--display); font-weight:600; font-size:1rem; cursor:pointer;
  border:var(--line) solid var(--choc); border-radius:999px; padding:12px 24px;
  background:var(--butter); color:var(--choc);
  box-shadow:0 4px 0 var(--choc), inset 0 3px 0 rgba(255,255,255,.3);
  transition:transform .12s, box-shadow .12s; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; line-height:1;
}
.btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 6px 0 var(--choc), inset 0 3px 0 rgba(255,255,255,.3); }
.btn:active:not(:disabled) { transform:translateY(2px); box-shadow:0 2px 0 var(--choc), inset 0 3px 0 rgba(255,255,255,.3); }
.btn:disabled { opacity:.55; cursor:default; box-shadow:0 2px 0 var(--choc); }
.btn.cherry { background:var(--cherry); color:#fff; }
.btn.ghost { background:var(--cream); }
.btn.sm { font-size:.86rem; padding:9px 18px; }

/* ---------------- layout ---------------- */
main { flex:1; width:100%; max-width:960px; margin:0 auto; padding:clamp(96px,11vw,124px) 20px 60px; }
.card {
  background:var(--paper); border:4px solid var(--choc); border-radius:var(--r-lg);
  box-shadow:0 9px 0 rgba(43,19,13,.3); padding:clamp(24px,4.4vw,44px); margin-bottom:26px;
}
.div-receipt {
  width:min(360px,72%); height:clamp(16px,2.4vw,26px); margin:clamp(4px,1.4vw,16px) auto 26px;
  background:url('/assets/divider/divider_receipt.webp') center / contain no-repeat;
  pointer-events:none;
}
.eyebrow {
  display:block; font-family:var(--display); font-weight:700; font-size:.76rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--teal);
}
.eyebrow .st { color:var(--cherry); }

/* ---------------- the hero ---------------- */
.hero { text-align:center; position:relative; overflow:hidden; }
/* the register sits behind the headline like a shop sign, not beside it */
.hero::before {
  content:''; position:absolute; right:-26px; top:-18px; width:190px; height:190px;
  background:url('/assets/custom/deco_cash_register.webp') center / contain no-repeat;
  opacity:.14; transform:rotate(7deg); pointer-events:none;
}
@media (max-width:620px) { .hero::before { width:130px; height:130px; right:-30px; } }
.tag {
  position:relative; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--display); font-weight:700; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--mint); color:var(--choc); border:var(--line) solid var(--choc);
  border-radius:999px; padding:6px 17px; box-shadow:0 3px 0 var(--choc);
}
.tag::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--cherry); border:2px solid var(--choc); }
.tag.open::before { background:var(--cherry); animation:pulseDot 1.6s ease-in-out infinite; }
.tag.closed { background:var(--paper); }
.tag.closed::before { background:rgba(43,19,13,.4); }
.tag.drawn { background:var(--butter); }
.tag.drawn::before { background:var(--teal); }
.tag.void { background:var(--cherry); color:#fff; }
.tag.void::before { background:var(--cream); }
@keyframes pulseDot { 50% { transform:scale(1.35); opacity:.65; } }

.kicker { font-family:var(--script); color:var(--teal); font-size:clamp(1.35rem,3.6vw,1.75rem); margin:14px 0 0; }
.hero h1 {
  position:relative; font-size:clamp(2rem,7vw,3.4rem); color:var(--cherry);
  text-shadow:0 4px 0 var(--choc);
  margin-top:2px; overflow-wrap:anywhere;
}
.byline { font-family:var(--display); font-weight:600; margin-top:12px; font-size:.98rem; }
.byline b { color:var(--teal); }

.stats { display:flex; gap:clamp(10px,2vw,16px); justify-content:center; flex-wrap:wrap; margin-top:26px; }
.stat {
  position:relative; background:var(--cream); border:var(--line) solid var(--choc);
  border-radius:20px; box-shadow:0 5px 0 var(--choc); padding:14px 24px; min-width:126px;
}
.stat b { display:block; font-family:var(--headline); font-size:clamp(1.6rem,4.6vw,2rem); line-height:1.15; color:var(--teal); }
.stat span { font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; opacity:.7; }
.stat.hot { background:var(--butter); }
.stat.hot b { color:var(--cherry); }

.countdown {
  margin-top:22px; font-family:var(--display); font-weight:600; font-size:1rem;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--cream); border:var(--line) solid var(--choc); border-radius:999px;
  padding:8px 20px; box-shadow:0 3px 0 var(--choc);
}
.countdown b { font-family:var(--headline); color:var(--cherry); font-variant-numeric:tabular-nums; }
.share { display:flex; gap:11px; justify-content:center; flex-wrap:wrap; margin-top:24px; }

/* ---------------- the entry stub ----------------
   A guest check, because that is what the rest of the counter hands you. */
.sec-head { text-align:center; margin-bottom:22px; }
.sec-head h2 { font-size:clamp(1.5rem,4.4vw,2.1rem); margin-top:6px; }
.sec-head p { margin-top:8px; opacity:.75; font-size:.95rem; }
.badge-ic {
  width:58px; height:58px; margin:0 auto 12px; display:grid; place-items:center;
  background:var(--butter); border:var(--line) solid var(--choc); border-radius:18px;
  box-shadow:0 4px 0 var(--choc);
}
.badge-ic img { width:34px; height:34px; }

/* A torn-off stub: a dashed tear line under the heading rather than notched
   half-circles on the card edge, which at this size just read as debris. */
.stub .sec-head { padding-bottom:20px; border-bottom:3px dashed rgba(43,19,13,.28); }

.form-grid { display:grid; gap:16px; max-width:520px; margin:0 auto; }
label.f { display:flex; flex-direction:column; gap:6px; text-align:left; }
label.f > span.lbl {
  font-family:var(--display); font-weight:700; font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(43,19,13,.72);
}
label.f .hint { font-family:var(--body); font-weight:400; font-size:.8rem; opacity:.66; letter-spacing:0; text-transform:none; }
input[type=text], input[type=email] {
  font:inherit; font-size:1rem; color:var(--choc); background:var(--cream);
  border:var(--line) solid var(--choc); border-radius:14px; padding:13px 16px; outline:none; width:100%;
  box-shadow:inset 0 2px 0 rgba(43,19,13,.1);
}
input::placeholder { color:rgba(43,19,13,.42); }
input:focus { border-color:var(--cherry); box-shadow:0 0 0 3px rgba(233,54,43,.2); }
input[readonly] { opacity:.8; cursor:not-allowed; background:rgba(255,243,214,.6); }

/* ---------------- wallet proof ---------------- */
.wallet-block {
  background:var(--cream); border:var(--line) solid var(--choc); border-radius:20px;
  box-shadow:0 4px 0 var(--choc); padding:18px; text-align:center;
}
.wallet-why { font-size:.88rem; opacity:.82; margin-bottom:14px; }
.wallet-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.wallet-state { margin-top:12px; font-family:var(--display); font-weight:600; font-size:.86rem; min-height:1.3em; }
.wallet-state.ok { color:var(--teal); }
.wallet-state.err { color:var(--cherry); }
.proven-pill {
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.06em;
  background:var(--mint); border:2px solid var(--choc); border-radius:999px; padding:1px 9px;
}

.msg { min-height:1.5em; margin-top:16px; font-family:var(--display); font-weight:600; text-align:center; }
.msg.ok { color:var(--teal); }
.msg.err { color:var(--cherry); }
.entered {
  text-align:center; background:var(--mint); border:var(--line) solid var(--choc); border-radius:22px;
  box-shadow:0 5px 0 var(--choc); padding:26px;
}
.entered h3 { font-size:1.4rem; margin-bottom:8px; }

/* ---------------- winners ---------------- */
.wlist { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:9px; }
.wrow {
  display:flex; align-items:center; gap:13px; padding:12px 17px;
  background:var(--cream); border:var(--line) solid var(--choc); border-radius:15px;
  box-shadow:0 3px 0 var(--choc);
}
.wrow.me { background:var(--butter); box-shadow:0 3px 0 var(--choc), 0 0 0 3px rgba(233,54,43,.35); }
.wpos { font-family:var(--headline); min-width:2.1em; color:var(--cherry); }
/* The handle is the point of these rows, so it must never be the thing that
   loses the fight for width. `flex:1; min-width:0` let it collapse to nothing
   the moment the address beside it was long — on a phone the list rendered as
   a column of addresses with no names at all. */
.wh { font-weight:700; flex:1 1 auto; min-width:5.5em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; opacity:.62;
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------------- entrants ---------------- */
.elist {
  max-height:330px; overflow-y:auto; margin-top:18px;
  border:var(--line) solid var(--choc); border-radius:18px; background:var(--cream);
}
.erow { display:flex; gap:11px; align-items:center; padding:9px 15px; border-bottom:2px solid rgba(43,19,13,.09); font-size:.9rem; }
.erow:last-child { border-bottom:0; }
.erow .n { font-size:.74rem; opacity:.45; min-width:2.6em; font-variant-numeric:tabular-nums; }
.erow .h { font-weight:700; flex:1 1 auto; min-width:5.5em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.erow .a {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.76rem; opacity:.58;
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.erow.win { background:var(--butter); }

/* ---------------- fairness (the diner at night) ---------------- */
.fair {
  color:var(--cream); border-color:var(--choc);
  background-color:var(--navy);
  background-image:
    linear-gradient(rgba(16,29,53,.93), rgba(16,29,53,.93)),
    url('/assets/background/bg_checkered_tile.webp');
  background-size:auto, 620px auto;
}
.fair h2 { color:var(--butter); font-size:clamp(1.3rem,3.6vw,1.65rem); }
.fair .eyebrow { color:var(--neon); }
.fair p { margin-top:12px; font-size:.95rem; opacity:.92; }
.hashrow { margin-top:20px; display:grid; gap:11px; }
.hashbox { background:rgba(255,243,214,.1); border:2px solid rgba(255,243,214,.28); border-radius:14px; padding:12px 15px; }
.hashbox .k { font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; opacity:.62; font-weight:700; }
.hashbox .v { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.76rem; word-break:break-all; margin-top:4px; }
.hashbox .v.pending { opacity:.5; font-style:italic; font-family:var(--body); }
details.verify { margin-top:18px; font-size:.9rem; }
details.verify summary { cursor:pointer; font-family:var(--display); font-weight:600; color:var(--butter); }
details.verify pre {
  background:rgba(0,0,0,.34); border-radius:12px; padding:14px; overflow-x:auto;
  font-size:.74rem; line-height:1.55; margin-top:12px;
}

/* ---------------- the draw ---------------- */
.drum-stage {
  position:fixed; inset:0; z-index:80; padding:22px;
  background:rgba(16,29,53,.94); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  animation:drumIn .2s ease-out;
}
@keyframes drumIn { from { opacity:0; } }
.drum-inner { width:100%; max-width:560px; text-align:center; }
.drum-kicker { font-family:var(--script); color:var(--butter); font-size:clamp(1.4rem,4.6vw,1.9rem); margin-bottom:16px; }
.drum-window {
  background:var(--paper); border:4px solid var(--choc); border-radius:24px;
  box-shadow:0 10px 0 var(--choc); padding:28px 18px; overflow:hidden;
  position:relative; min-height:108px; display:flex; align-items:center; justify-content:center;
}
.drum-window::before, .drum-window::after {
  content:''; position:absolute; left:0; right:0; height:28px; pointer-events:none;
}
.drum-window::before { top:0; background:linear-gradient(var(--paper), transparent); }
.drum-window::after { bottom:0; background:linear-gradient(transparent, var(--paper)); }
.drum-name {
  font-family:var(--headline); font-size:clamp(1.4rem,5.4vw,2.2rem); color:var(--cherry);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.drum-name.settling { animation:drumSettle .34s cubic-bezier(.16,1.3,.4,1); }
@keyframes drumSettle {
  0% { transform:translateY(-26px) scale(.9); opacity:.3; }
  60% { transform:translateY(3px) scale(1.06); opacity:1; }
  100% { transform:none; }
}
.drum-name.roll { animation:drumRoll .07s linear; }
@keyframes drumRoll { from { transform:translateY(-14px); opacity:.35; } }
.drum-picked { margin-top:18px; max-height:34vh; overflow-y:auto; }
.drum-picked .wrow { animation:stampIn .32s cubic-bezier(.2,1.5,.4,1); }
@keyframes stampIn {
  from { transform:scale(1.5) rotate(-4deg); opacity:0; }
  60% { transform:scale(.97) rotate(1deg); opacity:1; }
}
#drumSkip { margin-top:20px; }
.drum-stage[hidden] { display:none !important; }

/* ---------------- footer: diner at night ---------------- */
footer {
  position:relative; overflow:hidden; color:var(--cream); margin-top:auto;
  background-color:var(--navy);
  background-image:
    linear-gradient(rgba(16,29,53,.9), rgba(16,29,53,.9)),
    url('/assets/background/bg_checkered_tile.webp');
  background-size:auto, 880px auto;
  border-top:4px solid var(--choc);
}
.foot-checker {
  height:12px; border-bottom:var(--line) solid var(--choc);
  background:repeating-conic-gradient(var(--cherry) 0% 25%, var(--cream) 0% 50%) 0 0 / 24px 24px;
}
.foot-in { position:relative; z-index:2; max-width:960px; margin:0 auto; padding:40px 20px 46px; text-align:center; }
/* The wordmark is 711x320. It was being forced into a 40x40 box, which
   squashed it into a smear — same logo, same treatment as the nav and the
   main site's footer: fixed height, width auto, never a square. */
.foot-brand { display:inline-block; text-decoration:none; }
.foot-brand img { height:clamp(58px,9vw,82px); width:auto; filter:drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
.foot-tag { margin-top:14px; font-family:var(--script); font-size:1.1rem; color:rgba(255,243,214,.8); }
.foot-note { margin-top:8px; font-size:.9rem; opacity:.72; }
.foot-social { margin-top:20px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.foot-social .btn { min-height:42px; padding:8px 18px; font-size:.84rem; }
.btn.mint { background:var(--mint); }
.btn.pink { background:var(--pink); }
footer .spark { position:absolute; text-shadow:0 0 12px currentColor; font-size:18px; animation:twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity:.25; transform:scale(.85); } 50% { opacity:1; transform:scale(1.1); } }

.state-note { text-align:center; font-family:var(--display); font-weight:600; font-size:1.05rem; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html { scroll-behavior:auto; }
}
@media (max-width:560px) {
  .card { border-radius:22px; box-shadow:0 6px 0 rgba(43,19,13,.3); }
  .stat { min-width:98px; padding:11px 16px; }
  main { padding-bottom:44px; }
}