/* footer.css: the footer (#bar) is the front apron of the parade float the crowd stands on.
   Laurel-painted board with its corrugated cut edge on top (the crowd's feet stand on it: fans.js reads #bar's top),
   a hand-painted brass + brick trim stripe held on by brass brads, and the pieces glued on as kit parts (style.css):
   PAUSE SCENERY (a .cb-btn), the fine print painted on, the ANSWER KEY envelope (the star: footer.js copies the key),
   an ABOUT tag (.cb-label), and a black sponsor plate with the official Kick logo.
   Light: the low sun is behind-right, so the apron's face is in shade, its top edge catches the sky,
   and everything glued on drops its shadow down-left. Keep it modest: desktop ~58px, phones two rows. */

#bar{position:fixed;left:0;right:0;bottom:0;z-index:7;display:grid;grid-template-columns:minmax(0,1.25fr) auto minmax(0,1fr);align-items:center;column-gap:20px;
  padding:13px max(16px,1.4vw) 6px;color:#f1dfb0;font:500 12px/1.32 'Zilla Slab','Roboto Slab',Georgia,serif;
  background:
    /* brass brads along the trim, every 150px */
    radial-gradient(circle at 50% 50%,#fff2c0 0 .8px,#e3b85a 1.6px,#a37624 3px,#5a3c10 3.8px,rgba(20,8,0,.45) 4.4px,transparent 5.2px) 48px 0/150px 11px repeat-x,
    var(--cb-fiber),
    /* the painted trim: a brass band and a brick pinstripe, brushed on by hand (wobbly, a little thin in places) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='12' viewBox='0 0 260 12'><path d='M0 0H260V4.9C228 5.6 204 4.1 172 5.2 140 6.1 120 4.4 88 5.3 56 6 30 4.5 0 5.1Z' fill='%23d9a441'/><path d='M0 4.6C30 5.4 56 4.8 88 5.6 120 6.3 140 5.1 172 5.8 204 6.2 228 5.2 260 5.7V6.3C228 6 204 6.9 172 6.5 140 6.1 120 7 88 6.5 56 6 30 6.4 0 5.8Z' fill='%236b4a16' opacity='.7'/><path d='M0 8.6C40 8.2 70 9.1 110 8.7S190 8.3 260 8.8V10C200 9.6 160 10.3 110 9.9S40 9.6 0 10.1Z' fill='%23c2361f' opacity='.85'/></svg>") 0 0/260px 12px repeat-x,
    /* lit from behind: the top lip is warm, the face falls into shade toward us; cool on the left, the sun's warmth on the right */
    linear-gradient(180deg,rgba(255,214,150,.12),transparent 38%,rgba(0,0,0,.3)),
    linear-gradient(90deg,rgba(20,30,60,.2),transparent 40%,transparent 70%,rgba(255,150,60,.1)),
    #1e4b29;
  box-shadow:inset 0 1px 0 rgba(255,220,160,.45),0 -3px 8px rgba(30,12,2,.35)}
/* the cut edge on top: the green paint skin, then the corrugated core */
#bar::before{content:'';position:absolute;left:0;right:0;top:-5px;height:5px;pointer-events:none;
  background:linear-gradient(rgba(255,226,170,.55) 0 1px,transparent 1px),linear-gradient(rgba(255,190,110,.2),rgba(40,16,4,.42)),
    repeating-linear-gradient(90deg,#5c3a18 0 1px,#c88e52 1px 3px,#9a6431 3px 4px)}
#bar [hidden]{display:none!important}
#bar a:focus-visible{outline:2.5px solid var(--cb-kick);outline-offset:3px}
.ap-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- left: PAUSE SCENERY + the fine print, painted on ---- */
.ap-left{justify-self:start;display:flex;align-items:center;gap:14px;min-width:0}
#pause{font:12px/1 'Homecoming Parade','Roboto Slab',serif;letter-spacing:.08em;padding:.55em .85em .45em 2.1em;--e:3px;--rot:-1deg;outline-offset:-4px;white-space:nowrap;flex:none}
/* the icon: two bars, or a play wedge once the scenery is paused (footer.js mirrors life.js's state into data-state) */
#pause::after{content:'';position:absolute;left:.9em;top:50%;width:.68em;height:.78em;translate:0 -54%;opacity:.85;
  background:linear-gradient(90deg,currentColor 0 34%,transparent 34% 66%,currentColor 66%)}
