:root {
  --night: #120a24; --night2: #24123f; --pumpkin: #ff8a1f; --glow: #ffcf6b;
  --bone: #f6efe2; --mist: #b9a8d9; --ink: #1d1428;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 0%, #3a1d63 0%, var(--night2) 35%, var(--night) 75%);
  color: var(--bone); font-family: "Fredoka", system-ui, sans-serif; overflow-x: hidden;
  min-height: 100vh;
}
.hidden { display: none !important; }

/* ---------- night sky ---------- */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.moon { position: absolute; top: 6vh; right: 8vw; width: 16vmin; height: 16vmin; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8dc, #f3d98c 60%, #d9b45f);
  box-shadow: 0 0 60px 20px rgba(255, 220, 140, .35), 0 0 160px 60px rgba(255, 200, 120, .12); }
.stars { position: absolute; inset: 0; background-image:
  radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 60%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 70% 30%, #fff, transparent), radial-gradient(1px 1px at 85% 75%, #fff, transparent),
  radial-gradient(1px 1px at 50% 10%, #fff, transparent), radial-gradient(1.5px 1.5px at 20% 85%, #fff, transparent),
  radial-gradient(1px 1px at 92% 45%, #fff, transparent), radial-gradient(1px 1px at 5% 50%, #fff, transparent);
  animation: twinkle 4s ease-in-out infinite alternate; opacity: .8; }
@keyframes twinkle { to { opacity: .35; } }
.ghost { position: absolute; font-size: 9vmin; opacity: .55; filter: drop-shadow(0 0 18px rgba(255,255,255,.5)); }
.g1 { left: 5vw; top: 55vh; animation: float 7s ease-in-out infinite; }
.g2 { right: 6vw; top: 62vh; animation: float 9s ease-in-out infinite reverse; font-size: 7vmin; }
@keyframes float { 0%,100% { transform: translate(0,0) rotate(-4deg); } 50% { transform: translate(14px,-28px) rotate(5deg); } }
/* Bats: .bat crosses the sky, .bat-bob swoops up and down, and each wing
   beats around its shoulder, with a short glide every few seconds. */
.bat { position: absolute; left: 0; width: max(var(--w), var(--min)); animation: bat-cross var(--t) linear infinite;
  will-change: transform; --w: 7vmin; --min: 40px; --t: 16s; --wing: 2.4s; --swoop: 4.2s; }
.bat-bob { animation: bat-swoop var(--swoop) ease-in-out infinite; }
.bat svg { display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(.5px -1px 1px rgba(255, 214, 150, .55)); }
.bat .body { fill: #08040f; animation: bat-beat var(--wing) ease-in-out infinite; }
.bat .wing { fill: #130a22; transform-box: view-box; transform-origin: 0 0;
  animation: bat-wing var(--wing) ease-in-out infinite; }
.b1 { top: 6vh; --w: 13vmin; --min: 68px; --t: 15s; --wing: 2.2s; --swoop: 3.8s; animation-delay: -2s; }
.b2 { top: 27vh; --w: 8vmin; --min: 44px; --t: 21s; --wing: 2.8s; --swoop: 5s; animation-delay: -11s; animation-direction: reverse; opacity: .85; }
.b3 { top: 42vh; --w: 10vmin; --min: 56px; --t: 18s; --wing: 2.5s; --swoop: 4.4s; animation-delay: -6s; }
.b4 { top: 16vh; --w: 5.5vmin; --min: 30px; --t: 27s; --wing: 3.2s; --swoop: 6s; animation-delay: -19s; opacity: .7; }
.b2 .bat-bob, .b2 .wing, .b2 .body { animation-delay: -1.1s; }
.b3 .bat-bob, .b3 .wing, .b3 .body { animation-delay: -.6s; }
.b4 .bat-bob, .b4 .wing, .b4 .body { animation-delay: -1.9s; }
@keyframes bat-cross { from { transform: translateX(-12vw); } to { transform: translateX(112vw); } }
@keyframes bat-swoop {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  30% { transform: translateY(-3.5vh) rotate(3deg); }
  60% { transform: translateY(2.5vh) rotate(-6deg); }
  80% { transform: translateY(-1vh) rotate(2deg); } }
/* 12 beats in the first 70%, then a glide with wings held out flat. */
@keyframes bat-wing {
  0%, 5.8%, 11.7%, 17.5%, 23.3%, 29.2%, 35%, 40.8%, 46.7%, 52.5%, 58.3%, 64.2%, 70%, 100% { transform: rotate(-36deg) scale(.84, .95); }
  2.9%, 8.8%, 14.6%, 20.4%, 26.2%, 32.1%, 37.9%, 43.8%, 49.6%, 55.4%, 61.2%, 67.1% { transform: rotate(30deg) scale(.88, .7); }
  76%, 95% { transform: rotate(-6deg) scale(1, .8); } }
@keyframes bat-beat {
  0%, 5.8%, 11.7%, 17.5%, 23.3%, 29.2%, 35%, 40.8%, 46.7%, 52.5%, 58.3%, 64.2% { transform: translateY(1.5px); }
  2.9%, 8.8%, 14.6%, 20.4%, 26.2%, 32.1%, 37.9%, 43.8%, 49.6%, 55.4%, 61.2%, 67.1% { transform: translateY(-1.5px); }
  70%, 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .bat, .bat * { animation: none !important; }
  .bat .wing { transform: rotate(-6deg) scale(1, .8); }
  .b1 { transform: translateX(14vw); } .b2 { transform: translateX(58vw); }
  .b3 { transform: translateX(30vw); } .b4 { transform: translateX(44vw); }
}
.fog { position: absolute; left: -20%; right: -20%; bottom: -5vh; height: 28vh;
  background: radial-gradient(ellipse at 50% 100%, rgba(185,168,217,.28), transparent 70%); animation: drift 12s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translateX(6%); } }

/* ---------- screens ---------- */
.screen { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 7vh 20px 40px; text-align: center; }
.eyebrow { color: var(--glow); letter-spacing: .08em; font-weight: 500; margin: 0 0 10px; }
h1 { font-family: "Cinzel Decorative", serif; font-weight: 900; font-size: clamp(38px, 7.4vw, 72px); line-height: 1.05; margin: 0 0 22px;
  color: var(--bone); text-shadow: 0 0 22px rgba(255,138,31,.6), 0 4px 0 #3b1a0a; }
h2 { font-family: "Cinzel Decorative", serif; font-size: clamp(26px, 4.6vw, 42px); margin: 12px 0 18px; text-shadow: 0 0 18px rgba(255,138,31,.45); }
.lede { font-size: clamp(18px, 2.6vw, 23px); line-height: 1.45; color: #efe6ff; margin: 0 auto 14px; max-width: 620px; }
.lede b { color: var(--glow); }
.lede.small { font-size: 17px; color: var(--mist); }
.big-btn { margin: 26px auto 8px; display: inline-flex; align-items: center; gap: 14px; border: 0; cursor: pointer;
  font: 600 clamp(22px, 3.4vw, 30px) "Fredoka", sans-serif; color: #2a1200; padding: 22px 44px; border-radius: 999px;
  background: linear-gradient(180deg, #ffb347, var(--pumpkin)); box-shadow: 0 0 0 6px rgba(255,138,31,.25), 0 0 40px rgba(255,138,31,.7), 0 8px 0 #9c4300;
  animation: pulse 2.2s ease-in-out infinite; }
.big-btn:active { transform: translateY(4px); box-shadow: 0 0 0 6px rgba(255,138,31,.25), 0 4px 0 #9c4300; }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(255,138,31,.12), 0 0 70px rgba(255,138,31,.9), 0 8px 0 #9c4300; } }
.flame { display: inline-block; animation: flicker 1.3s infinite alternate; }
@keyframes flicker { 30% { transform: rotate(-4deg) scale(1.05); } 70% { transform: rotate(3deg) scale(.96); } }
.how { list-style: none; padding: 0; margin: 28px auto 10px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.how li { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 10px 16px; font-size: 16px; color: #e6dcfb; }
.how span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pumpkin); color: #2a1200; font-weight: 600; margin-right: 8px; font-size: 14px; }
.fine { color: var(--mist); font-size: 14px; margin-top: 18px; }

/* working */
.cauldron { position: relative; width: 150px; height: 150px; margin: 0 auto; display: grid; place-items: center; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--pumpkin); border-right-color: var(--glow);
  animation: spin 1.4s linear infinite; filter: drop-shadow(0 0 10px var(--pumpkin)); }
@keyframes spin { to { transform: rotate(360deg); } }
.big-emoji { font-size: 76px; animation: flicker 1.1s infinite alternate; }
.bar { height: 16px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; max-width: 560px; margin: 8px auto; }
.fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--pumpkin), var(--glow)); box-shadow: 0 0 20px var(--pumpkin); }
.clock { color: var(--mist); margin: 6px 0 16px; font-variant-numeric: tabular-nums; }
.steps { list-style: none; padding: 0; margin: 0 auto 18px; max-width: 460px; text-align: left; font-size: 19px; }
.steps li { padding: 6px 0 6px 40px; position: relative; color: rgba(255,255,255,.4); }
.steps li::before { content: "○"; position: absolute; left: 8px; }
.steps li.active { color: var(--bone); font-weight: 500; }
.steps li.active::before { content: "🕯️"; left: 2px; }
.steps li.done { color: #c9f2c0; }
.steps li.done::before { content: "✓"; color: #8de07c; }
.parade { min-height: 190px; max-width: 560px; margin: 0 auto; }
.spirit { padding: 7px 14px; margin: 6px auto; border-radius: 12px; background: rgba(255,255,255,.06); color: #e4d9ff;
  font-family: "IM Fell English", serif; font-size: 19px; animation: rise .6s ease-out; }
.spirit.count { color: var(--glow); font-family: "Fredoka"; font-weight: 600; }
.spirit.found { background: rgba(255,138,31,.16); color: #ffe2b8; }
.spirit.chatter { font-style: italic; color: var(--mist); }
.spirit:nth-child(n+3) { opacity: .6; } .spirit:nth-child(n+4) { opacity: .35; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }

/* done */
.row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.small-btn { font-size: 20px; padding: 14px 28px; animation: none; }
.ghost-btn { background: rgba(255,255,255,.12); color: var(--bone); box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.preview-wrap { margin: 28px auto 0; max-width: 620px; }
.preview { background: #fff; color: var(--ink); border-radius: 6px; padding: 18px; text-align: left; box-shadow: 0 10px 40px rgba(0,0,0,.6);
  transform: rotate(-1deg); }

/* ---------- the printed sheet (also used for the preview) ----------
   Every size is multiplied by --k. fitSheet() in halloween.js lowers --k
   until the page fits on one Letter sheet. */
.sheet { display: none; }
.frame { --k: 1; border: 3px double #3b2a4d; padding: 16px 22px 12px; position: relative; font-family: "IM Fell English", Georgia, serif; color: #1d1428;
  display: flex; flex-direction: column; }
.frame header { text-align: center; border-bottom: 1px solid #b9a8d9; padding-bottom: calc(8px * var(--k)); margin-bottom: calc(10px * var(--k)); position: relative; }
.frame .corner { position: absolute; left: 0; top: 0; font-size: calc(30px * var(--k)); } .frame .corner.r { left: auto; right: 0; }
.frame .kicker { margin: 0; font-family: "Fredoka", sans-serif; font-size: calc(11pt * var(--k)); letter-spacing: .1em; text-transform: uppercase; color: #6b4f8a; }
.frame h2 { font-family: "Cinzel Decorative", serif; font-size: calc(23pt * var(--k)); margin: 4px 30px 6px; color: #2a1640; text-shadow: none; line-height: 1.1; }
.frame .intro { margin: 0; font-style: italic; font-size: calc(12pt * var(--k)); }
.story { margin: calc(10px * var(--k)) 0 calc(12px * var(--k)); }
.tag { display: inline-block; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: calc(10.5pt * var(--k)); letter-spacing: .06em; text-transform: uppercase;
  border: 1.5px solid #2a1640; border-radius: 99px; padding: 1px 10px; }
.story h3 { font-family: "Cinzel Decorative", serif; font-size: calc(15pt * var(--k)); margin: 6px 0 1px; }
.story .who { font-family: "Fredoka", sans-serif; font-size: calc(10.5pt * var(--k)); color: #6b4f8a; margin-bottom: 4px; }
.story p { margin: 0 0 calc(5px * var(--k)); font-size: calc(12.5pt * var(--k)); line-height: 1.38; }
.story .ask { font-family: "Fredoka", sans-serif; font-weight: 500; font-size: calc(11.5pt * var(--k)); margin: 2px 0 4px; }
.story .source { font-size: calc(10pt * var(--k)); font-style: italic; color: #5a4a6a; border-left: 3px solid #d7c8ee; padding-left: 8px; margin-top: 4px; }
/* A grid, not CSS columns: rows stay paired and never split oddly. */
.roll ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: calc(5px * var(--k)); }
.roll li { font-size: calc(10.5pt * var(--k)); line-height: 1.25; }
.roll li span { color: #6b4f8a; font-family: "Fredoka", sans-serif; font-size: calc(9.5pt * var(--k)); display: block; }
.roll li em { display: block; font-size: calc(9.5pt * var(--k)); }
.frame footer { margin-top: 0; border-top: 1px solid #b9a8d9; padding-top: 6px; text-align: center; font-family: "Fredoka", sans-serif; font-size: calc(9.5pt * var(--k)); color: #4a3a5a; }
.roll { margin-bottom: 8px; }
.research { border: 1.5px dashed #6b4f8a; border-radius: 10px; padding: calc(8px * var(--k)) 14px; margin: calc(8px * var(--k)) 0; }
.research .summary { font-size: calc(12pt * var(--k)); margin: 6px 0; line-height: 1.35; }
.research blockquote { margin: 6px 0 2px; font-style: italic; font-size: calc(12pt * var(--k)); line-height: 1.35; }
.research cite { display: block; font-style: normal; font-family: "Fredoka", sans-serif; font-size: calc(9.5pt * var(--k)); color: #6b4f8a; margin-top: 3px; }
.doyouknow ol { margin: 6px 0 8px; padding-left: 22px; font-size: calc(12pt * var(--k)); line-height: 1.45; }
.preview .frame + .frame { margin-top: 18px; }

/* Letter is 11in tall; minus two 0.45in margins leaves 10.1in. halloween.js
   reads these numbers, so change them together. */
@page { size: letter; margin: 0.45in; }
@media print {
  body { background: #fff !important; min-height: 0; }
  .sky, .screen { display: none !important; }
  .sheet { display: block; }
  /* Fill the sheet so a short page still looks full. fitSheet() keeps the
     content under this height, so it never spills to a second page. */
  .frame { min-height: 9.85in; justify-content: space-between; }
  /* Last guard: if the text is ever too long even at the smallest size,
     cut it off rather than print a second page. */
  .frame { max-height: 10in; overflow: hidden; }
  .frame + .frame { break-before: page; }
}

.stats { margin: 28px auto 0; max-width: 520px; text-align: left; color: var(--mist); font-size: 14px; }
.stats summary { cursor: pointer; text-align: center; }
.stats table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.stats td { padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,.08); white-space: pre; }
.stats td + td { text-align: right; font-variant-numeric: tabular-nums; color: var(--bone); }

/* porch QR code */
.qr-block { display: flex; gap: 28px; align-items: center; justify-content: center; margin: 22px auto 6px; flex-wrap: wrap; }
.qr-card { background: #fff; padding: 14px; border-radius: 18px; box-shadow: 0 0 0 6px rgba(255,138,31,.35), 0 0 50px rgba(255,138,31,.6); }
.qr-card img, .qr-card canvas { display: block; width: 240px; height: 240px; }
.qr-side { max-width: 340px; text-align: left; }
.qr-title { font-size: 26px; font-weight: 600; color: var(--glow); margin: 0 0 10px; }
.trust { font-size: 18px; line-height: 1.4; color: #efe6ff; margin: 0 0 14px; }
.trust b { color: var(--glow); }
.link-btn { background: none; border: 0; color: var(--mist); text-decoration: underline; font: inherit; font-size: 15px; cursor: pointer; padding: 0; }

/* Porch screen: everything, QR code included, fits on one laptop screen. */
body.kiosk #welcome { padding-top: 3vh; }
body.kiosk #welcome h1 { font-size: clamp(34px, 5.6vw, 60px); margin-bottom: 12px; }
body.kiosk #welcome .lede { font-size: clamp(17px, 2.1vw, 21px); margin-bottom: 6px; }
body.kiosk #welcome .lede.small, body.kiosk #welcome .how { display: none; }
body.kiosk .qr-block { margin-top: 14px; }
body.kiosk .qr-card img, body.kiosk .qr-card canvas { width: min(34vh, 260px); height: min(34vh, 260px); }
@media (max-width: 600px) { .preview { transform: none; padding: 8px; overflow: hidden; } .preview .frame { padding: 10px; } }

/* Printable porch sign (?sign=CODE) */
.sign { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 4vh 20px; text-align: center; }
.sign h1 { margin-bottom: 10px; }
.sign-eyebrow { color: var(--glow); font-size: 22px; margin: 0; }
.sign-lede { font-size: 26px; line-height: 1.35; margin: 0 auto 18px; max-width: 620px; }
.sign-qr { display: inline-block; background: #fff; padding: 18px; border-radius: 20px; }
.sign-qr img, .sign-qr canvas { width: 300px; height: 300px; display: block; }
.sign-steps { text-align: left; max-width: 560px; margin: 20px auto 10px; font-size: 21px; line-height: 1.45; }
.sign-fine { color: var(--mist); font-size: 15px; }
body.sign-mode .screen { display: none !important; }
@media print {
  body.sign-mode .sign { display: block !important; color: #1d1428; padding: 0; }
  body.sign-mode .sign h1 { color: #1d1428; text-shadow: none; font-size: 44pt; }
  body.sign-mode .sign-eyebrow { color: #9c4300; }
  body.sign-mode .sign-qr { border: 2px solid #1d1428; }
  body.sign-mode .sign-qr img, body.sign-mode .sign-qr canvas { width: 3.6in; height: 3.6in; }
  body.sign-mode .sign-fine { color: #4a3a5a; }
  body.sign-mode .sheet { display: none !important; }
}

/* Porch sales screen (?kiosk) */
.pitch { max-width: 1100px; padding-top: 3vh; }
.pitch h1 { font-size: clamp(36px, 5.4vw, 64px); margin-bottom: 8px; }
.pitch-lede { font-size: clamp(20px, 2.4vw, 28px); color: var(--glow); font-weight: 500; margin: 0 auto 18px; max-width: 760px; line-height: 1.3; }
.pitch-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: center; text-align: left; }
.papers { position: relative; height: 150px; margin: 0 0 14px 10px; }
.paper { position: absolute; width: 150px; height: 140px; background: #fbf6ec; color: #2a1640; border-radius: 6px; padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 12px; }
.paper b { display: block; margin-bottom: 8px; font-family: "Fredoka", sans-serif; }
.paper i { display: block; height: 6px; background: #d9cfe6; border-radius: 3px; margin: 7px 0; }
.paper i.s { width: 65%; }
.p1 { left: 0; transform: rotate(-7deg); animation: bob 5s ease-in-out infinite; }
.p2 { left: 135px; top: -6px; transform: rotate(2deg); animation: bob 6s ease-in-out infinite -2s; }
.p3 { left: 270px; transform: rotate(8deg); animation: bob 5.5s ease-in-out infinite -4s; }
@keyframes bob { 50% { translate: 0 -8px; } }
.perks { list-style: none; padding: 0; margin: 0; }
.perks li { display: flex; gap: 14px; align-items: flex-start; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.35; margin-bottom: 14px; color: #efe6ff; }
.perks li span { font-size: 30px; line-height: 1; }
.perks b { color: var(--bone); }
.pitch-right { text-align: center; }
.pitch .qr-card { display: inline-block; }
.pitch .qr-card img, .pitch .qr-card canvas { width: min(36vh, 280px); height: min(36vh, 280px); }
.pitch .qr-title { margin: 14px 0 6px; }
.pitch .trust { font-size: 16px; max-width: 340px; margin: 0 auto; }
.pitch .link-btn { margin-top: 14px; font-size: 14px; opacity: .8; }
@media (max-width: 800px) { .pitch-grid { grid-template-columns: 1fr; } .papers { display: none; } }
body.kiosk .g1 { left: 2vw; top: 80vh; } body.kiosk .g2 { top: 80vh; }

.frame .owner { margin: 0 34px 4px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: calc(13pt * var(--k));
  border: 1.5px solid #2a1640; border-radius: 6px; display: inline-block; padding: 1px 12px; }

/* A little color on the printed page: thin accents, no big ink fills.
   Headline text stays black so it stands out. */
.frame { border-color: #c2410c; }
.frame header { border-bottom: 2px dotted #ea7a1f; }
.frame h2 { color: #000; }
.frame .kicker { color: #000; }
.tag { border-color: #ea7a1f; color: #000; background: #fff4e8; }
.story h3 { color: #000; }
.story .who, .roll li span { color: #000; }
.story .source { border-left-color: #fdba74; }
.research { border-color: #a78bfa; }
.frame footer { border-top: 2px dotted #ea7a1f; }
.frame .owner { border-color: #c2410c; color: #000; }
.trim { text-align: center; font-size: calc(15px * var(--k)); letter-spacing: 6px; margin: 2px 0 0; }

/* ---------- admin page ---------- */
.admin-corner { position: fixed; right: 10px; bottom: 6px; font-size: 12px; color: rgba(255,255,255,.35); text-decoration: none; z-index: 2; }
body.admin-mode .screen.admin { max-width: 980px; text-align: left; padding-top: 4vh; }
.admin h2 { margin: 0 0 14px; }
.admin-links { justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
.admin-links a { text-decoration: none; margin: 0; }
.admin-note { color: var(--mist); font-size: 15px; }
.admin-sum { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.admin-sum div { background: rgba(255,255,255,.08); border-radius: 12px; padding: 10px 14px; min-width: 120px; }
.admin-sum b { display: block; font-size: 24px; color: var(--glow); }
.admin-sum span { font-size: 13px; color: var(--mist); }
.admin-tests { display: block; font-size: 14px; color: var(--mist); margin: 6px 0 10px; }
.admin-log { width: 100%; border-collapse: collapse; font-size: 15px; }
.admin-log th, .admin-log td { text-align: left; padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.12); }
.admin-log th { font-size: 13px; color: var(--mist); font-weight: 500; }
.admin-log tr.err td { color: #fca5a5; }
@media (max-width: 640px) { .admin-log { font-size: 13px; } .admin-log th, .admin-log td { padding: 6px 4px; } }

/* ---------- full-color poster (?poster=CODE) ---------- */
@page poster { size: letter; margin: 0; }
body.poster-mode { background: #2a1640; }
body.poster-mode .screen, body.poster-mode .sky, body.poster-mode .admin-corner { display: none !important; }
.poster { page: poster; box-sizing: border-box; width: 8.5in; height: 11in; margin: 0 auto; overflow: hidden; position: relative;
  padding: 0.55in 0.6in 0.45in; text-align: center; color: #fff7ed; font-family: "Fredoka", sans-serif;
  background: radial-gradient(circle at 93% 4.5%, #fde68a 0 0.42in, rgba(253,230,138,.25) 0.43in 0.58in, transparent 0.59in),
              linear-gradient(180deg, #1e0b3a 0%, #3b1466 55%, #7c2d12 100%);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.poster-moon { display: none; }
.poster-bats { position: absolute; top: 0.35in; left: 0.5in; margin: 0; font-size: 26pt; letter-spacing: 4px; }
.poster-eyebrow { margin: 0.25in 0 0; font-size: 20pt; font-weight: 600; color: #fdba74; letter-spacing: .04em; }
.poster h1 { font-family: "Cinzel Decorative", serif; font-weight: 900; font-size: 44pt; line-height: 1.08; margin: 8px 0 12px;
  color: #fb923c; text-shadow: 0 0 18px rgba(251,146,60,.55), 0 3px 0 #431407; }
.poster-lede { font-family: "IM Fell English", serif; font-style: italic; font-size: 22pt; line-height: 1.3; margin: 0 auto 0.3in; max-width: 6.6in; color: #fff; }
.poster-mid { display: flex; align-items: center; justify-content: center; gap: 0.35in; }
.poster-cards { display: flex; flex-direction: column; gap: 10px; width: 3.1in; }
.pc { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 10px 14px; font-size: 17pt; text-align: left; color: #1d1428; }
.pc span { font-size: 24pt; }
.pc1 { background: #fde68a; } .pc2 { background: #fdba74; } .pc3 { background: #c4b5fd; }
.pc-note { margin: 4px 0 0; font-size: 13pt; line-height: 1.35; text-align: left; color: #fde68a; }
.poster-qr-wrap { background: #fff; border-radius: 22px; padding: 0.18in 0.18in 0.08in; border: 5px solid #fb923c; box-shadow: 0 0 30px rgba(251,146,60,.5); }
.poster-qr img, .poster-qr canvas { width: 2.9in; height: 2.9in; display: block; }
.poster-scan { margin: 6px 0 0; color: #4c1d95; font-weight: 600; font-size: 18pt; }
.poster-steps { list-style: none; padding: 0; margin: 0.35in auto 0.2in; display: flex; gap: 14px; justify-content: center; }
.poster-steps li { flex: 1; background: rgba(255,255,255,.12); border: 2px solid rgba(253,186,116,.6); border-radius: 14px; padding: 10px 10px 12px; font-size: 13.5pt; line-height: 1.3; }
.poster-steps span { display: block; margin: 0 auto 4px; width: 32px; height: 32px; line-height: 32px; border-radius: 50%; background: #fb923c; color: #1e0b3a; font-weight: 700; font-size: 16pt; }
.poster-quote { margin: 0.12in auto 0.1in; font-size: 14pt; line-height: 1.35; max-width: 6.8in; color: #fde68a; }
.poster-fine { position: absolute; left: 0; right: 0; bottom: 0.3in; margin: 0; font-size: 10.5pt; color: #fed7aa; }
@media print {
  body.poster-mode { background: none; }
  body.poster-mode .poster { display: block !important; margin: 0; }
  body.poster-mode .sheet, body.poster-mode .sign { display: none !important; }
}

/* ---------- About note ---------- */
.about-link { background: none; border: 0; padding: 0; color: var(--mist); font: inherit; text-decoration: underline; cursor: pointer; }
.about { max-width: 560px; width: calc(100% - 32px); max-height: calc(100% - 32px); overflow: auto; box-sizing: border-box;
  background: var(--night2); color: var(--bone); border: 1px solid rgba(255,207,107,.35); border-radius: 18px; padding: 22px 24px; text-align: left; line-height: 1.5; }
.about::backdrop { background: rgba(10,5,20,.7); }
.about h2 { margin: 0 0 10px; color: var(--glow); font-size: 24px; }
.about p { margin: 0 0 12px; font-size: 16px; }
.about a { color: var(--glow); }
.about-sig { font-style: italic; }
.about-ps { border-top: 1px solid rgba(255,255,255,.15); padding-top: 12px; color: var(--mist); }
.about form { text-align: center; margin-top: 6px; }
@media print { .about { display: none !important; } }

/* ---------- help form and messages ---------- */
.help-label { display: block; font-size: 14px; color: var(--mist); margin: 10px 0 4px; }
#help textarea, #help input { width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: var(--bone); font: 16px "Fredoka", sans-serif; padding: 10px; }
.help-status { min-height: 1.2em; color: var(--glow); margin: 10px 0 0; }
#help .row { justify-content: center; gap: 10px; }
#admin-msgs h3 { margin: 18px 0 8px; color: var(--glow); }
.admin-msg { background: rgba(255,255,255,.08); border-radius: 12px; padding: 10px 14px; margin: 0 0 8px; }
.admin-msg b { font-size: 13px; color: var(--mist); font-weight: 500; }
.admin-msg p { margin: 4px 0 0; white-space: pre-wrap; }
.about-intro { background: rgba(255,207,107,.1); border-radius: 12px; padding: 10px 14px; }
.about-intro .about-link { color: var(--glow); }
.about form.row { justify-content: center; gap: 10px; flex-wrap: wrap; }

/* Set up your own porch printer. */
.setup-steps { list-style: none; padding: 0; margin: 26px auto 8px; max-width: 520px; display: grid; gap: 16px; text-align: left; }
.setup-steps li { display: flex; gap: 14px; align-items: flex-start; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 16px; }
.setup-steps li > span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pumpkin); color: #2a1200; font-weight: 600; }
.setup-steps .big-btn { display: inline-block; text-decoration: none; }
.setup-steps p { margin: 10px 0 0; color: #e6dcfb; font-size: 16px; }
#setup-url { word-break: break-all; color: var(--bone); }