/* SICK ASS FOO'S — the board, as a component.
   ------------------------------------------------------------------------
   THIS FILE IS LOADED BY TWO PAGES: /foos/ (the standalone module) and
   /drive/ (the pledge drive, which shows the board inline). One
   implementation, two hosts — the whole reason it was extracted rather than
   copied. A copy would have drifted the first time a skin changed.

   EVERYTHING IS SCOPED TO .pw-foos, including the custom properties. The
   drive page is cream-and-chocolate 1970s local television; this is a dark
   studio. Left on :root the two palettes would have overwritten each other,
   and the direction of the damage would depend on stylesheet order — the
   kind of bug that looks like a caching problem. Nothing here styles `body`,
   `html` or bare element selectors for the same reason.

   The markup this expects is built by board.js. Keep the two in step. */
.pw-foos{
  --gs-ink:#fff3d0; --gs-bg:#140a24; --gs-bg2:#241041;
  --gs-gold:#ffd447; --gs-hot:#ff4d6d; --gs-cyan:#3fe0d0; --gs-violet:#8a5cf6;
  --gs-panel:#1d0f36; --gs-line:rgba(255,212,71,.35);
  --font-disp:"Futura","Avant Garde","Century Gothic",'Trebuchet MS',sans-serif;
  --font-head:"Franklin Gothic Condensed","Haettenschweiler","Impact","Arial Narrow",sans-serif;
  --font-ui:"OCR A Extended",ui-monospace,"Courier New",monospace;
  --font-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--gs-ink); font-family:var(--font-body);
}
.pw-foos *{box-sizing:border-box}
.pw-foos a{color:var(--gs-cyan)}

/* ---- the tote board ------------------------------------------------------ */
.pw-foos .pwf-tote{
  display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin:1.2rem 0 0;
}
.pw-foos .pwf-tote .pwf-cell{
  background:#0b0416;border:2px solid var(--gs-line);border-radius:8px;
  padding:.55rem .9rem;min-width:104px;
}
.pw-foos .pwf-tote .pwf-n{
  display:block;font-family:var(--font-ui);font-size:1.45rem;color:var(--gs-gold);
  line-height:1.1;font-variant-numeric:tabular-nums;
}
.pw-foos .pwf-tote .pwf-l{
  display:block;font-family:var(--font-ui);font-size:.52rem;letter-spacing:2px;
  text-transform:uppercase;color:#9d8bbd;margin-top:.25rem;
}

/* ---- the skin switcher --------------------------------------------------- */
.pw-foos .pwf-sets{
  display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap;
  margin:1.15rem auto 0;
}
.pw-foos .pwf-sets button{
  font-family:var(--font-ui);font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;
  background:transparent;color:#c3b0e4;border:1.5px solid var(--gs-line);
  border-radius:999px;padding:.45rem .8rem;cursor:pointer;
}
.pw-foos .pwf-sets button[aria-pressed="true"]{
  background:var(--gs-gold);color:#20102f;border-color:var(--gs-gold);font-weight:700;
}

/* ---- SET 1: THE GAME SHOW ------------------------------------------------ */
/* Trilon cards on a squares grid. Tap flips to the shoutout, the way the
   panels on a 70s board rotated to show the prize behind them. */
