/* Halloween ribbon along the bottom of every page while the Midnight Mischief offer lasts, drawn
   like the app's Midnight Mischief card (PawPawTheme.Halloween): plum night sky, pumpkin moon,
   cobweb, Creepster nameplate in gold, and the site's Download button. halloween-ribbon.js inserts
   it and sets --halloween-ribbon-h on <html>; the page keeps its footer and the homepage's pet
   widget clear. The scene is decoration and ignores the pointer. */
@font-face {
  font-family: 'Creepster';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/public/fonts/creepster-400-latin.woff2') format('woff2');
}

:root { --halloween-ribbon-h: 0px; }

html.has-halloween-ribbon body { padding-bottom: var(--halloween-ribbon-h); }
html.has-halloween-ribbon .pet-widget { bottom: calc(16px + var(--halloween-ribbon-h)); }

.halloween-ribbon {
  --hw-paper: #271D35;
  --hw-horizon: #42283E;
  --hw-ink: #FFF1DF;
  --hw-gold: #FFC678;
  --hw-badge-ink: #40212B;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  height: 84px;
  color: var(--hw-ink);
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: linear-gradient(115deg, var(--hw-paper), var(--hw-horizon));
  box-shadow: 0 -8px 24px rgba(39, 29, 53, 0.22);
}

.halloween-ribbon-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.halloween-ribbon-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.halloween-ribbon-web { position: absolute; top: 0; right: 0; width: 72px; height: 72px; }

.halloween-ribbon-moon {
  position: absolute;
  right: 330px;
  top: 10px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--hw-gold);
  box-shadow: 0 0 0 24px rgba(255, 198, 120, 0.08);
}

.halloween-ribbon-track {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 84px;
  display: flex;
  width: max-content;
  animation: halloween-ribbon-parade 40s linear infinite;
}

/* Each run ends with the same space it uses between its members, so runs join without a seam. */
.halloween-ribbon-run {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 30px;
  height: 100%;
  padding: 0 30px 2px 0;
}

.halloween-ribbon-sleeper { position: relative; flex: none; height: 46px; }
.halloween-ribbon-sleeper img { display: block; height: 100%; width: auto; }

.halloween-ribbon-zzz {
  position: absolute;
  top: -4px;
  left: 22%;
  font: 500 11px 'Fredoka', sans-serif;
  color: var(--hw-ink);
  pointer-events: none;
}
.halloween-ribbon-zzz span { position: absolute; opacity: 0; animation: halloween-ribbon-zzz 3.6s ease-out infinite; }
.halloween-ribbon-zzz span:nth-child(2) { font-size: 9px; }
.halloween-ribbon-zzz span:nth-child(3) { font-size: 8px; }

.halloween-ribbon-floaty {
  flex: none;
  align-self: center;
  margin-bottom: 20px;
  animation: halloween-ribbon-float 4s ease-in-out infinite;
}
.halloween-ribbon-floaty img { display: block; height: 28px; width: auto; }

.halloween-ribbon-plate {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 34px 0 20px;
  background: linear-gradient(90deg, var(--hw-paper) 75%, rgba(39, 29, 53, 0));
}

.halloween-ribbon-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.halloween-ribbon-moonicon { width: 13px; height: 13px; flex: none; }

.halloween-ribbon-limited {
  font-size: 10px;
  font-weight: 700;
  color: var(--hw-badge-ink);
  background: var(--hw-gold);
  border-radius: 100px;
  padding: 2px 7px;
}

.halloween-ribbon-name {
  font-family: 'Creepster', 'Cherry Bomb One', cursive;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--hw-ink) 10%, var(--hw-gold) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(1px 2px 0 var(--hw-paper));
}
/* Creepster has only Latin letters; translated names use the page's display font. */
.halloween-ribbon-name.is-localized { font-family: inherit; font-weight: 700; font-size: 22px; letter-spacing: 0; }

.halloween-ribbon-end {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 50px 0 48px;
  background: linear-gradient(270deg, var(--hw-horizon) 72%, rgba(66, 40, 62, 0));
}

/* The hero's Download button, sized for the ribbon. */
.halloween-ribbon-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 22px 0 20px;
  border-radius: 100px;
  background: linear-gradient(135deg, #C9406F 0%, #C23E89 50%, #7B4FA2 100%);
  color: #FFFFFF;
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(232, 91, 168, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.2s, box-shadow 0.2s;
}
.halloween-ribbon-download:hover {
  color: #FFFFFF;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 26px rgba(232, 91, 168, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.halloween-ribbon-download:focus-visible { outline: 2px solid var(--hw-gold); outline-offset: 3px; }
.halloween-ribbon-download svg { width: 17px; height: 17px; margin-top: -3px; flex: none; }

.halloween-ribbon-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 241, 223, 0.14);
  color: var(--hw-ink);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.halloween-ribbon-close:hover { background: rgba(255, 241, 223, 0.26); }
.halloween-ribbon-close:focus-visible { outline: 2px solid var(--hw-gold); outline-offset: 2px; }

@keyframes halloween-ribbon-parade { from { transform: translateX(0); } to { transform: translateX(var(--halloween-ribbon-shift, -50%)); } }
@keyframes halloween-ribbon-zzz {
  0% { opacity: 0; transform: translate(0, 6px); }
  20% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(10px, -20px); }
}
@keyframes halloween-ribbon-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, -7deg)); }
  50% { transform: translateY(-5px) rotate(calc(var(--r, -7deg) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
  .halloween-ribbon-track,
  .halloween-ribbon-floaty,
  .halloween-ribbon-download { animation: none; transition: none; }
  .halloween-ribbon-zzz { display: none; }
}

@media (max-width: 640px) {
  .halloween-ribbon { height: 68px; }
  .halloween-ribbon-track { height: 68px; }
  .halloween-ribbon-run { gap: 22px; padding-right: 22px; }
  .halloween-ribbon-sleeper { height: 38px; }
  .halloween-ribbon-floaty { margin-bottom: 14px; }
  .halloween-ribbon-floaty img { height: 22px; }
  .halloween-ribbon-moon { right: 54px; top: 8px; width: 48px; height: 48px; box-shadow: 0 0 0 14px rgba(255, 198, 120, 0.08); }
  .halloween-ribbon-plate { padding: 0 24px 0 14px; }
  .halloween-ribbon-name { font-size: 21px; }
  .halloween-ribbon-name.is-localized { font-size: 17px; }
  .halloween-ribbon-end { display: none; }
}