#pause[data-state=paused]::after{background:currentColor;clip-path:polygon(8% 0,100% 50%,8% 100%)}
.ap-fine{margin:0;max-width:34em;color:#f1dfb0;font:500 13px/1.22 'Barlow Condensed','Roboto Slab',sans-serif;letter-spacing:.012em;text-shadow:-.5px 1px 0 rgba(10,20,8,.55);text-wrap:balance}

/* ---- the star: a sealed manila ANSWER KEY envelope, tied shut, a tear strip on the end ---- */
.ap-star{position:relative;justify-self:center;isolation:isolate}
.ap-env{position:relative;isolation:isolate;display:flex;align-items:stretch;height:41px;text-decoration:none;color:#2a1806;rotate:-1.2deg;
  transition:translate .16s,rotate .2s}
/* the envelope itself (behind the text, in front of the sheet tucked inside it) */
.ap-env::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:2px;pointer-events:none;
  background:
    /* the end opens once the strip is torn off: the dark inside of the envelope, a pale torn lip */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='44' viewBox='0 0 46 44' preserveAspectRatio='none'><defs><linearGradient id='d' x1='0' x2='1'><stop offset='0' stop-color='%23281707'/><stop offset='1' stop-color='%23573716'/></linearGradient></defs><rect width='46' height='44' fill='url(%23d)'/><path d='M9 7H46V38H9Z' fill='%23fffaf0'/><path d='M9 7H46V9.5H9Z' fill='%23e6dcc4'/><path d='M14 15H42M14 21H38M14 27H41M14 33H33' stroke='%2350607f' stroke-opacity='.45' stroke-width='1.2'/><path d='M12 11V38' stroke='%23c2361f' stroke-opacity='.6'/><path d='M0 0H5L3 3 6 6 3.5 9 6.5 13 4 16 6.5 20 3.5 24 6 28 3 31 5.5 35 3 39 5 44H0Z' fill='%23ebcd8c'/><path d='M5 0L3 3 6 6 3.5 9 6.5 13 4 16 6.5 20 3.5 24 6 28 3 31 5.5 35 3 39 5 44' fill='none' stroke='%23fff3d2' stroke-width='1.1'/></svg>") right 0 top 0/47px 100% no-repeat,
    var(--cb-fiber),var(--cb-grain),
    /* the back flap's fold lines */
    linear-gradient(176deg,transparent 46%,rgba(120,80,30,.28) 47%,transparent 49%),
    var(--cb-light),#ebcd8c;
  box-shadow:0 2px 0 #9a7232,-5px 7px 7px rgba(16,6,0,.5),inset -2px 0 0 rgba(255,236,190,.65),inset 0 1px 0 rgba(255,246,220,.55)}
/* the answer key, tucked inside: it peeks out of the top when you hover (and now and then on its own) */
.ap-env::before{content:'ANSWER KEY  ★  DO NOT COPY';position:absolute;left:44px;right:70px;top:3px;height:20px;z-index:-2;pointer-events:none;
  font:8.5px/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.16em;color:#b02a15;text-align:center;padding-top:3px;white-space:nowrap;overflow:hidden;
  background:linear-gradient(transparent 12px,rgba(61,83,132,.25) 12px 13px,transparent 13px 18px,rgba(61,83,132,.25) 18px 19px,transparent 19px),#fffaf0;
  border-radius:1px 1px 0 0;box-shadow:-1px -1px 0 rgba(120,90,50,.25);transition:translate .22s cubic-bezier(.3,1.5,.5,1);animation:env-peek 7s 3s ease-in-out infinite}
@keyframes env-peek{0%,84%,100%{translate:0 0}88%,94%{translate:0 -7px}}
.ap-env:hover,.ap-env:focus-visible{translate:0 -2px;rotate:0deg}
.ap-env:hover::before,.ap-env:focus-visible::before{translate:0 -12px;animation:none}
.ap-env:focus-visible{outline-offset:4px}

.env-tie{flex:none;width:28px;height:34px;align-self:center;margin:0 6px 0 8px}
.env-txt{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:1px 70px 0 2px}
.env-k{font:15px/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.05em;color:#a8261a;white-space:nowrap}
.env-sub{font:600 12.5px/1 'Zilla Slab','Roboto Slab',Georgia,serif;color:#2a1806;white-space:nowrap}
/* rubber-stamped on the flap, a little crooked */
.env-stamp{position:absolute;right:53px;top:50%;translate:0 -52%;rotate:9deg;pointer-events:none;
  font:9px/1.05 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.08em;text-align:center;color:#b02a15;
  display:flex;flex-direction:column;align-items:center;gap:1px;border:1.6px solid currentColor;border-radius:3px;padding:3px 5px 1px;mix-blend-mode:multiply;-webkit-mask:var(--cb-wear-lt);mask:var(--cb-wear-lt);opacity:.92}
.env-stamp b{font-weight:400;font-size:17px;line-height:.9;letter-spacing:.12em;padding-left:.12em}
/* the tear strip: brick-red board on the end, a perforation between */
.env-tear{position:relative;flex:none;width:45px;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:0 2px 2px 0;
  font:9px/1.15 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.08em;color:#fbe8c8;text-shadow:.5px .5px 0 rgba(40,4,0,.45);
  background:var(--cb-fiber),linear-gradient(100deg,rgba(0,0,0,.14),transparent 50%,rgba(255,220,160,.22)),var(--cb-red);
  box-shadow:0 2px 0 var(--cb-red-dk),inset -1.5px 0 0 rgba(255,214,150,.4);transform-origin:0 50%;transition:transform .18s}
.env-tear::before{content:'';position:absolute;left:-4px;top:4px;bottom:4px;border-left:1.6px dashed rgba(90,50,15,.6)}
.ap-env:hover .env-tear,.ap-env:focus-visible .env-tear{transform:translateX(2px) rotate(-4deg)}
/* COPIED: slammed on once the key's on the clipboard */
.env-done{position:absolute;inset:0 45px 0 34px;display:grid;place-items:center;pointer-events:none;visibility:hidden}
.env-done i{font:normal 23px/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.1em;color:#b02a15;border:2.6px solid currentColor;border-radius:4px;padding:4px 9px 1px 11px;rotate:-6deg;
  mix-blend-mode:multiply;-webkit-mask:var(--cb-wear);mask:var(--cb-wear)}
.ap-star.copied .env-txt{opacity:.28;transition:opacity .2s .1s}
.ap-star.copied .ap-env{cursor:copy}

/* ---- copied: the strip tears off, COPIED slams on, and a picket sign pops up from behind the envelope ---- */
.ap-star.copied .env-tear{animation:env-tear .55s cubic-bezier(.4,0,.7,1) forwards}
@keyframes env-tear{0%{transform:none}25%{transform:translateX(4px) rotate(-10deg)}100%{transform:translate(30px,34px) rotate(48deg);opacity:0}}
.ap-star.copied .env-done{visibility:visible}
.ap-star.copied .env-done i{animation:env-slam .42s .12s cubic-bezier(.3,1.4,.5,1) both}
@keyframes env-slam{0%{scale:2;opacity:0}60%{scale:.94;opacity:1}100%{scale:1}}
.ap-star.copied .env-stamp,.ap-star.copied .ap-env::before{visibility:hidden}
.ap-told{position:absolute;left:50%;bottom:calc(100% + 16px);z-index:-1;translate:-50% 0;rotate:-2deg;pointer-events:none;visibility:hidden;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 12px 5px 26px;border-radius:2px;white-space:nowrap;
  font:12px/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.08em;color:#22160b;
  background:var(--cb-brad) 11px 50%/14px 14px no-repeat,var(--cb-fiber),var(--cb-grain),var(--cb-light),#f6e8c8;
  box-shadow:0 2.5px 0 #8a6234,-5px 7px 7px rgba(20,8,2,.45),inset -1.5px 0 0 rgba(255,214,150,.5)}
.ap-told b{font-weight:400;color:#b02a15}
.ap-told span+span{font-size:10.5px;color:#4a3420}
/* the stick it's stapled to, going down behind the envelope */
.ap-told::after{content:'';position:absolute;left:50%;top:100%;width:6px;height:38px;translate:-50% 0;z-index:-1;
  background:linear-gradient(90deg,rgba(40,16,4,.35),transparent 40%,rgba(255,214,150,.3)),repeating-linear-gradient(180deg,#b07a42 0 3px,#c88e52 3px 7px);box-shadow:-2px 2px 2px rgba(20,8,2,.35)}
.ap-star.told .ap-told{visibility:visible;animation:env-up .5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes env-up{0%{translate:-50% 46px;rotate:4deg}100%{translate:-50% 0;rotate:-2deg}}
.ap-star.leaving .ap-told{visibility:visible;animation:env-down .3s ease-in both}
@keyframes env-down{0%{translate:-50% 0}100%{translate:-50% 52px}}

/* ---- right: ABOUT (and, later, CONTEST RULES) + the Kick plate ---- */
.ap-right{justify-self:end;display:flex;align-items:center;gap:16px}
.ap-links{display:flex;align-items:center;gap:10px}
.ap-tag{white-space:nowrap;font:11.5px/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.1em;text-decoration:none;--rot:2deg;transition:translate .14s}
.ap-tag+.ap-tag{--rot:-2.5deg}
.ap-tag:hover{translate:0 -2px}
/* a black sponsor plate with brads at both ends; the official logo goes on it untouched */
.ap-kick{display:inline-flex;align-items:center;gap:8px;padding:7px 22px 6px 23px;border-radius:2px;text-decoration:none;rotate:.8deg;
  color:#f3dc9a;font:700 12.5px/1 'Barlow Condensed','Roboto Slab',sans-serif;letter-spacing:.07em;text-transform:uppercase;
  background:var(--cb-brad) 9px 50%/13px 13px no-repeat,var(--cb-brad) calc(100% - 9px) 50%/13px 13px no-repeat,
    var(--cb-fiber),linear-gradient(100deg,rgba(0,0,0,.25),transparent 45%,rgba(255,200,120,.1)),#141b12;
  box-shadow:0 2.5px 0 #050805,-5px 7px 7px rgba(10,4,0,.5),inset -1.5px 0 0 rgba(200,255,160,.18),inset 0 1px 0 rgba(255,255,255,.08);transition:translate .14s,rotate .2s}
.ap-kick:hover{translate:0 -2px;rotate:0deg}
.ap-kick b{color:var(--cb-kick);text-transform:none;letter-spacing:.02em;font-size:1.06em}
.ap-kick img{height:17px;width:auto;display:block}

/* ---- narrower screens: two rows. The envelope + Kick on top, PAUSE / fine print / ABOUT under them ---- */
@media (max-width:1079px){
  #bar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"star star kick" "pause fine links";align-items:center;
    row-gap:8px;column-gap:14px;padding:15px 14px 8px}
  .ap-left,.ap-right{display:contents}
  #pause{grid-area:pause;justify-self:start}
  .ap-fine{grid-area:fine;max-width:none}
  .ap-star{grid-area:star;justify-self:start}
  .ap-links{grid-area:links;justify-self:end}
  .ap-kick{grid-area:kick;justify-self:end}
}
/* phones: PAUSE and ABOUT stack on the left, the fine print gets the rest of the row */
@media (max-width:560px){
  #bar{grid-template-areas:"star star kick" "pause fine fine" "links fine fine";row-gap:7px;column-gap:10px;padding-inline:10px}
  .ap-links{justify-self:start}
  .ap-env{height:40px}
  .env-txt{padding-right:6px}
  .env-k{font-size:13px}
  .env-sub{font-size:11.5px}
  .env-stamp{display:none}
  .env-tear{width:38px;font-size:8px}
  .ap-env::before{right:44px;left:36px}
  .env-done{inset:0 38px 0 28px}
  .env-done i{font-size:19px}
  .ap-env::after{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='44' viewBox='0 0 46 44' preserveAspectRatio='none'><defs><linearGradient id='d' x1='0' x2='1'><stop offset='0' stop-color='%23281707'/><stop offset='1' stop-color='%23573716'/></linearGradient></defs><rect width='46' height='44' fill='url(%23d)'/><path d='M9 7H46V38H9Z' fill='%23fffaf0'/><path d='M9 7H46V9.5H9Z' fill='%23e6dcc4'/><path d='M14 15H42M14 21H38M14 27H41M14 33H33' stroke='%2350607f' stroke-opacity='.45' stroke-width='1.2'/><path d='M12 11V38' stroke='%23c2361f' stroke-opacity='.6'/><path d='M0 0H5L3 3 6 6 3.5 9 6.5 13 4 16 6.5 20 3.5 24 6 28 3 31 5.5 35 3 39 5 44H0Z' fill='%23ebcd8c'/><path d='M5 0L3 3 6 6 3.5 9 6.5 13 4 16 6.5 20 3.5 24 6 28 3 31 5.5 35 3 39 5 44' fill='none' stroke='%23fff3d2' stroke-width='1.1'/></svg>") right 0 top 0/40px 100% no-repeat,
    var(--cb-fiber),var(--cb-grain),linear-gradient(176deg,transparent 46%,rgba(120,80,30,.28) 47%,transparent 49%),var(--cb-light),#ebcd8c}
  .env-tie{width:24px;height:30px;margin:0 4px 0 6px}
  .ap-kick{flex-direction:column;gap:4px;padding:6px 12px 6px 13px;font-size:10.5px;background:var(--cb-brad) 50% 3px/9px 9px no-repeat,var(--cb-fiber),linear-gradient(100deg,rgba(0,0,0,.25),transparent 45%,rgba(255,200,120,.1)),#141b12;padding-top:9px}
  .ap-kick img{height:15px}
  #pause{font-size:11px}
  .ap-fine{font-size:12.5px}
}

/* big screens: the apron grows with the painting */
@media (min-width:1800px) and (min-height:980px){#bar{zoom:1.15}}

@media (prefers-reduced-motion:reduce){
  .ap-env,.ap-env::before,.env-tear,.env-txt,.ap-tag,.ap-kick{transition:none}
  .ap-env::before{animation:none}
  .ap-star.copied .env-tear{animation:none;opacity:0}
  .ap-star.copied .env-done i,.ap-star.copied .env-txt,.ap-star.told .ap-told,.ap-star.leaving .ap-told{animation:none}
  .ap-star.leaving .ap-told{visibility:hidden}
}
/* scenery paused: the envelope stops fidgeting too (footer.js sets data-still) */
#bar[data-still] .ap-env::before{animation:none}

/* small laptops: three tags (About, Rules, Brands) beside the envelope; tighten so nothing touches */
@media (max-width:1366px){.ap-links{gap:6px}.ap-tag{font-size:10px;letter-spacing:.07em}}