/* /straight-face: the drawn table (public/straight-face-page.js). Sits on daily.css and blind-rank.css (the banner, stage,
   offers); this file is the faces and what they do. A seat's class says what its face is doing:
   strain (fighting a laugh), crack (lost it), tell (it's their confession and it shows), guilty (named), plus caught/wrong. */
@font-face{font-family:"Gravitas One";src:url(/fonts/gravitas-one-400-normal.woff2) format("woff2");font-display:swap}
.sf{--a:#f2c94c;--b:#1f7a5c;--face:"Gravitas One"}
.sf h1{font-size:clamp(2rem,1.3rem + 4vw,3rem)}
.sf .banner{padding-top:84px}.sf.small .banner{padding-top:26px;padding-bottom:12px}.sf.small h1{font-size:1.5rem;padding-right:104px}
.sf .confession{margin:6px 0 0;padding:0}
.sf .confession p{font-weight:800;font-size:clamp(1.3rem,1rem + 1.8vw,1.75rem);line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.sf .confession p::before{content:"“"}.sf .confession p::after{content:"”"}
.sf .clock{height:8px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin-top:16px}
.sf .clock i{display:block;height:100%;background:linear-gradient(90deg,var(--a),var(--b));transform-origin:left;transition:transform linear}
.sf #say{margin-top:10px;min-height:1.5em;font-weight:800;color:var(--text)}
.sf .table{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 8px;margin-top:16px;padding:14px 6px 10px;border-radius:20px;background:radial-gradient(120% 90% at 50% 100%,rgba(31,122,92,.5),rgba(31,122,92,.12) 70%,transparent)}
.sf .seat{appearance:none;background:none;border:2px solid transparent;border-radius:18px;padding:6px 4px 8px;width:calc(33.33% - 6px);max-width:150px;font:inherit;color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;-webkit-tap-highlight-color:transparent}
.sf .seat:disabled{cursor:default;color:var(--text)}
.sf .seat:not(:disabled):hover,.sf .seat:not(:disabled):focus-visible{border-color:var(--a);background:rgba(242,201,76,.08)}
.sf .seat:not(:disabled):active{transform:scale(.97)}
.sf .seat.caught{border-color:#57d08a;background:rgba(87,208,138,.12)}
.sf .seat.wrong{border-color:#ff7a66;background:rgba(255,122,102,.1)}
.sf .who{font-weight:800;font-size:.95rem;line-height:1.2}
.sf .bio{font-size:.8125rem;color:var(--muted);line-height:1.3;text-align:center}
.sf .face{width:100%;max-width:112px;height:auto;display:block;overflow:visible}
.sf .head{transform-origin:50px 96px;transform-box:view-box}
.sf .brow{fill:none;stroke:#2b1d18;stroke-width:3;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transition:transform .18s}
.sf .pupils circle{fill:#22161a}.sf .pupils{transition:transform .16s}
.sf .eye-shut path,.sf .m-flat,.sf .m-wob{fill:none;stroke:#3a1220;stroke-width:3;stroke-linecap:round}
.sf .m-o{fill:#3a1220}
.sf .blush{fill:#ff5a7a;opacity:0;transition:opacity .25s}
.sf .sweat{fill:#8fd3ff;stroke:#5fb4ea;stroke-width:1}
.sf .tears path{fill:none;stroke:#8fd3ff;stroke-width:3;stroke-linecap:round}
/* at rest: only the flat mouth and open eyes show */
.sf .eye-shut,.sf .m-wob,.sf .m-open,.sf .m-o,.sf .sweat,.sf .tears{opacity:0}
.sf .eye-open{transform-box:fill-box;transform-origin:center}
/* strain: the mouth wobbles, the brows pinch, the cheeks colour */
.sf .strain .m-flat{opacity:0}.sf .strain .m-wob{opacity:1}
.sf .strain .brow.l{transform:rotate(12deg) translateY(2px)}.sf .strain .brow.r{transform:rotate(-12deg) translateY(2px)}
.sf .strain .blush{opacity:.45}
/* crack: eyes shut, mouth open, tears */
.sf .crack .eye-open,.sf .crack .m-flat,.sf .crack .m-wob{opacity:0}.sf .crack .eye-shut,.sf .crack .m-open,.sf .crack .tears{opacity:1}
.sf .crack .brow.l{transform:rotate(-14deg) translateY(-3px)}.sf .crack .brow.r{transform:rotate(14deg) translateY(-3px)}
.sf .crack .blush{opacity:.6}
/* tell: no laugh in it. Eyes slide away, a bead of sweat, mouth pressed small */
.sf .tell .pupils{transform:translateX(3.4px)}.sf .tell .sweat{opacity:1}
.sf .tell .brow.l{transform:rotate(-9deg) translateY(-2px)}.sf .tell .brow.r{transform:rotate(9deg) translateY(-2px)}
.sf .tell .blush{opacity:.22}
.sf .banner{position:relative}
.sf .sound{position:absolute;top:12px;right:12px;appearance:none;border:1px solid rgba(255,255,255,.35);background:rgba(22,22,26,.6);color:var(--text);font:800 .8125rem "Plus Jakarta Sans",sans-serif;border-radius:99px;padding:8px 12px;cursor:pointer}
.sf .sound[aria-pressed="false"]{color:var(--muted)}
.sf .reply{margin-top:10px;padding:12px 14px;border-radius:14px 14px 14px 4px;background:var(--panel-2);font-size:1.0625rem;line-height:1.35}
.sf .reply b{color:var(--a)}
/* talk: their mouth moves while their own line plays */
.sf .talk .m-flat,.sf .talk .m-wob{opacity:0}.sf .talk .m-o{opacity:1}
/* guilty: named. Looks down, blushes, a small "oh" */
.sf .guilty .pupils{transform:translateY(2.6px)}.sf .guilty .blush{opacity:.8}.sf .guilty .sweat{opacity:1}
.sf .guilty .m-flat{opacity:0}.sf .guilty .m-o{opacity:1}
.sf .guilty .brow.l{transform:rotate(-16deg) translateY(-2px)}.sf .guilty .brow.r{transform:rotate(16deg) translateY(-2px)}
.sf .how{margin:18px 0 0;padding-left:1.3em}.sf .how li{margin-top:6px}
.sf .score-big{font-family:var(--face),sans-serif;font-size:clamp(3.4rem,2rem + 8vw,5rem);line-height:1;color:var(--a)}
.sf .score-big small{font:800 1.1rem "Plus Jakarta Sans",sans-serif;color:var(--muted)}
.sf .verdict-line{margin-top:14px}
@media (prefers-reduced-motion:no-preference){
  .sf .eye-open{animation:sf-blink 4.6s infinite}
  .sf .seat:nth-child(2) .eye-open{animation-delay:-1.3s}.sf .seat:nth-child(3) .eye-open{animation-delay:-2.9s}.sf .seat:nth-child(4) .eye-open{animation-delay:-.6s}.sf .seat:nth-child(5) .eye-open{animation-delay:-3.7s}
  .sf .strain .head{animation:sf-tremble .13s infinite}
  .sf .strain .m-wob{animation:sf-wob .22s infinite alternate}
  .sf .crack .head{animation:sf-laugh .32s infinite}
  .sf .crack .tears{animation:sf-tears .5s infinite alternate}
  .sf .tell .pupils{animation:sf-dart .5s infinite alternate}
  .sf .tell .sweat{animation:sf-sweat 1s ease-in infinite}
  .sf .guilty .sweat{animation:sf-sweat 1.2s ease-in infinite}
  .sf .guilty .head{animation:sf-sink .5s var(--ease) both}
  .sf .seat.caught .face{animation:sf-pop .35s var(--ease)}
  .sf .talk .m-o{animation:sf-talk .19s infinite alternate;transform-box:fill-box;transform-origin:center}
}
@keyframes sf-blink{0%,94%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.08)}}
@keyframes sf-tremble{0%{transform:translateX(-.7px)}50%{transform:translateX(.7px)}100%{transform:translateX(-.7px)}}
@keyframes sf-wob{from{transform:translateY(-.8px)}to{transform:translateY(.8px)}}
@keyframes sf-laugh{0%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-3px)}100%{transform:rotate(-4deg) translateY(0)}}
@keyframes sf-tears{from{transform:translateY(0)}to{transform:translateY(3px)}}
@keyframes sf-dart{from{transform:translateX(-3.4px)}to{transform:translateX(3.4px)}}
@keyframes sf-sweat{from{transform:translateY(-3px);opacity:1}to{transform:translateY(12px);opacity:0}}
@keyframes sf-sink{from{transform:translateY(0)}to{transform:translateY(3px) rotate(-2deg)}}
@keyframes sf-pop{50%{transform:scale(1.08)}}
@keyframes sf-talk{from{transform:scale(.8,.45)}to{transform:scale(1.25,1.5)}}