.pw-foos .pwf-board{display:grid;gap:.7rem;margin-top:1.5rem}
.pw-foos[data-skin="gameshow"] .pwf-board{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

.pw-foos[data-skin="gameshow"] .pwf-foo{
  perspective:900px;background:none;border:0;padding:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;
}
.pw-foos[data-skin="gameshow"] .pwf-foo .pwf-card{
  /* display:block is LOAD-BEARING and it is the third time this trap has bitten
     today. `.pwf-card` is a <span>. The two faces inside it are position:absolute
     with inset:0, and an INLINE box is not a containing block with a usable
     width -- so the faces collapsed to about one character wide, the text ran
     vertically, and the cards stacked on top of the footer because absolute
     children left the span with no height either. Nothing errored. */
  display:block;
  position:relative;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.3,.9,.3,1);
  min-height:132px;
}
.pw-foos[data-skin="gameshow"] .pwf-foo[aria-expanded="true"] .pwf-card{transform:rotateY(180deg)}
@media (prefers-reduced-motion:reduce){
  .pw-foos[data-skin="gameshow"] .pwf-foo .pwf-card{transition:none}
}
.pw-foos[data-skin="gameshow"] .pwf-face{
  display:flex;position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:10px;padding:.85rem .9rem;flex-direction:column;overflow:hidden;
  border:2px solid var(--gs-gold);
  background:linear-gradient(160deg,var(--gs-panel),#120829);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.35), 0 6px 0 rgba(0,0,0,.4);
}
/* THE FRONT FACE IS IN FLOW, AND THAT IS WHAT GIVES THE CARD ITS HEIGHT.
   Both faces absolute + a fixed min-height meant a long name simply ran out
   the bottom of the card: "Ramona Q. Verylongnamegoeshere" wrapped to two
   lines and pushed the tier, the date and the tap hint through the gold
   border onto the page behind it. Nothing errored and nothing overflowed
   HORIZONTALLY, which is why the first sweep missed it -- an absolutely
   positioned child cannot make its parent taller, so the parent never knew.
   Front relative => the card is always exactly as tall as its content;
   min-height stays as a floor so short cards still line up on the grid.
   The back is still absolute (it has to be, to sit behind) and scrolls if a
   very long shoutout outgrows the front. */
.pw-foos[data-skin="gameshow"] .pwf-face.pwf-front{position:relative;inset:auto;width:100%}
.pw-foos[data-skin="gameshow"] .pwf-face.pwf-back{overflow:auto}
.pw-foos[data-skin="gameshow"] .pwf-face.pwf-back{
  transform:rotateY(180deg);
  background:linear-gradient(160deg,#3a1250,#1b0733);
  border-color:var(--gs-hot);justify-content:center;
}
.pw-foos[data-skin="gameshow"] .pwf-num{
  font-family:var(--font-ui);font-size:.55rem;letter-spacing:2px;color:#9d8bbd;
  display:block;
}
.pw-foos[data-skin="gameshow"] .pwf-who{
  display:block;font-family:var(--font-disp);font-weight:800;letter-spacing:-.01em;
  font-size:1.15rem;line-height:1.15;margin-top:.3rem;color:var(--gs-ink);
  overflow-wrap:anywhere;
}
.pw-foos[data-skin="gameshow"] .pwf-foo.pwf-anon .pwf-who{color:var(--gs-cyan);font-style:italic}
.pw-foos[data-skin="gameshow"] .pwf-amt{
  display:block;margin-top:auto;font-family:var(--font-ui);font-size:1.35rem;
  color:var(--gs-gold);font-variant-numeric:tabular-nums;
}
.pw-foos[data-skin="gameshow"] .pwf-tier{
  display:block;font-family:var(--font-ui);font-size:.52rem;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--gs-hot);margin-top:.15rem;
}
.pw-foos[data-skin="gameshow"] .pwf-when{
  display:block;font-family:var(--font-ui);font-size:.52rem;letter-spacing:1.4px;
  color:#8d7bad;margin-top:.35rem;
}
.pw-foos[data-skin="gameshow"] .pwf-shout{
  display:block;font-size:.92rem;line-height:1.5;color:var(--gs-ink);font-style:italic;
}
.pw-foos[data-skin="gameshow"] .pwf-shout.pwf-none{color:#b9a6d8;font-style:normal;font-family:var(--font-ui);font-size:.62rem;letter-spacing:1.5px;text-transform:uppercase}
.pw-foos[data-skin="gameshow"] .pwf-flip{
  display:block;font-family:var(--font-ui);font-size:.5rem;letter-spacing:1.6px;
  text-transform:uppercase;color:#9d8bbd;margin-top:.55rem;
}

/* ---- SET 2: THE MARQUEE -------------------------------------------------- */
/* Names up in lights on a theater marquee: one long strip per donor. */
.pw-foos[data-skin="marquee"] .pwf-board{gap:.45rem}
.pw-foos[data-skin="marquee"] .pwf-foo{
  display:flex;align-items:baseline;gap:.7rem;width:100%;text-align:left;
  background:#0b0416;border:2px solid var(--gs-line);border-left:6px solid var(--gs-gold);
  border-radius:6px;padding:.7rem .9rem;color:inherit;font:inherit;cursor:pointer;
}
.pw-foos[data-skin="marquee"] .pwf-card{display:contents}
.pw-foos[data-skin="marquee"] .pwf-face.pwf-back{display:none}
.pw-foos[data-skin="marquee"] .pwf-num{display:none}
.pw-foos[data-skin="marquee"] .pwf-face{display:contents}
.pw-foos[data-skin="marquee"] .pwf-who{
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;
  font-size:1.1rem;color:var(--gs-gold);overflow-wrap:anywhere;
}
.pw-foos[data-skin="marquee"] .pwf-foo.pwf-anon .pwf-who{color:var(--gs-cyan)}
.pw-foos[data-skin="marquee"] .pwf-amt{
  margin-left:auto;font-family:var(--font-ui);font-size:1rem;color:var(--gs-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pw-foos[data-skin="marquee"] .pwf-tier,.pw-foos[data-skin="marquee"] .pwf-when,.pw-foos[data-skin="marquee"] .pwf-flip{display:none}
.pw-foos[data-skin="marquee"] .pwf-shout{
  flex-basis:100%;font-size:.82rem;color:#c3b0e4;font-style:italic;line-height:1.5;
}
.pw-foos[data-skin="marquee"] .pwf-shout.pwf-none{display:none}

/* ---- SET 3: THE CREDIT ROLL ---------------------------------------------- */
/* End-of-broadcast credits: centered, quiet, everybody the same size. The
   deliberate opposite of the game show — some people would rather be thanked
   than ranked. */
.pw-foos[data-skin="credits"] .pwf-board{gap:0;text-align:center;max-width:520px;margin-inline:auto}
.pw-foos[data-skin="credits"] .pwf-foo{
  display:block;width:100%;background:none;border:0;color:inherit;font:inherit;
  padding:.75rem 0;border-bottom:1px solid rgba(255,212,71,.14);cursor:pointer;
}
.pw-foos[data-skin="credits"] .pwf-card,.pw-foos[data-skin="credits"] .pwf-face{display:contents}
.pw-foos[data-skin="credits"] .pwf-face.pwf-back{display:none}
.pw-foos[data-skin="credits"] .pwf-num,.pw-foos[data-skin="credits"] .pwf-tier,.pw-foos[data-skin="credits"] .pwf-flip{display:none}
.pw-foos[data-skin="credits"] .pwf-who{
  display:block;font-family:var(--font-disp);font-weight:700;font-size:1.05rem;
  color:var(--gs-ink);letter-spacing:.01em;
}
.pw-foos[data-skin="credits"] .pwf-foo.pwf-anon .pwf-who{color:#c3b0e4}
.pw-foos[data-skin="credits"] .pwf-amt{
  display:block;font-family:var(--font-ui);font-size:.72rem;color:var(--gs-gold);
  margin-top:.2rem;
}
.pw-foos[data-skin="credits"] .pwf-when{
  display:block;font-family:var(--font-ui);font-size:.52rem;letter-spacing:1.4px;
  color:#8d7bad;margin-top:.15rem;
}
.pw-foos[data-skin="credits"] .pwf-shout{
  display:block;font-size:.85rem;color:#d9c8f2;font-style:italic;margin-top:.3rem;line-height:1.5;
}
.pw-foos[data-skin="credits"] .pwf-shout.pwf-none{display:none}

/* ---- states -------------------------------------------------------------- */
.pw-foos .pwf-msg{
  margin:2rem auto;max-width:34rem;text-align:center;
  border:2px dashed var(--gs-line);border-radius:12px;padding:1.5rem 1.2rem;
  font-family:var(--font-ui);font-size:.72rem;letter-spacing:1.4px;line-height:2;
  text-transform:uppercase;color:#c3b0e4;
}
.pw-foos .pwf-msg b{display:block;font-family:var(--font-disp);font-size:1.2rem;letter-spacing:0;
  text-transform:none;color:var(--gs-gold);margin-bottom:.6rem}
.pw-foos .pwf-msg a{color:var(--gs-cyan)}