/* SongBuzz — "Party". A Saturday-night party show: one big message per screen, flat saturated colour per
   round, players as little drawn characters, records and cassettes as the show's objects.
   Two voices: Shrikhand (a heavy 70s italic) for the show's big words, Archivo for everything else in plain
   sentence case. No glows, no chrome, no tags. Shared by the TV, phones, quizmaster and landing. */
@font-face { font-family: 'Archivo'; src: url('/fonts/archivo-latin-wdth-normal-46KOreIa.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; src: url('/fonts/archivo-latin-ext-wdth-normal-VxfzcFlm.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Shrikhand'; src: url('/fonts/shrikhand-latin-eKYiOvEs.woff2') format('woff2'); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Shrikhand'; src: url('/fonts/shrikhand-latin-ext-22cE-wDh.woff2') format('woff2'); font-weight: 400; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
/* Stand-ins sized like the real fonts (measured), so the text keeps its place when they arrive */
@font-face { font-family: 'Shrikhand Fallback'; src: local('Georgia'), local('Noto Serif'), local('DejaVu Serif'); size-adjust: 119.7%; ascent-override: 86%; descent-override: 36%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'), local('Helvetica'), local('Roboto'); size-adjust: 101%; ascent-override: 87%; descent-override: 21%; line-gap-override: 0%; }

:root {
  --ink: #141432;          /* type on light colours, the dark of every drawing */
  --cream: #fff6e3;        /* paper: cards, type on dark colours */
  --cobalt: #2a4bff;       /* the brand ground: lobby, reveal, landing */
  --orange: #ff6a3d; --teal: #12b8a6; --sun: #ffc531; --pink: #ff5f9e; --sky: #3fb6ff; --mint: #2ee6a6; --lime: #b6e33b;
  --red: #e5383b;          /* wrong, out */
  --green: #1f9d55;        /* right */
  --fg: var(--cream); --fg-2: rgba(255, 246, 227, .9); --line: rgba(255, 246, 227, .28);
  --show: 'Shrikhand', 'Shrikhand Fallback', Georgia, serif;
  --font: 'Archivo', 'Archivo Fallback', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
/* on a light colour, type turns to ink */
.light { --fg: var(--ink); --fg-2: rgba(20, 20, 50, .72); --line: rgba(20, 20, 50, .22); }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { scrollbar-gutter: stable; } /* (every page the same width, scrollbar or not: the bar never shifts between them) */
body { color: var(--fg); background: var(--cobalt); font-family: var(--font); font-weight: 500; -webkit-tap-highlight-color: transparent; overflow-x: hidden; font-kerning: normal; text-rendering: optimizeLegibility; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--show); font-weight: 400; line-height: .95; letter-spacing: -.005em; text-wrap: balance; }
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; }
.duo { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.2em; flex: none; }
.muted, .soft { color: var(--fg-2); }
.show { font-family: var(--show); font-weight: 400; }
/* small labels: plain bold sentence case, never tracked caps */
.colh, .paint { font-weight: 800; color: var(--fg); }
.colh { font-size: .9em; color: var(--fg-2); margin-bottom: .35em; }

.logo { font-family: var(--show); font-weight: 400; line-height: 1; color: var(--fg); white-space: nowrap; }
.logo b { font-weight: 400; }
/* Every page you browse sits in one column, .sitepage, the same width on every page: so the bar sits at the same pixel
   everywhere, and what's under it lines up with it. A page wraps its whole body in it (header.sitebar first); a page that's
   narrower inside puts its own column within it, never its own max-width on the wrapper. The wardrobe over a game is the
   same column (#wardrobe below). */
:root { --gut: 16px; --site-max: 1440px; }
@media (min-width: 600px) { :root { --gut: 24px; } }
@media (min-width: 900px) { :root { --gut: 32px; } }
.sitepage { width: 100%; max-width: calc(var(--site-max) + 2 * var(--gut)); margin-left: auto; margin-right: auto; padding-left: var(--gut); padding-right: var(--gut); box-sizing: border-box; }
/* The bar on every page you browse: the logo goes home, then who you are, then the language. One size, one place */
.sitebar { display: flex; align-items: center; gap: 10px; min-height: 56px; padding-top: env(safe-area-inset-top); }
.sitebar .logo { font-size: 24px; text-decoration: none; }
.sitebar .sp { flex: 1; min-width: 0; }
.sitebar .lang { flex: none; color: var(--fg); font-size: 15px; }
.barback { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; border: 0; background: none; color: var(--fg); text-decoration: none; }
.barback .ic { width: 26px; height: 26px; }
.acctchip { display: inline-flex; align-items: center; gap: 7px; max-width: 12em; min-height: 40px; padding: 2px 14px 2px 4px; border-radius: 99px; border: 2.5px solid var(--ink); background: var(--cream); color: var(--ink); font: inherit; font-weight: 800; font-size: 15px; line-height: 1.1; text-decoration: none; box-shadow: 0 3px 0 var(--ink); }
.acctchip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.acctchip .av { flex: none; width: 32px; height: 32px; margin: -4px 0; }
.acctchip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 600px) { .acctchip { max-width: none; } } /* (12em cut "Save your progress" on every size) */
#acctSlot { display: flex; min-width: 0; } .acctchip { min-width: 0; } .sitebar .logo { flex: none; } /* a long chip ("Save your progress") gives way on a phone: the language stays on screen */
@media (max-width: 380px) { .sitebar { gap: 6px; } .sitebar .logo { font-size: 21px; } .acctchip { padding-right: 10px; font-size: 14px; } }
@media (min-width: 900px) { .sitebar { gap: 16px; min-height: 64px; } .sitebar .logo { font-size: 30px; } }
/* The nav (web/nav.ts): home, Solo, the party, your look, your friends. A computer has them in the bar after the logo; a phone
   or a tablet has them at the foot, where a thumb is. Under every sheet and the new-item screen; what's pinned to a page's
   foot sits on it (--navh). A count on Friends (people asking), a dot on Your look (something new) */
.sitebar .tabs { display: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 99px; color: var(--cream); font-weight: 800; font-size: 16px; text-decoration: none; white-space: nowrap; }
.tab .ic { width: 20px; height: 20px; }
.tab:hover { background: rgba(255, 246, 227, .14); }
.tab[aria-current] { background: var(--cream); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.dot { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--orange); color: #fff; font-weight: 900; font-size: 11px; line-height: 1; box-sizing: border-box; }
.dot:empty { min-width: 0; width: 9px; height: 9px; padding: 0; }
.tab .dot:empty { align-self: flex-start; margin-top: 8px; margin-left: -3px; }
@media (min-width: 900px) { .sitebar .tabs { display: flex; flex: none; gap: 2px; margin-left: 8px; } }
@media (min-width: 900px) and (max-width: 1099px) { .sitebar { gap: 12px; } .tab { gap: 6px; padding: 0 10px; } .tab .ic { display: none; } .sitebar .tabs { margin-left: 0; } } /* (the five's names alone: room for the way in beside them) */
@media (min-width: 1500px) { .tab { font-size: 17px; padding: 0 16px; } .sitebar .tabs { gap: 6px; margin-left: 20px; } }
.navfoot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; padding: 6px 8px max(8px, env(safe-area-inset-bottom)); background: var(--ink); }
.navfoot[hidden], body.rewarding .navfoot, body.looking .navfoot { display: none; }
.navrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; max-width: 640px; }
.navfoot a { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 7px 0 3px; color: rgba(255, 246, 227, .72); text-decoration: none; font-weight: 800; font-size: 12px; line-height: 1.1; text-align: center; white-space: nowrap; }
.navfoot .ic { width: 25px; height: 25px; }
.navfoot a[aria-current] { color: var(--sun); }
.navfoot a[aria-current]::before { content: ''; position: absolute; top: -6px; left: 30%; right: 30%; height: 4px; border-radius: 0 0 4px 4px; background: var(--sun); }
.navfoot .dot { position: absolute; top: 2px; left: calc(50% + 6px); box-sizing: content-box; border: 2.5px solid var(--ink); }
@media (min-width: 600px) { .navfoot a { font-size: 13.5px; } }
@media (max-width: 899px) {
  html.hasnav { --navh: calc(66px + env(safe-area-inset-bottom)); }
  html.hasnav body { padding-bottom: var(--navh); }
  html.hasnav .consent, html.hasnav .lkkeep { bottom: var(--navh); padding-bottom: 10px; }
}
@media (min-width: 900px) { .navfoot { display: none; } }
/* Going from page to page as in an app: the new page is there in one frame, as an app's tab is, with no fade and no
   slide (opting in to a transition is what keeps the browser's own slide off Back; a swipe back is the phone's and
   still slides). Nothing animates: the bars, the same on every page, stay put */
@view-transition { navigation: auto; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
::view-transition-old(*) { display: none; }
/* You in the bar: signed in, a phone (and a computer just wide enough for the four) shows your face alone, so nothing is
   cut; the way in keeps its words. On your account the chip is lit, as the page you're on is in the four */
@media (max-width: 599px), (min-width: 900px) and (max-width: 1023px) {
  .acctchip.signed { width: 44px; height: 44px; min-height: 0; padding: 0; justify-content: center; }
  .acctchip.signed .nm { display: none; }
  .acctchip.signed .av { width: 38px; height: 38px; margin: 0; }
}
html[data-page="me"] .acctchip { background: var(--sun); }
.acctchip .short { display: none; }
@media (max-width: 599px), (min-width: 900px) and (max-width: 1199px) { .acctchip:has(.short) .nm:not(.short) { display: none; } .acctchip .short { display: inline; } }

/* The ways into a party, shared by the home page and the party page: the big keys (.cta), Cast to your TV with its
   status line and help, the cream rows (.way), the code box (.joinbar) and the three steps */
.code { flex: 1; min-width: 0; width: 100%; border: 0; border-radius: 1rem; background: #fff; box-shadow: inset 0 0 0 2px rgba(20, 20, 50, .2); font-family: var(--show); font-size: 2.6rem; line-height: 1; padding: .14em .2em .26em; text-align: center; letter-spacing: .14em; color: var(--orange); text-transform: uppercase; }
.code::placeholder { color: rgba(20, 20, 50, .18); }
.code:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.way { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; align-items: start; padding: 1rem 1.1rem; border-radius: 1.1rem; background: #fff; color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 2px rgba(20, 20, 50, .16), 0 .3rem 0 rgba(20, 20, 50, .16); transition: transform .15s; font: inherit; text-align: left; border: 0; cursor: pointer; }
.way:hover, .way:focus-visible { transform: translateY(-2px); }
.way .ic { grid-row: span 2; width: 2.4rem; height: 2.4rem; padding: .45rem; border-radius: .8rem; background: var(--ink); color: var(--cream); box-sizing: content-box; }
.way b { font-family: var(--show); font-weight: 400; font-size: 1.55rem; line-height: 1.05; }
.way span { font-size: .95rem; line-height: 1.4; font-weight: 600; color: rgba(20, 20, 50, .75); }
.way.best { background: var(--sun); box-shadow: inset 0 0 0 2px var(--ink), 0 .3rem 0 var(--ink); }
.way.best .ic { background: var(--ink); color: var(--sun); }
.way .tag { position: absolute; top: -.7rem; right: .8rem; padding: .15rem .6rem .25rem; border-radius: .5rem; background: var(--ink); color: var(--cream); font-weight: 800; font-size: .78rem; transform: rotate(3deg); }
.ways .more { font-size: .9rem; font-weight: 600; color: rgba(20, 20, 50, .7); line-height: 1.45; }
.ways .more code { font: inherit; font-weight: 900; color: var(--ink); }
/* Cast to your TV: the call to action, always there (it's the best way to play). When this device can't cast
   right now the button stays the same; the status line says why and a tap explains what to do. */
.castcta { position: relative; margin-top: 1.8rem; max-width: 32rem; display: grid; gap: 1.1rem; }
.cta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; width: 100%; padding: 1rem 1.2rem 1.1rem 1rem; border: 0; border-radius: 1.4rem; background: var(--sun); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 3px var(--ink), 0 .45rem 0 var(--ink); transform: rotate(-1.2deg); transition: transform .15s, box-shadow .15s; }
.cta:hover, .cta:focus-visible { transform: rotate(-1.2deg) translateY(-3px); box-shadow: inset 0 0 0 3px var(--ink), 0 .7rem 0 var(--ink); }
.cta:active { transform: rotate(-1.2deg) translateY(3px); box-shadow: inset 0 0 0 3px var(--ink), 0 .15rem 0 var(--ink); }
.cta > .ic { width: 2.3rem; height: 2.3rem; padding: .7rem; border-radius: 50%; background: var(--ink); color: var(--sun); box-sizing: content-box; }
.cta b { display: block; font-family: var(--show); font-weight: 400; font-size: clamp(1.9rem, 5.4vw, 2.5rem); line-height: 1; }
.cta small { display: block; margin-top: .3rem; font-size: .98rem; font-weight: 700; line-height: 1.35; color: rgba(20, 20, 50, .78); }
.cta .go-arrow { font-family: var(--show); font-size: 2.2rem; line-height: 1; padding-right: .2rem; }
.cta[aria-busy=true] { cursor: progress; }
.cta[aria-busy=true] .go-arrow { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: .3rem solid rgba(20, 20, 50, .25); border-top-color: var(--ink); font-size: 0; animation: spin .8s linear infinite; }
.cstate { display: flex; align-items: flex-start; gap: .55em; font-weight: 800; font-size: .95rem; line-height: 1.35; padding-left: .4rem; color: rgba(255, 246, 227, .85); }
.cstate::before { content: ''; flex: none; width: .62em; height: .62em; margin-top: .36em; border-radius: 50%; background: rgba(255, 246, 227, .45); }
.cstate > span { flex: 1; min-width: 0; }
.cstate .why { margin-left: .35em; }
.castcta[data-cast=ready] .cstate, .castcta[data-cast=connecting] .cstate { color: var(--cream); }
.castcta[data-cast=ready] .cstate::before, .castcta[data-cast=connecting] .cstate::before { background: #3dff9e; box-shadow: 0 0 0 .22em rgba(61, 255, 158, .25); }
.castcta[data-cast=searching] .cstate::before, .castcta[data-cast=connecting] .cstate::before { animation: blink 1s ease-in-out infinite; }
.castcta[data-cast=none] .cstate::before, .castcta[data-cast=blocked] .cstate::before, .castcta[data-cast=error] .cstate::before { background: var(--orange); }
@keyframes blink { 50% { opacity: .2; } }
.cstate .why { font: inherit; border: 0; padding: 0; background: none; cursor: pointer; color: var(--sun); text-decoration: underline; text-underline-offset: .2em; }
/* what went wrong and what to do: opens after a tap that couldn't cast, or from "How?" */
.casthelp { position: relative; background: var(--cream); color: var(--ink); border-radius: 1.1rem; padding: 1.05rem 1.15rem 1.1rem; font-weight: 600; line-height: 1.45; box-shadow: 0 .35rem 0 var(--ink); animation: helpIn .25s var(--ease); }
@keyframes helpIn { from { opacity: 0; transform: translateY(-.4rem); } }
.casthelp[hidden] { display: none; }
.casthelp h3 { font-size: 1.45rem; line-height: 1.05; padding-right: 2.2rem; margin-bottom: .45rem; }
.casthelp .x { position: absolute; top: .6rem; right: .6rem; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: rgba(20, 20, 50, .08); color: var(--ink); font: 800 1.2rem/1 var(--font); cursor: pointer; }
.casthelp ol { margin: .1rem 0 0; padding-left: 1.3rem; display: grid; gap: .25rem; }
.casthelp p + p, .casthelp ol + p, .casthelp p + ol { margin-top: .55rem; }
.casthelp .acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .9rem; }
.casthelp .acts .btn { font-size: 1rem; padding: .7em 1.2em .75em; }
.casthelp .alt { font-size: .9rem; color: rgba(20, 20, 50, .72); }
.casthelp code { font: inherit; font-weight: 900; }
@media (max-width: 40rem) {
  .cta { grid-template-columns: auto 1fr; align-items: start; gap: .85rem; padding: 1rem 1rem 1.05rem .95rem; }
  .cta > .ic { width: 1.6rem; height: 1.6rem; padding: .6rem; }
  .cta b { font-size: 1.85rem; }
  .cta .go-arrow { display: none; }
}
/* the way in with a code: one line under the headline */
.joinbar { display: grid; grid-template-columns: auto minmax(10.5rem, 12rem) auto; align-items: center; gap: .6rem .8rem; margin-top: 1.8rem; max-width: 34rem; }
/* (4 show letters at 2rem with their spacing need 10.5rem; on a phone the question goes above the box and the key) */
@media (max-width: 600px) { .joinbar { grid-template-columns: minmax(0, 1fr) auto; } .joinbar label { grid-column: 1 / -1; } }
.joinbar label { font-family: var(--show); font-size: 1.6rem; line-height: 1; }
.joinbar .code { font-size: 2rem; padding: .12em .2em .22em; }
.joinbar .btn { font-size: 1.1rem; }
.joinbar .hint { grid-column: 1 / -1; font-size: .95rem; font-weight: 600; color: rgba(255, 246, 227, .78); }
.castcta[hidden] { display: none; }
#moreP .on-phone, [data-dev=phone] #moreP .off-phone, [data-dev=tv] #moreP, [data-dev=tv] #castCta { display: none; }
[data-dev=phone] #moreP .on-phone { display: inline; }
.steps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .8rem; max-width: 46rem; }
.steps li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; align-items: start; font-weight: 700; font-size: 1.08rem; line-height: 1.4; }
.steps li b { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: var(--ink); font-family: var(--show); font-weight: 400; font-size: 1.3rem; }

/* what used to be split flaps: plain text now */
.num { font-variant-numeric: tabular-nums; }
.ln { display: block; }
.pop-in { animation: pop .5s var(--ease) both; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

.lamp { width: .55em; height: .55em; border-radius: 50%; display: inline-block; vertical-align: middle; flex: none; background: var(--line); }
.lamp.on { background: var(--sun); } .lamp.red.on { background: var(--red); } .lamp.green.on { background: var(--green); }
.sw { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .35em; vertical-align: middle; background: var(--c); box-shadow: 0 0 0 2px var(--ink); flex: none; }
.av { display: block; }
/* a number that ticks inside a sentence ("Next song in 9"): a fixed slot, so 10 → 9 doesn't move the words */
.tn { display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.vinyl { display: block; }

/* a song: title over artist, never "Title — Artist" */
.track { display: grid; justify-items: start; gap: .12em; min-width: 0; }
.track-title { font-weight: 900; line-height: 1.05; overflow-wrap: anywhere; }
.track-artist { font-weight: 600; font-size: .6em; line-height: 1.15; opacity: .75; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- keys */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; border: 0; text-decoration: none; border-radius: 99px;
  padding: .7em 1.3em .74em; background: var(--cream); color: var(--ink); font-weight: 800; font-size: 1.05em; line-height: 1;
  box-shadow: inset 0 -.18em 0 rgba(20, 20, 50, .18); transition: transform .1s var(--ease); }
.btn:active { transform: translateY(.1em); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.go, .btn.spot { background: var(--sun); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 .14em var(--line); }
.btn.big { font-size: 1.3em; }
.lang { border: 0; background: transparent; color: var(--fg-2); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; padding: .4em .2em; min-height: 44px; }

/* ---------------------------------------------------------------- settings */
.chips { display: flex; flex-wrap: wrap; gap: .45em; }
/* the music picker: decades, genres and languages, each a labelled row */
.music-row, .who-picks { margin-bottom: .7em; }
/* a country's flag, and the country as a chip with its flag (the programme's music line) */
.flag { display: inline-block; width: 1.35em; height: 1em; border-radius: .15em; object-fit: cover; vertical-align: -.16em; box-shadow: 0 0 0 1px rgba(20, 20, 50, .18); flex: none; }
.flag.globe { width: 1.1em; height: 1.1em; border-radius: 0; box-shadow: none; vertical-align: -.2em; }
.flagchip { display: inline-flex; align-items: center; gap: .4em; background: var(--cream); color: var(--ink); border-radius: 99px; box-shadow: inset 0 0 0 1.5px rgba(20, 20, 50, .18); padding: .12em .7em .12em .35em; font-weight: 800; margin-right: .45em; white-space: nowrap; }
.chip .flag { margin-right: .1em; }
.music-row-name { flex-basis: 100%; font-weight: 700; font-size: .8em; color: var(--fg-2); margin-top: .1em; }
.chip { display: inline-flex; align-items: center; gap: .45em; border: 0; border-radius: 99px; padding: .5em .95em; min-height: 2.4em; background: transparent; color: var(--fg);
  font-weight: 700; line-height: 1; box-shadow: inset 0 0 0 .13em var(--line); }
.chip.on { background: var(--sun); color: var(--ink); box-shadow: none; }
.sel-wrap { gap: .6em; padding-right: .5em; }
.sel { font: inherit; font-weight: 800; color: var(--ink); background: var(--cream); border: 0; border-radius: 99px; padding: .25em .7em; max-width: 12em; }
.sel:focus-visible { outline: .2em solid var(--sun); outline-offset: .1em; }
.chip-n { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--ink); color: var(--cream); font-style: normal; font-weight: 900; font-size: .8em; }
.chip.on .chip-n { background: var(--ink); color: var(--sun); }
.set-group { margin-bottom: 1em; }
.set-row { display: flex; flex-wrap: wrap; gap: 0 2em; }
.set-label { font-weight: 800; font-size: .95em; margin-bottom: .5em; }
.set-hint { font-weight: 500; color: var(--fg-2); margin-left: .3em; }
.stepper { display: inline-flex; align-items: center; gap: .8em; }
.stepper .chip { width: 2.4em; justify-content: center; padding: 0; font-size: 1.1em; }
.stepper + .set-label { margin-top: .9em; }
.stepper-val { font-weight: 900; font-size: 1.2em; min-width: 4.6em; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; }
/* Change the show: each part with its line; the rarely changed switches fold away under More options */
.custom .set-group { padding-top: .9em; border-top: 2px solid var(--line); }
.custom .set-label .set-hint { display: block; margin: .15em 0 0; font-size: .92em; }
.more-key { display: flex; align-items: center; justify-content: space-between; gap: 1em; width: 100%; border: 0; background: none; color: var(--fg); text-align: left; padding: .2em 0; border-radius: .5em; }
.more-key b { display: block; font-weight: 800; font-size: .95em; }
.more-key small { display: block; font-weight: 500; font-size: .92em; color: var(--fg-2); margin-top: .15em; }
.more-key i { font-style: normal; font-weight: 900; font-size: 1.4em; line-height: 1; width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 .1em var(--line); flex: none; }
.more-key:focus-visible { outline: .2em solid var(--sun); outline-offset: .2em; }
.more-chips { margin: .8em 0 1em; }
.search-row { display: flex; gap: .45em; margin-top: .6em; }
.search-row input { flex: 1; min-width: 0; border: 0; border-radius: 99px; padding: .6em 1em; background: var(--cream); color: var(--ink); font-weight: 600; }
.search-row input::placeholder { color: rgba(20, 20, 50, .5); }
.search-row input:focus { outline: .15em solid var(--sun); }
/* tonight's show: one line for its size, one for the music, one for the running order */
.prog-head { display: flex; justify-content: space-between; font-weight: 800; color: var(--fg-2); margin-bottom: .3em; }
.prog-sum { font-weight: 900; font-size: 1.15em; line-height: 1.3; }
.prog-line { font-weight: 700; line-height: 1.45; color: var(--fg-2); margin-top: .35em; }
.prog-line .flagchip { font-size: .9em; }
.prog-rounds { display: flex; flex-wrap: wrap; gap: .3em 1em; }
.prog-rounds > span { display: inline-flex; align-items: center; gap: .4em; }
.prog-rounds em { font-style: normal; color: var(--sun); font-weight: 900; }
.light .prog-rounds em { color: var(--orange); }
.prog-keys { display: flex; gap: .6em; flex-wrap: wrap; margin-top: 1em; }

.error { background: var(--cream); color: var(--ink); border-radius: 1em; padding: .7em 1em; margin: .8em 0; font-weight: 700; display: flex; gap: .6em; align-items: center; }
.error .ic { color: var(--red); }
.ticker { display: none; }

.conn { position: fixed; top: .8rem; left: 50%; transform: translateX(-50%); z-index: 99; display: none; background: var(--red); color: var(--cream); border-radius: 99px; padding: .45rem 1rem; font-weight: 800; font-size: .9rem; }
body.offline .conn { display: block; }
/* the room's gone and the screen says so: nothing of that game stays up, its code least of all */
body.roomgone .conn, body.roomgone #presenter, body.roomgone #room, body.roomgone #soundKey, body.roomgone #ctrls, body.roomgone #chart { display: none; }
.spinner { width: 3em; height: 3em; margin: 0 auto; border-radius: 50%; background: var(--ink); animation: spin 1.4s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 0 22%, #000 23%); mask: radial-gradient(circle, transparent 0 22%, #000 23%); box-shadow: inset 0 0 0 .5em var(--sun); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { transform: translateY(.4em); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- jokers are cards from a party game */
.tickets { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.ticket { position: relative; display: grid; align-content: start; gap: .3em; text-align: left; border: 0; border-radius: 1em; padding: .8em .9em .9em; min-height: 6.2em;
  background: #fff; color: var(--ink); font: inherit; box-shadow: inset 0 -.2em 0 rgba(20, 20, 50, .12); transition: transform .08s; }
.ticket b { font-family: var(--show); font-weight: 400; font-size: 1.7em; line-height: 1; }
.ticket span { font-size: .82em; line-height: 1.25; font-weight: 600; color: rgba(20, 20, 50, .75); }
.ticket:nth-child(odd) { transform: rotate(-1deg); } .ticket:nth-child(even) { transform: rotate(1deg); }
.ticket:not(:disabled):active { transform: scale(.97); }
.ticket:disabled { cursor: default; }
.ticket.used, .ticket.na { opacity: .35; box-shadow: none; }
.ticket.played { background: var(--sun); }
.ticket.played::after { content: '✓'; position: absolute; right: .6em; top: .5em; font-weight: 900; font-size: 1.2em; }
/* a joker named inline: a small pill */
.stub { display: inline-block; background: var(--cream); color: var(--ink); font-weight: 900; line-height: 1; padding: .2em .55em .22em; border-radius: 99px; vertical-align: middle; }
.stub.dim { opacity: .4; }
.upnext { display: inline-grid; gap: .1em; padding: .45em .9em .55em; border-radius: .7em; background: var(--cream); color: var(--ink); transform: rotate(-4deg); font-weight: 800; }
.upnext b { font-family: var(--show); font-weight: 400; font-size: 1.4em; color: var(--orange); }
/* a Gold Record: a sun sticker with a turning disc, while the jokers can be played on the song */
.goldrec { display: inline-flex; align-items: center; gap: .6em; padding: .45em 1em .5em .55em; border-radius: .7em; background: var(--sun); color: var(--ink); border: .14em solid var(--ink); box-shadow: 0 .22em 0 var(--ink); rotate: 3deg; font-weight: 800; text-align: left; animation: pop .45s var(--ease) both; }
.goldrec .duo { width: 2.4em; height: 2.4em; flex: none; animation: spin 3.6s linear infinite; }
.goldrec .duo [fill="#ffc531"] { fill: var(--cream); }
.goldrec b { display: block; font-family: var(--show); font-weight: 400; font-size: 1.45em; line-height: 1; }
.goldrec i { display: block; font-style: normal; font-size: .9em; margin-top: .2em; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .spinner { animation: spin 1.6s linear infinite !important; } }
.prog-rounds .off { opacity: .6; }
.prog-rounds .off small { font-size: .8em; font-weight: 600; }
/* the analytics question: a slim bar with room to scroll past it, a card in the corner of a computer. Behind any sheet, and never in a game */
html.asking { padding-bottom: 84px; scroll-padding-bottom: 92px; }
html.asking.busy { padding-bottom: 0; scroll-padding-bottom: 0; }
.busy .consent { display: none; }
.consent { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); background: var(--cream); color: var(--ink); border-top: 3px solid var(--ink); font-size: 13px; font-weight: 700; line-height: 1.25; }
.consent p { flex: 1; min-width: 0; margin: 0; }
.consent div { flex: none; display: flex; gap: 6px; }
.consent .btn { font-size: 14px; padding: 8px 12px; white-space: nowrap; }
.consent .btn.ghost { color: var(--ink); box-shadow: inset 0 0 0 .14em rgba(20, 20, 50, .3); }
@media (min-width: 900px) {
  html.asking { padding-bottom: 150px; scroll-padding-bottom: 158px; }
  .consent { left: auto; right: 24px; bottom: 24px; width: 340px; flex-wrap: wrap; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 rgba(20, 20, 50, .25); font-size: 14px; }
  .consent p { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- the players, moving
   avatar() (common.js) names the parts and their pivots; common.js puts .alive on <html> (and .av-lite on smart TVs).
   Loops start at the player's own --d, so a crowd never moves in step. Lengths inside a figure are the drawing's own
   units, written as px. Pages opt into one-offs: .av-dance on a container, .av-frozen and .av-enter on the <svg>. */
.av-arm.av-l, .av-ear.av-l { --s: 1; }
.av-arm.av-r, .av-ear.av-r { --s: -1; }

/* ------------------------------------------------ calm: breathing, blinking, and whatever their hands are doing */
@keyframes av-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.035, .97); } }
@keyframes av-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes av-wave { from { transform: rotate(calc(var(--s) * 10deg)); } to { transform: rotate(calc(var(--s) * -18deg)); } }
@keyframes av-swing { from { transform: rotate(calc(var(--s) * -3deg)); } to { transform: rotate(calc(var(--s) * 5deg)); } }
@keyframes av-maraca { 0%, 34%, 100% { transform: rotate(0); } 6%, 18% { transform: rotate(calc(var(--s) * -9deg)); } 12%, 24% { transform: rotate(calc(var(--s) * 9deg)); } 30% { transform: rotate(calc(var(--s) * -4deg)); } }
@keyframes av-sing { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(calc(var(--s) * -7deg)); } }
@keyframes av-scratch { 0%, 40%, 100% { transform: rotate(0); } 8%, 24% { transform: rotate(calc(var(--s) * -6deg)); } 16%, 32% { transform: rotate(calc(var(--s) * 4deg)); } }
@keyframes av-tail { from { transform: rotate(-8deg); } to { transform: rotate(14deg); } }
@keyframes av-ear { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(calc(var(--s) * -16deg)); } 95% { transform: rotate(calc(var(--s) * 7deg)); } }
@keyframes av-antenna { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes av-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes av-shadow { 0%, 100% { transform: scale(1); } 50% { transform: scale(.78); } }

.alive .av .av-eyes { animation: av-blink 4.6s infinite var(--d); }
.alive .av-mood-smile .av-bod { animation: av-breathe 2.4s ease-in-out infinite var(--d); }
.alive .av-mood-smile .av-k-wave { animation: av-wave .55s ease-in-out infinite alternate var(--d); }
.alive .av-mood-smile .av-k-down { animation: av-swing 1.8s ease-in-out infinite alternate var(--d); }
.alive .av-mood-smile .av-k-maraca { animation: av-maraca 1.7s ease-in-out infinite var(--d); }
.alive .av-mood-smile .av-k-mic { animation: av-sing 1.1s ease-in-out infinite var(--d); }
.alive .av-mood-smile .av-k-head { animation: av-scratch 2.6s ease-in-out infinite var(--d); }
.alive .av .av-tail { animation: av-tail 1.2s ease-in-out infinite alternate var(--d); }
.alive .av .av-ear { animation: av-ear 3.8s ease-in-out infinite var(--d); }
.alive .av .av-antenna { animation: av-antenna .7s ease-in-out infinite alternate var(--d); }
/* a Legend's stage turns slowly behind them */
@keyframes av-spin { to { transform: rotate(360deg); } }
.alive .av-stage .av-spin { animation: av-spin 16s linear infinite; }
/* the calm loops run in small steps: nobody sees the difference in a breath, and the device paints a third as often */
.alive .av-mood-smile .av-bod, .alive .av-mood-smile .av-k-down, .alive .av .av-tail { animation-timing-function: steps(9); }
.alive .av-mood-listen .av-bod, .alive .av-mood-listen .av-k-ear { animation-timing-function: steps(5); }
.alive .av-sp-ghost .av-bod { animation: av-float 2.2s ease-in-out infinite var(--d); }
.alive .av-sp-ghost .av-shadow { animation: av-shadow 2.2s ease-in-out infinite var(--d); transform-origin: 50px 95px; }

/* each species has a habit of its own: the penguin waddles, the egg rocks, the dog pants, the frog's throat goes, the
   monster's eye wanders */
@keyframes av-waddle { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
@keyframes av-rock { 0%, 62%, 100% { transform: rotate(0); } 70% { transform: rotate(-6deg); } 80% { transform: rotate(5deg); } 90% { transform: rotate(-2deg); } }
@keyframes av-pant { from { transform: scaleY(1); } to { transform: scaleY(1.16); } }
@keyframes av-throat { 0%, 70%, 100% { transform: scale(1, 1); } 78%, 92% { transform: scale(1.04, 1.07); } 85% { transform: scale(1.01, 1); } }
@keyframes av-wander { 0%, 28%, 100% { transform: translateX(0) scaleY(1); } 32%, 48% { transform: translateX(-3.4px) scaleY(1); } 52%, 72% { transform: translateX(3.4px) scaleY(1); } 76% { transform: translateX(0) scaleY(1); } 94% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
.alive .av-sp-penguin.av-mood-smile .av-fig { animation: av-waddle 1.5s ease-in-out infinite var(--d); transform-origin: 50px 98px; }
.alive .av-sp-egg.av-mood-smile .av-fig { animation: av-rock 3.4s ease-in-out infinite var(--d); transform-origin: 50px 98px; }
.alive .av-sp-dog.av-mood-smile .av-mouth { animation: av-pant .3s ease-in-out infinite alternate var(--d); }
.alive .av-sp-frog.av-mood-smile .av-bod { animation: av-throat 2.8s ease-in-out infinite var(--d); }
.alive .av-sp-monster.av-mood-smile .av-eyes, .alive .av-sp-monster.av-mood-listen .av-eyes { animation: av-wander 5s ease-in-out infinite var(--d); }

/* ------------------------------------------------ grin (scored): jumping for joy */
@keyframes av-hop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  12% { transform: translateY(0) scale(1.1, .88); }
  42% { transform: translateY(-16px) scale(.95, 1.06); }
  60% { transform: translateY(-16px) scale(1, 1); }
  88% { transform: translateY(0) scale(1.08, .92); }
}
@keyframes av-cheer { from { transform: rotate(calc(var(--s) * 8deg)); } to { transform: rotate(calc(var(--s) * -10deg)); } }
.alive .av-mood-grin .av-fig { animation: av-hop .75s ease-in-out infinite var(--d); transform-origin: 50px 98px; }
.alive .av-mood-grin .av-k-up { animation: av-cheer .375s ease-in-out infinite alternate var(--d); }

/* ------------------------------------------------ shout (buzzed): bouncing on the spot, fist pumping */
@keyframes av-jitter { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1.4px, .6px); } 50% { transform: translate(1.2px, -.8px); } 75% { transform: translate(-.8px, -.4px); } }
@keyframes av-pump { from { transform: rotate(calc(var(--s) * 6deg)); } to { transform: rotate(calc(var(--s) * -16deg)) translateY(-3px); } }
@keyframes av-jab { from { transform: rotate(0); } to { transform: rotate(calc(var(--s) * 10deg)); } }
@keyframes av-yell { from { transform: scale(1); } to { transform: scale(1.12, 1.18); } }
.alive .av-mood-shout .av-fig { animation: av-jitter .12s linear infinite; }
.alive .av-mood-shout .av-k-punch { animation: av-pump .26s ease-in-out infinite alternate; }
.alive .av-mood-shout .av-k-point { animation: av-jab .26s ease-in-out infinite alternate; }
.alive .av-mood-shout .av-mouth { animation: av-yell .26s ease-in-out infinite alternate; }

/* ------------------------------------------------ sad (wrong): a slow sway, a sigh, a tear that falls */
@keyframes av-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes av-sigh { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .95); } }
@keyframes av-tear { 0%, 10% { transform: translateY(-2px); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateY(13px); opacity: 1; } 100% { transform: translateY(17px); opacity: 0; } }
.alive .av-mood-sad .av-fig { animation: av-sway 1.6s ease-in-out infinite alternate var(--d); transform-origin: 50px 98px; }
.alive .av-mood-sad .av-bod { animation: av-sigh 3.2s ease-in-out infinite var(--d); }
.alive .av-mood-sad .av-tear { animation: av-tear 1.8s ease-in infinite var(--d); }

/* ------------------------------------------------ the crowd's moods */
/* ready (the countdown): coiled, bouncing on the knees (and the whole cast dips on each tick: tv.html) */
@keyframes av-coil { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(2px) scale(1.05, .93); } }
.alive .av-mood-ready .av-fig { animation: av-coil .46s ease-in-out infinite var(--d); transform-origin: 50px 98px; }
/* listen (a song is playing): nodding along, eyes shut, a hand to the ear */
@keyframes av-nod { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(1.6px); } }
.alive .av-mood-listen .av-bod { animation: av-nod .9s ease-in-out infinite var(--d); }
.alive .av-mood-listen .av-k-ear { animation: av-swing .9s ease-in-out infinite alternate var(--d); }
/* gasp (someone else buzzed): rocked back, trembling */
@keyframes av-recoil { 0% { transform: translateY(0) rotate(0); } 18% { transform: translateY(-9px) rotate(-5deg); } 100% { transform: translateY(0) rotate(-1.5deg); } }
.alive .av-mood-gasp .av-fig { animation: av-recoil .5s var(--ease) both, av-shiver .16s linear .5s infinite; transform-origin: 50px 98px; }
/* clap: both hands meeting in front */
@keyframes av-clap { from { transform: rotate(calc(var(--s) * -7deg)); } to { transform: rotate(calc(var(--s) * 4deg)); } }
.alive .av-mood-clap .av-k-clap { animation: av-clap .16s ease-in-out infinite alternate; }
.alive .av-mood-clap .av-bod { animation: av-breathe .64s ease-in-out infinite var(--d); }
/* sleep (their phone went away): a slow breath and two z's going up */
@keyframes av-doze { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .96); } }
@keyframes av-z { 0% { transform: translate(0, 4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(5px, -9px); opacity: 0; } }
.alive .av-mood-sleep .av-bod { animation: av-doze 3.4s ease-in-out infinite var(--d); }
.alive .av-z1 { animation: av-z 2.6s ease-out infinite; }
.alive .av-z2 { animation: av-z 2.6s ease-out .9s infinite; }
/* a player on a streak: the flame licks */
@keyframes av-flick { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.93, 1.1) skewX(-5deg); } 60% { transform: scale(1.06, .94) skewX(4deg); } }
.alive .flame { animation: av-flick .5s ease-in-out infinite; }

/* ------------------------------------------------ one-offs, by class on the <svg> or a wrapper */
/* joining: pops in (the TV pops the whole cast entry instead) */
@keyframes av-pop { 0% { transform: scale(0) rotate(-24deg); } 55% { transform: scale(1.18) rotate(8deg); } 78% { transform: scale(.94) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } }
.alive .av.av-enter { animation: av-pop .6s cubic-bezier(.2, .9, .3, 1.2) both; transform-origin: 50% 90%; }
/* frozen by a Freeze: shivering */
@keyframes av-shiver { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1.2px); } 75% { transform: translateX(1.2px); } }
.alive .av.av-frozen .av-fig { animation: av-shiver .09s linear infinite; }
.alive .av.av-frozen .av-arm, .alive .av.av-frozen .av-bod, .alive .av.av-frozen .av-tear { animation: none; }

/* dancing to the song (the reveal): everyone on the beat, leaning left and right, stepping */
@keyframes av-bop { 0% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(0) translateY(-5px); } 100% { transform: rotate(7deg) translateY(0); } }
@keyframes av-groove { from { transform: rotate(calc(var(--s) * 14deg)); } to { transform: rotate(calc(var(--s) * -20deg)); } }
@keyframes av-step { from { transform: translateY(0); } to { transform: translateY(-5px); } }
.alive .av-dance .av .av-fig { animation: av-bop .96s ease-in-out infinite alternate; transform-origin: 50px 98px; }
.alive .av-dance .av .av-arm { animation: av-groove .48s ease-in-out infinite alternate; }
.alive .av-dance .av .av-leg.av-l { animation: av-step .48s ease-in-out infinite alternate; }
.alive .av-dance .av .av-leg.av-r { animation: av-step .48s ease-in-out infinite alternate-reverse; }
.alive .av-dance .av .av-bod { animation: av-breathe .48s ease-in-out infinite; }
.alive .av-dance .av-mood-grin .av-fig { animation: av-hop .96s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .alive .av, .alive .av * { animation: none !important; }
}

/* a slow screen (.av-lite: a smart TV's browser, or any TV that can't keep up, tv.ts): nothing inside a drawing moves, as each
   frame of that has the page work out and repaint the whole character. A whole drawing moving is a picture sliding across
   the screen, and the screen does that by itself: the cast still nods, dances and jumps, on every frame, with the page idle.
   (Lengths here are % of the character: the loops above are in the drawing's own units.) */
@keyframes avl-nod { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(1.6%); } }
@keyframes avl-coil { 0%, 100% { transform: none; } 50% { transform: translateY(2%) scale(1.05, .93); } }
@keyframes avl-bop { 0% { transform: rotate(-7deg); } 50% { transform: translateY(-5%); } 100% { transform: rotate(7deg); } }
@keyframes avl-hop { 0%, 100% { transform: none; } 12% { transform: scale(1.1, .88); } 42% { transform: translateY(-16%) scale(.95, 1.06); } 60% { transform: translateY(-16%); } 88% { transform: scale(1.08, .92); } }
@keyframes avl-jitter { 0%, 100% { transform: none; } 25% { transform: translate(-1.4%, .6%); } 50% { transform: translate(1.2%, -.8%); } 75% { transform: translate(-.8%, -.4%); } }
.alive.av-lite .av *, .alive.av-lite .ps * { animation: none !important; transition: none !important; }
.alive.av-lite .row .av { will-change: transform; transform-origin: 50% 98%; }
.alive.av-lite .row .av-mood-smile { animation: av-breathe 2.4s ease-in-out infinite var(--d); }
.alive.av-lite .row .av-mood-listen { animation: avl-nod .9s ease-in-out infinite var(--d); }
.alive.av-lite .row .av-mood-ready { animation: avl-coil .46s ease-in-out infinite var(--d); }
.alive.av-lite .row .av-mood-sad { animation: av-sway 1.6s ease-in-out infinite alternate var(--d); }
.alive.av-lite .row .av-mood-shout { animation: avl-jitter .12s linear infinite; }
.alive.av-lite .row .av-frozen { animation: av-shiver .09s linear infinite; }
.alive.av-lite .av-dance .av { animation: avl-bop .96s ease-in-out infinite alternate; }

/* ---------------------------------------------------------------- the presenter
   presenter.js draws the skeleton and sets the joints as variables on the <svg>; here they turn, so moving from one
   pose to the next is a matter of changing the variables. The loops sit on their own wrappers (.ps-fig, .ps-head,
   .ps-sw), so they add to the pose instead of fighting it. */
.ps { display: block; overflow: visible; }
.ps-ua, .ps-fa { transition: transform .32s cubic-bezier(.3, 1.5, .5, 1); }
.ps-l .ps-ua { transform: rotate(calc(var(--ual) * 1deg)); }
.ps-r .ps-ua { transform: rotate(calc(var(--uar) * -1deg)); }
.ps-l .ps-fa { transform: rotate(calc(var(--fal) * 1deg)); }
.ps-r .ps-fa { transform: rotate(calc(var(--far) * -1deg)); }
.ps-head { transform-origin: 120px 160px; transform: rotate(calc(var(--tilt) * 1deg)); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.ps-lean { transform-origin: 120px 250px; transform: rotate(calc(var(--lean) * 1deg)); transition: transform .3s ease-out; }
.ps-look { transform: translateX(calc(var(--look) * 1px)); transition: transform .2s; }
/* one of each: the face and the hands the <svg> asks for */
.ps-e, .ps-b, .ps-m, .ps-h, .ps-pr { display: none; }
.ps[data-e="open"] .e-open, .ps[data-e="wide"] .e-wide, .ps[data-e="happy"] .e-happy, .ps[data-e="shut"] .e-shut, .ps[data-e="wink"] .e-wink,
.ps[data-b="calm"] .b-calm, .ps[data-b="cheeky"] .b-cheeky, .ps[data-b="up"] .b-up, .ps[data-b="sad"] .b-sad, .ps[data-b="focus"] .b-focus,
.ps[data-m="smirk"] .m-smirk, .ps[data-m="smile"] .m-smile, .ps[data-m="frown"] .m-frown, .ps[data-m="t0"] .m-t0, .ps[data-m="t1"] .m-t1, .ps[data-m="t2"] .m-t2, .ps[data-m="t3"] .m-t3,
.ps[data-m="ee"] .m-ee, .ps[data-m="oo"] .m-oo, .ps[data-m="grin"] .m-grin, .ps[data-m="o"] .m-o, .ps[data-m="eek"] .m-eek { display: inline; }
.ps[data-hl="open"] .ps-l .h-open, .ps[data-hl="fist"] .ps-l .h-fist, .ps[data-hl="point"] .ps-l .h-point, .ps[data-hl="thumb"] .ps-l .h-thumb,
.ps[data-hr="open"] .ps-r .h-open, .ps[data-hr="fist"] .ps-r .h-fist, .ps[data-hr="point"] .ps-r .h-point, .ps[data-hr="thumb"] .ps-r .h-thumb,
.ps[data-pl="mic"] .ps-l .pr-mic, .ps[data-pr="mic"] .ps-r .pr-mic, .ps[data-pl="trophy"] .ps-l .pr-trophy, .ps[data-pr="card"] .ps-r .pr-card, .ps[data-pr="drink"] .ps-r .pr-drink { display: inline; }

/* calm: breathing and blinking. .ps-fig carries the whole body's loops, .ps-hl the head's, .ps-sw each arm's */
@keyframes ps-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-2.5px) scale(1.012, .985); } }
@keyframes ps-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes ps-nod { 0%, 100% { transform: rotate(0) translateY(0); } 30% { transform: rotate(-2.2deg) translateY(1.6px); } 65% { transform: rotate(2deg) translateY(-1px); } }
@keyframes ps-gest { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
@keyframes ps-gest2 { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg); } }
@keyframes ps-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 14% { transform: translateY(0) scale(1.08, .9); } 45% { transform: translateY(-26px) scale(.96, 1.05); } 62% { transform: translateY(-26px) scale(1, 1); } 90% { transform: translateY(0) scale(1.06, .93); } }
@keyframes ps-rock { 0%, 100% { transform: translate(0, 0) rotate(-1.4deg); } 50% { transform: translate(1.6px, 1.4px) rotate(1.4deg); } }
@keyframes ps-tremble { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes ps-clapl { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(5deg); } }
@keyframes ps-clapr { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-5deg); } }
@keyframes ps-sway { 0%, 100% { transform: rotate(-4deg) translateY(0); } 25%, 75% { transform: rotate(0) translateY(-5px); } 50% { transform: rotate(4deg) translateY(0); } }
@keyframes ps-stepl { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(-9px); } }
@keyframes ps-stepr { 0%, 50%, 100% { transform: translateY(0); } 75% { transform: translateY(-9px); } }
/* the dance: four moves on the beat (the cast's tempo, .48s each), held and hit, not a wobble: point to the sky (tall),
   pull it down across the chest (down low), both arms up on the jump, elbows out. The arms take over from the pose's own angles. */
@keyframes ps-d-rua { 0%, 16% { transform: rotate(-152deg); } 25%, 41% { transform: rotate(-24deg); } 50%, 66% { transform: rotate(-140deg); } 75%, 91% { transform: rotate(-74deg); } 100% { transform: rotate(-152deg); } }
@keyframes ps-d-rfa { 0%, 16% { transform: rotate(-8deg); } 25%, 41% { transform: rotate(98deg); } 50%, 66% { transform: rotate(-18deg); } 75%, 91% { transform: rotate(-96deg); } 100% { transform: rotate(-8deg); } }
@keyframes ps-d-lua { 0%, 41% { transform: rotate(34deg); } 50%, 66% { transform: rotate(140deg); } 75%, 91% { transform: rotate(74deg); } 100% { transform: rotate(34deg); } }
@keyframes ps-d-lfa { 0%, 41% { transform: rotate(-116deg); } 50%, 66% { transform: rotate(18deg); } 75%, 91% { transform: rotate(96deg); } 100% { transform: rotate(-116deg); } }
@keyframes ps-d-hips { 0%, 16% { transform: translateX(-9px) rotate(-6deg); } 25%, 41% { transform: translateX(9px) rotate(6deg); } 50%, 66% { transform: translateX(0) rotate(0); } 75%, 91% { transform: translateX(9px) rotate(5deg); } 100% { transform: translateX(-9px) rotate(-6deg); } }
@keyframes ps-d-body { 0%, 16% { transform: translateY(-3px) scale(.98, 1.03); } 25%, 41% { transform: translateY(6px) scale(1.05, .93); } 50%, 66% { transform: none; } 75%, 91% { transform: translateY(2px) scale(1.02, .98); } 100% { transform: translateY(-3px) scale(.98, 1.03); } }
@keyframes ps-d-jump { 0%, 40%, 82%, 100% { transform: none; } 46% { transform: translateY(2px) scale(1.07, .91); } 56% { transform: translateY(-18px) scale(.96, 1.05); } 66% { transform: translateY(-4px); } 73% { transform: translateY(1px) scale(1.07, .92); } }
@keyframes ps-d-head { 0%, 16% { transform: rotate(7deg); } 25%, 41% { transform: rotate(-7deg); } 50%, 66% { transform: rotate(0); } 75%, 91% { transform: rotate(-5deg); } 100% { transform: rotate(7deg); } }
@keyframes ps-d-stepl { 0%, 16% { transform: translateY(-11px) rotate(5deg); } 25%, 91% { transform: translateY(0) rotate(0); } 100% { transform: translateY(-11px) rotate(5deg); } }
@keyframes ps-d-stepr { 0%, 16% { transform: translateY(0); } 25%, 41% { transform: translateY(-11px) rotate(-5deg); } 50%, 66% { transform: translateY(0); } 75%, 91% { transform: translateY(-11px) rotate(-5deg); } 100% { transform: translateY(0); } }
@keyframes ps-pump { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes ps-handwave { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } }
@keyframes ps-tw { 0%, 62%, 100% { transform: scale(.25) rotate(0); opacity: .35; } 78% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes ps-bub { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ps-key { 0%, 70%, 100% { opacity: 1; } 84% { opacity: .35; } }
@keyframes ps-swing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(5deg); } }
@keyframes ps-tie { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.alive .ps .ps-eyes { animation: ps-blink 4.2s infinite; }
.alive .ps .ps-tw { animation: ps-tw 2.8s ease-in-out infinite var(--tw, 0s); }
.alive .ps .ps-bub { animation: ps-bub 1.6s ease-in-out infinite var(--tw, 0s); }
.alive .ps .ps-key { animation: ps-key 2.2s ease-in-out infinite var(--tw, 0s); }
.alive .ps .ps-spin { animation: spin 4s linear infinite; }
.alive .ps .ps-tonearm { animation: ps-swing 3.4s ease-in-out infinite; }
.alive .ps .ps-hair, .alive .ps .ps-boa { animation: ps-swing 2.8s ease-in-out infinite; }
.alive .ps[data-loop="calm"] .ps-fig { animation: ps-bob 2.6s ease-in-out infinite; transform-origin: 120px 330px; }
.alive .ps[data-loop="calm"] .ps-r.ps-sw { animation: ps-gest 3.2s ease-in-out infinite; }
.alive .ps[data-loop="talk"] .ps-fig { animation: ps-bob 1.4s ease-in-out infinite; transform-origin: 120px 330px; }
.alive .ps[data-loop="talk"] .ps-hl { animation: ps-nod 1.25s ease-in-out infinite; }
.alive .ps[data-loop="talk"] .ps-r.ps-sw { animation: ps-gest 1.1s ease-in-out infinite; }
.alive .ps[data-loop="talk"] .ps-tie { animation: ps-tie .8s ease-in-out infinite; }
.alive .ps[data-loop="jump"] .ps-fig { animation: ps-hop .78s ease-in-out infinite; transform-origin: 120px 330px; }
.alive .ps[data-loop="jump"] .ps-l.ps-sw { animation: ps-pump .39s ease-in-out infinite; }
.alive .ps[data-loop="jump"] .ps-r.ps-sw { animation: ps-pump .39s ease-in-out infinite reverse; }
.alive .ps[data-loop="laugh"] .ps-lean { animation: ps-rock .3s linear infinite; }
.alive .ps[data-loop="laugh"] .ps-hl { animation: ps-nod .3s linear infinite; }
.alive .ps[data-loop="shake"] .ps-fig { animation: ps-tremble .1s linear infinite; }
.alive .ps[data-loop="clap"] .ps-l.ps-sw { animation: ps-clapl .34s ease-in-out infinite; }
.alive .ps[data-loop="clap"] .ps-r.ps-sw { animation: ps-clapr .34s ease-in-out infinite; }
.alive .ps[data-loop="clap"] .ps-fig { animation: ps-bob .68s ease-in-out infinite; transform-origin: 120px 330px; }
.alive .ps[data-loop="wave"] .ps-r.ps-sw { animation: ps-handwave .42s ease-in-out infinite; }
.alive .ps[data-loop="dance"] .ps-fig { animation: ps-d-jump 1.92s ease-in-out infinite; transform-origin: 120px 330px; }
.alive .ps[data-loop="dance"] .ps-body { animation: ps-d-body 1.92s cubic-bezier(.25, 1.75, .45, 1) infinite; transform-origin: 120px 330px; }
.alive .ps[data-loop="dance"] .ps-lean { animation: ps-d-hips 1.92s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="dance"] .ps-hl { animation: ps-d-head 1.92s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="dance"] .ps-r .ps-ua { animation: ps-d-rua 1.92s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="dance"] .ps-r .ps-fa { animation: ps-d-rfa 1.92s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="dance"] .ps-l .ps-ua { animation: ps-d-lua 1.92s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="dance"] .ps-l .ps-fa { animation: ps-d-lfa 1.92s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="dance"] .ps-leg.ps-l { animation: ps-d-stepl 1.92s ease-in-out infinite; }
.alive .ps[data-loop="dance"] .ps-leg.ps-r { animation: ps-d-stepr 1.92s ease-in-out infinite; }
.alive .ps[data-loop="dance"] .ps-spin { animation-duration: 1.2s; }
.alive .ps[data-loop="groove"] .ps-lean { animation: ps-sway 1s ease-in-out infinite; }
.alive .ps[data-loop="groove"] .ps-hl { animation: ps-nod .5s ease-in-out infinite; }
.alive .ps[data-loop="groove"] .ps-leg.ps-l { animation: ps-stepl 1s ease-in-out infinite; }
.alive .ps[data-loop="groove"] .ps-leg.ps-r { animation: ps-stepr 1s ease-in-out infinite; }
/* the other dances, on the disco one's beat (.48s, a bar of four in 1.92s), so one can follow another on the bar.
   A loop on .ps-ua or .ps-fa replaces the pose's angle there, so it gives the whole angle: a left joint turns by +deg,
   a right one by -deg (as the variables above). */
/* the twist: elbows out, both arms swinging one way as the hips go the other, lower and lower through the first bar,
   back up through the second */
@keyframes ps-tx-arms { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }
@keyframes ps-tx-hips { 0% { transform: translate(-5px, 0px) rotate(8deg); } 12.5% { transform: translate(5px, 3px) rotate(-8deg); } 25% { transform: translate(-5px, 6px) rotate(8deg); } 37.5% { transform: translate(5px, 9px) rotate(-8deg); } 50% { transform: translate(-5px, 10px) rotate(8deg); } 62.5% { transform: translate(5px, 7px) rotate(-8deg); } 75% { transform: translate(-5px, 4px) rotate(8deg); } 87.5% { transform: translate(5px, 1px) rotate(-8deg); } 100% { transform: translate(-5px, 0px) rotate(8deg); } }
@keyframes ps-tx-head { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes ps-tx-foot { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.alive .ps[data-loop="twist"] .ps-sw { animation: ps-tx-arms .96s cubic-bezier(.6, -.3, .35, 1.35) infinite; }
.alive .ps[data-loop="twist"] .ps-lean { animation: ps-tx-hips 3.84s cubic-bezier(.6, -.3, .35, 1.35) infinite; }
.alive .ps[data-loop="twist"] .ps-hl { animation: ps-tx-head .96s cubic-bezier(.6, -.3, .35, 1.35) infinite; }
.alive .ps[data-loop="twist"] .ps-leg { animation: ps-tx-foot .96s cubic-bezier(.6, -.3, .35, 1.35) infinite; }
/* raise the roof: elbows out and palms up beside his head (the head is big: closer in, it hides the hands), pushing
   up on every beat, the body rising with them */
@keyframes ps-rf-lua { 0%, 100% { transform: rotate(96deg); } 30% { transform: rotate(120deg); } }
@keyframes ps-rf-rua { 0%, 100% { transform: rotate(-96deg); } 30% { transform: rotate(-120deg); } }
@keyframes ps-rf-lfa { 0%, 100% { transform: rotate(44deg); } 30% { transform: rotate(26deg); } }
@keyframes ps-rf-rfa { 0%, 100% { transform: rotate(-44deg); } 30% { transform: rotate(-26deg); } }
@keyframes ps-rf-body { 0%, 100% { transform: translateY(2px) scale(1.02, .98); } 30% { transform: translateY(-6px) scale(.99, 1.02); } }
.alive .ps[data-loop="roof"] .ps-l .ps-ua { animation: ps-rf-lua .48s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="roof"] .ps-r .ps-ua { animation: ps-rf-rua .48s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="roof"] .ps-l .ps-fa { animation: ps-rf-lfa .48s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="roof"] .ps-r .ps-fa { animation: ps-rf-rfa .48s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="roof"] .ps-body { animation: ps-rf-body .48s cubic-bezier(.25, 1.75, .45, 1) infinite; transform-origin: 120px 330px; }
.alive .ps[data-loop="roof"] .ps-hl { animation: ps-nod .48s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="roof"] .ps-leg.ps-l { animation: ps-stepl .96s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="roof"] .ps-leg.ps-r { animation: ps-stepr .96s cubic-bezier(.25, 1.75, .45, 1) infinite; }
/* the robot: square arms trading places on the beat, one out from the shoulder with the forearm hanging, the other
   down from the shoulder with the forearm out (a forearm up hid behind his head), the head clicking side to side. Each
   move is a snap and a hold */
@keyframes ps-rb-lua { 0%, 44%, 100% { transform: rotate(90deg); } 50%, 94% { transform: rotate(0deg); } }
@keyframes ps-rb-lfa { 0%, 44%, 100% { transform: rotate(-90deg); } 50%, 94% { transform: rotate(90deg); } }
@keyframes ps-rb-rua { 0%, 44%, 100% { transform: rotate(0deg); } 50%, 94% { transform: rotate(-90deg); } }
@keyframes ps-rb-rfa { 0%, 44%, 100% { transform: rotate(-90deg); } 50%, 94% { transform: rotate(90deg); } }
@keyframes ps-rb-head { 0%, 44% { transform: rotate(-9deg); } 50%, 94% { transform: rotate(9deg); } 100% { transform: rotate(-9deg); } }
@keyframes ps-rb-look { 0%, 44% { transform: translateX(-3px); } 50%, 94% { transform: translateX(3px); } 100% { transform: translateX(-3px); } }
@keyframes ps-rb-stepl { 0%, 44%, 100% { transform: translateY(-9px); } 50%, 94% { transform: translateY(0); } }
@keyframes ps-rb-stepr { 0%, 44%, 100% { transform: translateY(0); } 50%, 94% { transform: translateY(-9px); } }
.alive .ps[data-loop="robot"] .ps-l .ps-ua { animation: ps-rb-lua .96s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.alive .ps[data-loop="robot"] .ps-l .ps-fa { animation: ps-rb-lfa .96s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.alive .ps[data-loop="robot"] .ps-r .ps-ua { animation: ps-rb-rua .96s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.alive .ps[data-loop="robot"] .ps-r .ps-fa { animation: ps-rb-rfa .96s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.alive .ps[data-loop="robot"] .ps-hl { animation: ps-rb-head .96s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.alive .ps[data-loop="robot"] .ps-look { animation: ps-rb-look .96s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.alive .ps[data-loop="robot"] .ps-leg.ps-l { animation: ps-rb-stepl .96s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.alive .ps[data-loop="robot"] .ps-leg.ps-r { animation: ps-rb-stepr .96s cubic-bezier(.3, 1.6, .5, 1) infinite; }
/* flamenco: chin up, a hand on the hip and the other arm curved out and up (his arms are too short to go over his
   head: a hand up there sits on his cheek), its wrist flicking on the beat, the arms trading places every bar. The
   body stays tall and still: only the feet stamp */
@keyframes ps-fl-lua { 0%, 44%, 100% { transform: rotate(105deg); } 50%, 94% { transform: rotate(62deg); } }
@keyframes ps-fl-lfa { 0%, 25%, 100% { transform: rotate(30deg); } 12.5%, 37.5% { transform: rotate(6deg); } 44% { transform: rotate(24deg); } 50%, 94% { transform: rotate(-108deg); } }
@keyframes ps-fl-rua { 0%, 44%, 100% { transform: rotate(-62deg); } 50%, 94% { transform: rotate(-105deg); } }
@keyframes ps-fl-rfa { 0%, 44%, 100% { transform: rotate(108deg); } 50%, 75% { transform: rotate(-30deg); } 62.5%, 87.5% { transform: rotate(-6deg); } 94% { transform: rotate(-24deg); } }
@keyframes ps-fl-lean { 0%, 44%, 100% { transform: rotate(-3deg); } 50%, 94% { transform: rotate(3deg); } }
@keyframes ps-fl-head { 0%, 44%, 100% { transform: rotate(-7deg); } 50%, 94% { transform: rotate(7deg); } }
@keyframes ps-fl-stepl { 0%, 40%, 100% { transform: translateY(0); } 15% { transform: translateY(-12px) rotate(4deg); } }
@keyframes ps-fl-stepr { 0%, 50%, 90%, 100% { transform: translateY(0); } 65% { transform: translateY(-12px) rotate(-4deg); } }
.alive .ps[data-loop="flamenco"] .ps-l .ps-ua { animation: ps-fl-lua 3.84s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.alive .ps[data-loop="flamenco"] .ps-l .ps-fa { animation: ps-fl-lfa 3.84s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.alive .ps[data-loop="flamenco"] .ps-r .ps-ua { animation: ps-fl-rua 3.84s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.alive .ps[data-loop="flamenco"] .ps-r .ps-fa { animation: ps-fl-rfa 3.84s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.alive .ps[data-loop="flamenco"] .ps-lean { animation: ps-fl-lean 3.84s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.alive .ps[data-loop="flamenco"] .ps-hl { animation: ps-fl-head 3.84s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.alive .ps[data-loop="flamenco"] .ps-leg.ps-l { animation: ps-fl-stepl .96s ease-out infinite; }
.alive .ps[data-loop="flamenco"] .ps-leg.ps-r { animation: ps-fl-stepr .96s ease-out infinite; }
/* the crooner: eyes shut, the mic at his lips and the other arm out to the crowd, swaying slow, a step every two beats */
@keyframes ps-cr-sway { 0%, 100% { transform: rotate(-5deg) translateX(-3px); } 50% { transform: rotate(5deg) translateX(3px); } }
@keyframes ps-cr-head { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }
@keyframes ps-cr-reach { 0%, 100% { transform: rotate(-108deg); } 50% { transform: rotate(-138deg); } }
.alive .ps[data-loop="croon"] .ps-lean { animation: ps-cr-sway 1.92s ease-in-out infinite; }
.alive .ps[data-loop="croon"] .ps-hl { animation: ps-cr-head 1.92s ease-in-out infinite; }
.alive .ps[data-loop="croon"] .ps-r .ps-ua { animation: ps-cr-reach 1.92s ease-in-out infinite; }
.alive .ps[data-loop="croon"] .ps-leg.ps-l { animation: ps-stepl 1.92s ease-in-out infinite; }
.alive .ps[data-loop="croon"] .ps-leg.ps-r { animation: ps-stepr 1.92s ease-in-out infinite; }
/* the floss (the "Swish Swish" dance): straight arms swinging together from side to side, one across his front, as
   the hips swing the other way, a swish on every beat. The legs lean from the feet so the hips really go */
@keyframes ps-fs-lua { 0%, 100% { transform: rotate(48deg); } 50% { transform: rotate(-34deg); } }
@keyframes ps-fs-rua { 0%, 100% { transform: rotate(34deg); } 50% { transform: rotate(-48deg); } }
@keyframes ps-fs-hips { 0%, 100% { transform: translateX(7px) rotate(-4deg); } 50% { transform: translateX(-7px) rotate(4deg); } }
@keyframes ps-fs-legs { 0%, 100% { transform: translate(-12px, 1px) rotate(9deg); } 50% { transform: translate(12px, 1px) rotate(-9deg); } }
@keyframes ps-fs-head { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.alive .ps[data-loop="floss"] .ps-l .ps-ua { animation: ps-fs-lua .96s cubic-bezier(.45, 0, .3, 1.4) infinite; }
.alive .ps[data-loop="floss"] .ps-r .ps-ua { animation: ps-fs-rua .96s cubic-bezier(.45, 0, .3, 1.4) infinite; }
.alive .ps[data-loop="floss"] .ps-lean { animation: ps-fs-hips .96s cubic-bezier(.45, 0, .3, 1.4) infinite; }
.alive .ps[data-loop="floss"] .ps-leg { animation: ps-fs-legs .96s cubic-bezier(.45, 0, .3, 1.4) infinite; }
.alive .ps[data-loop="floss"] .ps-hl { animation: ps-fs-head .96s cubic-bezier(.45, 0, .3, 1.4) infinite; }
/* the genres' own dances, for the TV's answer (danceFor in presenter.ts) */
/* rock: air guitar. One arm out holding the neck, the other strumming across his belly on the eighths, his head
   banging and his knees giving on every beat, feet planted wide */
@keyframes ps-rk-strum { 0%, 100% { transform: rotate(100deg); } 50% { transform: rotate(132deg); } }
@keyframes ps-rk-neck { 0%, 100% { transform: rotate(72deg); } 30% { transform: rotate(82deg); } }
@keyframes ps-rk-bang { 0%, 100% { transform: none; } 30% { transform: translateY(6px) rotate(5deg); } }
@keyframes ps-rk-knees { 0%, 100% { transform: none; } 30% { transform: translateY(4px) scale(1.03, .96); } }
@keyframes ps-rk-wide-l { 0%, 100% { transform: rotate(7deg); } }
@keyframes ps-rk-wide-r { 0%, 100% { transform: rotate(-7deg); } }
.alive .ps[data-loop="rock"] .ps-r .ps-fa { animation: ps-rk-strum .24s ease-in-out infinite; }
.alive .ps[data-loop="rock"] .ps-l .ps-ua { animation: ps-rk-neck .48s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="rock"] .ps-hl { animation: ps-rk-bang .48s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="rock"] .ps-body { animation: ps-rk-knees .48s cubic-bezier(.25, 1.75, .45, 1) infinite; transform-origin: 120px 330px; }
.alive .ps[data-loop="rock"] .ps-leg.ps-l { animation: ps-rk-wide-l 1s infinite; }
.alive .ps[data-loop="rock"] .ps-leg.ps-r { animation: ps-rk-wide-r 1s infinite; }
/* hip-hop: hands up and waving from side to side over two beats, the body leaning the other way, and the bounce: down
   on every beat, the head nodding with it */
@keyframes ps-hh-wave { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes ps-hh-lean { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } }
@keyframes ps-hh-bounce { 0%, 100% { transform: translateY(5px) scale(1.03, .96); } 50% { transform: translateY(-1px) scale(.99, 1.01); } }
@keyframes ps-hh-nod { 0%, 100% { transform: translateY(3px) rotate(-2deg); } 50% { transform: translateY(-1px) rotate(1deg); } }
.alive .ps[data-loop="hiphop"] .ps-sw { animation: ps-hh-wave 1.92s ease-in-out infinite; }
.alive .ps[data-loop="hiphop"] .ps-lean { animation: ps-hh-lean 1.92s ease-in-out infinite; }
.alive .ps[data-loop="hiphop"] .ps-body { animation: ps-hh-bounce .48s cubic-bezier(.2, .8, .4, 1) infinite; transform-origin: 120px 330px; }
.alive .ps[data-loop="hiphop"] .ps-hl { animation: ps-hh-nod .48s cubic-bezier(.2, .8, .4, 1) infinite .04s; }
/* salsa: the hips swinging round in a figure of eight, the forearms out at the waist rolling up and down against each
   other, a step on every other beat */
@keyframes ps-sa-hips { 0%, 100% { transform: translate(-7px, 0) rotate(5deg); } 25%, 75% { transform: translate(0, 2px) rotate(0); } 50% { transform: translate(7px, 0) rotate(-5deg); } }
@keyframes ps-sa-lfa { 0%, 100% { transform: rotate(64deg); } 50% { transform: rotate(96deg); } }
@keyframes ps-sa-rfa { 0%, 100% { transform: rotate(-96deg); } 50% { transform: rotate(-64deg); } }
@keyframes ps-sa-lua { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(34deg); } }
@keyframes ps-sa-rua { 0%, 100% { transform: rotate(-34deg); } 50% { transform: rotate(-24deg); } }
@keyframes ps-sa-head { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.alive .ps[data-loop="salsa"] .ps-lean { animation: ps-sa-hips .96s ease-in-out infinite; }
.alive .ps[data-loop="salsa"] .ps-l .ps-ua { animation: ps-sa-lua .96s ease-in-out infinite; }
.alive .ps[data-loop="salsa"] .ps-r .ps-ua { animation: ps-sa-rua .96s ease-in-out infinite; }
.alive .ps[data-loop="salsa"] .ps-l .ps-fa { animation: ps-sa-lfa .96s ease-in-out infinite; }
.alive .ps[data-loop="salsa"] .ps-r .ps-fa { animation: ps-sa-rfa .96s ease-in-out infinite; }
.alive .ps[data-loop="salsa"] .ps-hl { animation: ps-sa-head .96s ease-in-out infinite .06s; }
.alive .ps[data-loop="salsa"] .ps-leg.ps-l { animation: ps-stepl .96s ease-in-out infinite; }
.alive .ps[data-loop="salsa"] .ps-leg.ps-r { animation: ps-stepr .96s ease-in-out infinite; }
/* the hoedown: hands on his hips, a heel kicked out to one side and then the other with a hop each time, and every
   other bar one arm out twirling a lasso that isn't there, yee-haw (out to the side: raised any higher, his head is in
   the way) */
@keyframes ps-hd-hop { 0%, 60%, 100% { transform: none; } 12% { transform: translateY(1px) scale(1.04, .95); } 35% { transform: translateY(-9px) scale(.98, 1.03); } }
@keyframes ps-hd-kickl { 0%, 40%, 100% { transform: none; } 18% { transform: translateY(-12px) rotate(28deg); } }
@keyframes ps-hd-kickr { 0%, 50%, 90%, 100% { transform: none; } 68% { transform: translateY(-12px) rotate(-28deg); } }
@keyframes ps-hd-rua { 0%, 44%, 100% { transform: rotate(-62deg); } 50%, 94% { transform: rotate(-100deg); } }
@keyframes ps-hd-rfa { 0%, 44%, 100% { transform: rotate(108deg); } 50%, 62.5%, 75%, 87.5% { transform: rotate(-10deg); } 56%, 69%, 81%, 94% { transform: rotate(-46deg); } }
@keyframes ps-hd-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.alive .ps[data-loop="hoedown"] .ps-fig { animation: ps-hd-hop .48s ease-out infinite; transform-origin: 120px 330px; }
.alive .ps[data-loop="hoedown"] .ps-leg.ps-l { animation: ps-hd-kickl .96s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="hoedown"] .ps-leg.ps-r { animation: ps-hd-kickr .96s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="hoedown"] .ps-r .ps-ua { animation: ps-hd-rua 3.84s cubic-bezier(.25, 1.75, .45, 1) infinite; }
.alive .ps[data-loop="hoedown"] .ps-r .ps-fa { animation: ps-hd-rfa 3.84s ease-in-out infinite; }
.alive .ps[data-loop="hoedown"] .ps-lean { animation: ps-hd-sway .96s ease-in-out infinite; }
/* the dances' follow-through: the quiff and the bowtie flop on the beat, a moment behind the moves, which is most of
   what makes them read as cartoon bounce. The robot keeps his stiff */
@keyframes ps-flop { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.alive .ps:is([data-loop="dance"], [data-loop="roof"], [data-loop="floss"], [data-loop="hiphop"], [data-loop="hoedown"]) :is(.ps-hair, .ps-tie) { animation: ps-flop .96s cubic-bezier(.3, 1.6, .5, 1) infinite .08s; }
.alive .ps:is([data-loop="twist"], [data-loop="flamenco"], [data-loop="salsa"]) :is(.ps-hair, .ps-tie) { animation: ps-flop .96s cubic-bezier(.6, -.3, .35, 1.35) infinite .08s; }
.alive .ps[data-loop="rock"] :is(.ps-hair, .ps-tie) { animation: ps-flop .48s cubic-bezier(.3, 1.6, .5, 1) infinite .06s; }
.alive .ps[data-loop="croon"] :is(.ps-hair, .ps-tie) { animation: ps-flop 1.92s ease-in-out infinite .16s; }
/* a slow screen: he holds each pose and the whole drawing moves (see .av-lite above). His lips still follow the voice */
@keyframes psl-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-.8%) scale(1.012, .985); } }
@keyframes psl-hop { 0%, 100% { transform: none; } 14% { transform: scale(1.08, .9); } 45% { transform: translateY(-7.6%) scale(.96, 1.05); } 62% { transform: translateY(-7.6%); } 90% { transform: scale(1.06, .93); } }
@keyframes psl-sway { 0%, 100% { transform: rotate(-3deg); } 25%, 75% { transform: translateY(-1.5%); } 50% { transform: rotate(3deg); } }
@keyframes psl-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-.8%); } 75% { transform: translateX(.8%); } }
.alive.av-lite #presenter .ps { will-change: transform; transform-origin: 50% 97%; }
.alive.av-lite #presenter .ps[data-loop="calm"] { animation: psl-bob 2.6s ease-in-out infinite; }
.alive.av-lite #presenter .ps[data-loop="talk"] { animation: psl-bob 1.4s ease-in-out infinite; }
.alive.av-lite #presenter .ps[data-loop="clap"] { animation: psl-bob .68s ease-in-out infinite; }
.alive.av-lite #presenter .ps[data-loop="wave"] { animation: psl-sway 1.68s ease-in-out infinite; }
.alive.av-lite #presenter .ps[data-loop="jump"] { animation: psl-hop .78s ease-in-out infinite; }
.alive.av-lite #presenter .ps[data-loop="dance"] { animation: psl-sway .96s ease-in-out infinite; }
.alive.av-lite #presenter .ps[data-loop="groove"] { animation: psl-sway 1.92s ease-in-out infinite; }
.alive.av-lite #presenter .ps:is([data-loop="floss"], [data-loop="twist"], [data-loop="salsa"]) { animation: psl-sway .96s ease-in-out infinite; }
.alive.av-lite #presenter .ps[data-loop="croon"] { animation: psl-sway 1.92s ease-in-out infinite; }
.alive.av-lite #presenter .ps:is([data-loop="rock"], [data-loop="hiphop"]) { animation: psl-bob .48s ease-in-out infinite; }
.alive.av-lite #presenter .ps[data-loop="hoedown"] { animation: psl-hop .48s ease-in-out infinite; }
.alive.av-lite #presenter .ps[data-loop="laugh"] { animation: psl-shake .3s linear infinite; }
.alive.av-lite #presenter .ps[data-loop="shake"] { animation: psl-shake .1s linear infinite; }
/* the moving drawing is the <svg>, so a flip goes on what's in it */
.alive.av-lite #presenter.flip .ps { transform: none; }
.alive.av-lite #presenter.flip .ps-fig { transform: scaleX(-1); transform-origin: 120px 0; }

/* Your look (wardrobe.ts), laid out like a game's locker: your character on its stage, a row of slots that each show
   what's on, and the chosen slot's things. On a phone the stage and the slots stay in view and the list runs under them;
   on a computer the stage stands beside it. Nothing moves when you tap */
#wardrobe { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--cobalt); color: var(--cream); --fg: var(--cream); --fg-2: rgba(255, 246, 227, .9); padding: 0 var(--gut); }
#wardrobe > .sitebar { max-width: var(--site-max); margin: 0 auto; } /* the site's column (.sitepage), over a game too */
body.looking { overflow: hidden; }
.lk { max-width: var(--site-max); margin: 0 auto; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.lk h1 { margin: 2px 0 6px; font-family: var(--show); font-weight: 400; font-size: clamp(34px, 7vw, 48px); line-height: 1.1; color: var(--fg); }
.lktop { position: sticky; top: 0; z-index: 3; margin: 0 calc(-1 * var(--gut)); padding: 4px var(--gut) 10px; background: var(--cobalt); }
.lkside { display: grid; gap: 8px; }
.lkstage { position: relative; height: 168px; border-radius: 22px; overflow: hidden; background: radial-gradient(ellipse 55% 75% at 50% 42%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 70%), rgba(12, 18, 110, .32); }
.lkstage::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 10px; height: 14px; border-radius: 50%; background: rgba(12, 14, 60, .35); } /* the floor it stands on */
.lkfig { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; padding: 0 0 6px; border: 0; background: none; cursor: pointer; }
.lkfig .av { width: 150px; height: 150px; }
.lkfig .av.av-costume, .lkfig .av.av-legend { width: 66%; height: 66%; min-width: 0; min-height: 0; } /* a costume reaches past the character: a fin, a banjo's neck. Smaller, all of it shows */
/* trying on what isn't yours: a way back, in the corner, clear of the character */
.lkback { position: absolute; z-index: 2; top: 8px; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--cream); color: var(--ink); font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.lkback span { display: none; } .lkback[hidden] { display: none; } .lkback .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.lkname .ic { width: .8em; height: .8em; margin-right: 6px; vertical-align: -.05em; stroke-width: 2.6; }
.lkkit { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; } /* what the stage can't draw: your name tag and your buzzer */
.lkkit .wtag { margin: 0; font-size: 13px; }
.lkbuzz { pointer-events: auto; display: flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 11px 0 9px; border: 0; border-radius: 99px; background: rgba(12, 14, 60, .45); color: var(--cream); font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.lkbuzz .ic { width: 16px; height: 16px; }
.lkcap { display: grid; gap: 2px; text-align: center; }
.lkname { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--show); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--fg); }
.lknote { margin: 0; min-height: 2.6em; font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--fg-2); } /* two lines kept for the longest: nothing moves when it's tapped */
/* the slots: each shows what it has on, an empty one is dashed */
.lkslots { display: flex; gap: 6px; margin: 10px calc(-1 * var(--gut)) 0; padding: 2px var(--gut); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lkslots::-webkit-scrollbar { display: none; }
.ls { flex: 0 0 auto; min-width: 70px; display: grid; justify-items: center; gap: 3px; padding: 6px 4px 6px; border: 0; border-radius: 14px; background: rgba(12, 18, 110, .32); color: var(--cream); font: inherit; cursor: pointer; }
.lsart { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--cream); color: var(--ink); overflow: hidden; }
.lsart .av { width: 42px; height: 42px; } .lsart .av, .lsart .av * { animation: none !important; }
.lsart .wic { height: auto; } .lsart .wic .ic { width: 24px; height: 24px; }
.lsdot { display: block; width: 62%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 -3px 0 rgba(20, 20, 50, .2), 0 0 0 2px rgba(20, 20, 50, .12); } /* your colour */
.lsdot.clay { background: #c9bfae !important; }
.lsart .wtag { margin: 0; padding: 0 5px 1px; font-size: 9px; }
.ls.empty .lsart { background: none; box-shadow: inset 0 0 0 2px rgba(255, 246, 227, .45); }
.ls.empty .lsart { color: inherit; } .lsart .lsnone { width: 62%; height: 62%; stroke-width: 1.9; opacity: .6; } /* what goes in it, faint: an empty slot isn't a broken one */
.ls b { font-weight: 800; font-size: 11.5px; line-height: 1.1; white-space: nowrap; }
.ls[aria-selected="true"] { background: var(--cream); color: var(--ink); box-shadow: 0 0 0 3px var(--sun); }
.ls[aria-selected="true"] .lsart { background: rgba(20, 20, 50, .08); }
.ls.empty[aria-selected="true"] .lsart { box-shadow: inset 0 0 0 2px rgba(20, 20, 50, .3); }
.lkrule { margin: 14px 0 0; font-weight: 600; font-size: 14px; color: var(--fg-2); }
.lkkeep { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; justify-items: center; gap: 6px; padding: 10px 16px max(12px, env(safe-area-inset-bottom)); border-top: 3px solid var(--ink); background: var(--cream); color: var(--ink); text-align: center; }
.lkkeep[hidden] { display: none; }
.lkkeep b { font-weight: 900; font-size: 15px; }
.lkkeep .gbtn { min-height: 44px; }
.lkerr { margin: 0; font-weight: 700; font-size: 14px; color: var(--red); }
.lk.guest { padding-bottom: 124px; }
/* the chosen slot's things, each drawn on you */
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-top: 4px; }
.wsplit { grid-column: 1 / -1; margin: 10px 0 0; font-family: var(--show); font-weight: 400; font-size: 20px; color: var(--fg); }
.wt { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; padding: 8px 4px 12px; min-height: 124px; border: 0; border-radius: 14px; background: var(--cream); color: var(--ink); font: inherit; box-shadow: inset 0 -3px 0 rgba(20, 20, 50, .14); cursor: pointer; }
.wt .av { width: 72px; height: 72px; }
.wt .av, .wt .av * { animation: none !important; } /* the tiles hold still: only the character being dressed moves */
/* a flame burns up and left of its character: on the Flames tiles and slot the character stands smaller and lower, so the
   flame shows whole, inside the tile and clear of the worn tick (a flame on every tile once poked over each tick) */
.wgrid[data-tab="flame"] .wt .av, .ls[data-wtab="flame"] .lsart .av { transform: translate(7%, 9%) scale(.8); }
.wt > span { font-weight: 800; font-size: 13px; line-height: 1.15; }
.wt.on { box-shadow: 0 0 0 4px var(--sun), 0 6px 16px rgba(12, 14, 60, .35); }
/* the worn tick, on the tile only: a bare .won here once collapsed Solo's won end screen and hid the quizmaster's points */
.wt .won { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; display: none; place-items: center; border-radius: 50%; background: var(--sun); color: var(--ink); }
.wt.on .won { display: grid; } .wt .won .ic { width: 15px; height: 15px; stroke-width: 3; }
.wt.locked { background: rgba(255, 246, 227, .78); }
.wt.locked > .av, .wt.locked > .wic, .wt.locked > .wtag { opacity: .62; }
.wbar { position: absolute; left: 10px; right: 10px; bottom: 6px; height: 4px; border-radius: 2px; background: rgba(20, 20, 50, .12); overflow: hidden; }
.wbar i { display: block; height: 100%; border-radius: 2px; background: var(--ink); }
.wl { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--cream); }
.wl .ic { width: 13px; height: 13px; }
.wic { height: 72px; display: grid; place-items: center; }
.wic .ic { width: 36px; height: 36px; }
.wtag { align-self: center; margin: 24px 0; padding: 1px 10px 2px; border-radius: 99px; font-weight: 800; font-size: 14px; background: var(--cream); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.wtag.tag-sun { background: var(--sun); } .wtag.tag-mint { background: var(--mint); } .wtag.tag-ink { background: var(--ink); color: var(--cream); }
.wtag.tag-gold { background: var(--sun); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--sun); }
.wt > .wtag { margin: 22px 0 20px; padding: 3px 14px 4px; font-size: 18px; }
@media (max-height: 700px) and (max-width: 699px) { .lk h1 { font-size: 30px; margin: 0 0 2px; } .lkstage { height: 118px; } .lkfig .av { width: 104px; height: 104px; } .lkname { font-size: 19px; } .lknote { font-size: 13px; }
  .lkslots { margin-top: 6px; } .ls { min-width: 62px; padding: 5px 3px; } .lsart { width: 36px; height: 36px; } .lsart .av { width: 34px; height: 34px; } .ls b { font-size: 10.5px; } }
@media (min-width: 600px) { .lkback { width: auto; height: auto; min-height: 34px; gap: 5px; padding: 0 12px 0 10px; border-radius: 99px; display: flex; align-items: center; } .lkback span { display: inline; } }
/* a big phone on its side: the same order, with room to breathe, and every slot in one row */
@media (min-width: 600px) and (max-width: 699px) {
  .lkstage { height: 230px; } .lkfig .av { width: 210px; height: 210px; }
  .lkslots { justify-content: center; } .ls { min-width: 72px; } /* nine of them, in one row */
  .wgrid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
  .wt .av { width: 84px; height: 84px; }
}
/* a tablet, a computer: your character large on the left, the slots and the list beside it (a tablet held upright too:
   the phone's order stretched to 768 was a wide short stage over small tiles) */
@media (min-width: 700px) {
  .lk, .lk.guest { display: grid; grid-template-columns: minmax(300px, 36%) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 40px; padding-bottom: 40px; }
  .lk h1 { grid-column: 1 / -1; font-size: 48px; margin-bottom: 12px; }
  .lktop { display: contents; }
  .lkside { grid-column: 1; grid-row: 2 / span 3; position: sticky; top: 20px; align-self: start; gap: 12px; }
  .lkstage { height: min(460px, calc(100vh - 300px)); min-height: 260px; border-radius: 28px; }
  .lkstage::after { bottom: 16px; height: 22px; }
  .lkfig .av { width: min(380px, calc(100vh - 340px)); height: min(380px, calc(100vh - 340px)); min-width: 220px; min-height: 220px; }
  .lkback, .lkbuzz { min-height: 34px; font-size: 14px; } .lkback { top: 12px; right: 12px; } .lkkit { left: 12px; right: 12px; bottom: 12px; } .lkkit .wtag { font-size: 14px; }
  .lkname { font-size: 28px; } .lknote { font-size: 16px; }
  .lkkeep { position: static; width: 100%; box-sizing: border-box; padding: 12px 16px; border: 3px solid var(--ink); border-radius: 18px; }
  .lkslots { grid-column: 2; grid-row: 2; position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 4px 0 14px; overflow: visible; background: var(--cobalt); } /* (4px: the chosen slot's ring whole while it sticks) */
  .ls { width: auto; padding: 10px 4px 9px; border-radius: 16px; gap: 6px; } .lsart { width: 56px; height: 56px; } .lsart .av { width: 54px; height: 54px; } .ls b { font-size: 13px; }
  .wgrid { grid-column: 2; grid-row: 3; align-self: start; margin: 0; padding-top: 6px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
  .lkrule { grid-column: 2; grid-row: 4; }
  .wsplit { font-size: 24px; margin-top: 14px; }
  .wt { min-height: 158px; padding: 12px 6px 14px; border-radius: 16px; } .wt .av { width: 104px; height: 104px; } .wt > span { font-size: 14px; }
  .wic { height: 104px; }
}
@media (min-width: 900px) and (max-width: 1499px) { .ls { padding-left: 1px; padding-right: 1px; } .ls b { font-size: 11.5px; } } /* nine slots: Estampados fits */
/* a tablet held upright: a narrower stage, the nine slots in three rows of three, three things to a row */
@media (min-width: 700px) and (max-width: 899px) {
  .lk, .lk.guest { grid-template-columns: minmax(250px, 38%) minmax(0, 1fr); column-gap: 24px; }
  .lk h1 { font-size: 44px; margin-bottom: 10px; }
  .lkstage { height: min(380px, calc(100vh - 340px)); min-height: 240px; }
  .lkfig .av { width: min(230px, calc(100vh - 400px)); height: min(230px, calc(100vh - 400px)); min-width: 180px; min-height: 180px; }
  .lkname { font-size: 24px; } .lknote { font-size: 15px; }
  .lkslots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lsart { width: 50px; height: 50px; } .lsart .av { width: 48px; height: 48px; }
  .wgrid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
  .wt { min-height: 140px; } .wt .av { width: 88px; height: 88px; } .wic { height: 88px; }
}
@media (min-width: 1500px) {
  .lk, .lk.guest { grid-template-columns: 520px minmax(0, 1fr); }
  .lsart { width: 64px; height: 64px; } .lsart .av { width: 62px; height: 62px; } .ls b { font-size: 14px; }
  .wgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
/* Friends (src/web/friends-sheet.ts): the sheets, cream paper over the screen like the wardrobe's */
.frs { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; background: var(--cream); color: var(--ink); --fg: var(--ink); --fg-2: rgba(20, 20, 50, .72); --line: rgba(20, 20, 50, .22); user-select: none; -webkit-user-select: none; }
.fh { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; } .fh h2 { flex: 1; min-width: 0; margin: 0; font-size: 28px; line-height: 1.05; color: var(--ink); }
.fx { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; } .fx .ic { width: 20px; height: 20px; }
.fk { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; height: 100%; max-width: 520px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px 0; }
.fnote { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--fg-2); min-height: 41px; }
.fstage { display: none; }

/* the tiles: the wardrobe's, one a person. What a tile says has its room from the start, so a tap moves nothing */
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 3px; margin: -3px; min-height: 0; }
.ft { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 2px; min-width: 0; padding: 8px 6px 9px; border: 0; border-radius: 14px; background: #fff; color: var(--ink); font: inherit; box-shadow: inset 0 -3px 0 rgba(20, 20, 50, .12); cursor: pointer; }
.ft .av { width: 66px; height: 66px; margin-bottom: 7px; }
.ft b { position: relative; }
/* a usual night is 4 to 6 people: bigger faces, not a small grid and empty paper */
.fgrid.few { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fgrid.few .ft { padding: 16px 8px 12px; } .fgrid.few .ft .av { width: 100px; height: 100px; margin-bottom: 9px; } .fgrid.few .ft b { font-size: 17px; } .fgrid.few .ft small { font-size: 13px; }
.fgrid.n1 { grid-template-columns: minmax(0, 280px); justify-content: center; }
.fgrid.n1 .ft { padding: 26px 12px 16px; } .fgrid.n1 .ft .av { width: 170px; height: 170px; margin-bottom: 12px; } .fgrid.n1 .ft b { font-size: 22px; } .fgrid.n1 .ft small { font-size: 14px; }
@media (max-height: 700px) { .fgrid.few .ft { padding: 12px 6px 9px; } .fgrid.few .ft .av { width: 72px; height: 72px; margin-bottom: 7px; } .fnote { min-height: 0; } }
.ft .av, .ft .av * { animation: none !important; }
.ft b { max-width: 100%; font-weight: 900; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft small { display: block; min-height: 17px; padding: 0 7px; font-weight: 800; font-size: 12px; line-height: 17px; color: var(--fg-2); border-radius: 99px; }
.ft .fb { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--cream); } /* inside a tile: the TV's final board is .fb too */
.ft .fb .ic { width: 14px; height: 14px; }
.ft.f-picked { box-shadow: inset 0 0 0 3px var(--ink); }
.ft.f-picked .fb { background: var(--sun); color: var(--ink); }
.ft.f-you small { background: var(--sun); color: var(--ink); transform: rotate(-2deg); }
.ft.f-both { background: var(--sun); box-shadow: inset 0 0 0 3px var(--ink); cursor: default; animation: pop .35s var(--ease) both; }
.ft.f-both small { font-family: var(--show); font-weight: 400; font-size: 15px; color: var(--ink); }
.ft.f-both .fb { background: var(--ink); color: var(--sun); }
.ft.f-old { background: transparent; box-shadow: inset 0 0 0 2px var(--line); cursor: default; }

.ffoot { margin: 2px -16px 0; padding: 10px 16px max(12px, env(safe-area-inset-bottom)); background: var(--cream); }
.fk .ffoot.ask { display: flex; align-items: center; gap: 12px; border-top: 3px solid var(--ink); background: #fff; }
.ffoot b { flex: 1; min-width: 0; font-weight: 900; font-size: 15px; line-height: 1.2; }
.fsign { flex: none; display: flex; gap: 8px; min-width: 44px; min-height: 44px; align-items: center; }
.ffoot .btn.wide { width: 100%; }

/* your friends */
.fl { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; height: 100%; max-width: 520px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px 0; }
.fleft { display: none; min-height: 0; }
.fright { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; grid-auto-rows: min-content; gap: 10px; padding: 3px; margin: -3px; }
.v-add .fleft, .v-card .fleft { display: grid; } .v-add .fright, .v-card .fright, .v-add .fadd, .v-card .fadd { display: none; }
.v-add, .v-card { grid-template-rows: auto minmax(0, 1fr); }
.fsec { margin: 6px 0 0; font-weight: 900; font-size: 15px; } .fsec span { color: var(--fg-2); font-weight: 800; }
.frows { display: grid; gap: 8px; }
.frow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 18px; gap: 10px; align-items: center; width: 100%; padding: 8px 10px 8px 8px; border: 0; border-radius: 14px; background: #fff; color: var(--ink); font: inherit; text-align: left; box-shadow: inset 0 -3px 0 rgba(20, 20, 50, .12); cursor: pointer; }
.frow.on { box-shadow: inset 0 0 0 3px var(--ink); }
.frow .av, .frq .av { width: 52px; height: 52px; }
.frow .av, .frow .av *, .frq .av, .frq .av * { animation: none !important; }
/* a row's character a size smaller inside its square and stood on its floor: a fin, an antenna or a hat reached over the
   row's top edge at full size */
.frow .av, .frq .av { transform: translateY(7%) scale(.86); }
/* your link: room over the character standing on the code, for what it wears (a fin was cut at the card's edge) */
.fpass { padding-top: 44px; }
.fn { min-width: 0; display: grid; gap: 1px; }
.fn b { font-weight: 900; font-size: 16px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn small { font-weight: 700; font-size: 13px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsc { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.fsc small { font-weight: 700; font-size: 12px; color: var(--fg-2); }
.fsc b { font-weight: 900; font-size: 16px; }
.fc { color: var(--fg-2); display: grid; } .fc .ic { width: 16px; height: 16px; }
.frq { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px 10px; align-items: center; padding: 10px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 3px var(--ink); }
.frq .fn b { white-space: normal; }
.frk { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.frk .btn { flex: 1; font-size: 16px; padding: 11px 16px; }
.flink { border: 0; background: none; padding: 8px 2px; min-height: 40px; font: inherit; font-weight: 800; font-size: 15px; color: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
/* a friend asking you to their game, and turning notifications on: request cards, the ask in the game's own yellow */
.frq.finv { background: var(--sun); } .finv .btn.go { background: var(--ink); color: var(--cream); }
.finv .fn small, .fbell .fn small { white-space: normal; }
.fbi { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--cobalt); color: var(--cream); }
.fbi svg, .fbi .ic { width: 26px; height: 26px; }
.fbell.on { box-shadow: inset 0 -3px 0 rgba(20, 20, 50, .12); } .fbell.on .fbi { background: var(--green); }

.fright > .fempty:only-child { min-height: 100%; }
.fempty { display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center; padding: 0 12px; }
.fempty h3 { margin: 10px 0 0; font-size: 28px; line-height: 1.05; } .fempty p { margin: 0; max-width: 24em; font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--fg-2); }
.fghost { display: flex; gap: 10px; align-items: center; } .fghost i, .fghost span { width: 84px; height: 104px; box-sizing: border-box; border-radius: 14px; } .fghost i { border: 3px dashed var(--line); } .fghost span { display: grid; place-items: center; background: #fff; box-shadow: inset 0 -3px 0 rgba(20, 20, 50, .12); } .fghost .av { width: 72px; height: 72px; }

.fpass, .fcard { --fg: var(--cream); --fg-2: rgba(255, 246, 227, .9); --line: rgba(255, 246, 227, .28); display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 0; padding: 20px 18px; margin-bottom: 12px; border-radius: 20px; background: var(--cobalt); color: var(--cream); text-align: center; overflow: hidden; }
.fqr { position: relative; width: min(58vw, 42vh, 240px); aspect-ratio: 1; padding: 14px; border-radius: 18px; background: var(--cream); box-sizing: border-box; margin-top: 52px; }
.fqr img { display: block; width: 100%; height: 100%; }
.fpav { position: absolute; top: -67px; left: 50%; margin-left: -40px; width: 80px; height: 80px; } .fpav .av { width: 80px; height: 80px; }
.fpass h3, .fcard h3 { margin: 0; font-size: 26px; line-height: 1.05; color: var(--cream); } .fcard h3 { font-size: 40px; }
.fpass .btn.wide, .fcard .btn.wide { width: 100%; max-width: 340px; }
.fsmall { margin: 0; font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--fg-2); } .fsmall .flink { font-size: 14px; padding: 0 2px; min-height: 0; }
.fcard .av { width: min(52vw, 34vh, 220px); height: min(52vw, 34vh, 220px); } .fcard p { margin: -6px 0 2px; font-weight: 700; font-size: 16px; color: var(--fg-2); }
.fsafe { display: flex; gap: 20px; justify-content: center; }
.fcard .fsure { min-height: 41px; margin: 0; font-weight: 800; font-size: 15px; line-height: 1.3; color: var(--sun); }
/* a friend's card: room over the character for what it wears (an antenna, a fin), their Daily Gig today and your games
   together as the card's two numbers, and the rare lasting actions behind the ••• in its corner */
.fcard { position: relative; padding-top: 40px; }
.fcard .fdots { position: absolute; z-index: 1; top: 10px; right: 10px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 20, 50, .07); color: var(--fg); cursor: pointer; }
.fcard .fdots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.fcard .fdots .ic { width: 18px; height: 18px; }
.fcard .fstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 380px; }
.fcard .fstats div { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 12px 6px 10px; border-radius: 14px; background: #fff; box-shadow: inset 0 -3px 0 rgba(20, 20, 50, .12); }
.fcard .fstats b { font-family: var(--show); font-weight: 400; font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fcard .fstats b.none { color: var(--fg-2); }
.fcard .fstats small { font-weight: 800; font-size: 13px; line-height: 1.2; color: var(--fg-2); }

@media (max-width: 380px) { .fh h2 { font-size: 24px; } }
/* a tablet held upright: more room, the same order */
@media (min-width: 600px) and (max-width: 899px) {
  .fk, .fl { max-width: 720px; padding-left: 24px; padding-right: 24px; }
  .ffoot { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  .fgrid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
  .ft .av { width: 92px; height: 92px; } .ft b { font-size: 15px; } .ft small { font-size: 13px; }
  .fgrid.few { gap: 12px; } .fgrid.few .ft { padding: 22px 10px 16px; } .fgrid.few .ft .av { width: 168px; height: 168px; margin-bottom: 12px; } .fgrid.few .ft b { font-size: 21px; } .fgrid.few .ft small { font-size: 15px; }
  .fgrid.n1 { grid-template-columns: minmax(0, 380px); } .fgrid.n1 .ft .av { width: 240px; height: 240px; }
  .frows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frq { grid-template-columns: 52px minmax(0, 1fr) auto; } .frk { grid-column: auto; } .frk .btn { padding: 11px 24px; }
  .fqr { width: min(56vw, 44vh, 420px); } .fpav { top: -92px; margin-left: -55px; width: 110px; height: 110px; } .fpav .av { width: 110px; height: 110px; } .fqr { margin-top: 76px; padding: 22px; }
  .fpass h3 { font-size: 36px; } .fcard .av { width: 260px; height: 260px; } .fsmall { font-size: 16px; }
  .fpass { padding-top: 60px; } .fcard { padding: 48px 28px 28px; gap: 16px; } .fcard .fstats b { font-size: 38px; } .fcard .fstats small { font-size: 15px; } .fcard .fsure { font-size: 17px; } .fcard .flink { font-size: 17px; }
  .fh h2 { font-size: 34px; }
}
/* a computer, or a tablet on its side: who you are on the left, the people on the right */
@media (min-width: 900px) {
  .fk, .fl { max-width: 1280px; padding: 24px 40px; column-gap: 36px; row-gap: 12px; grid-template-columns: minmax(320px, 34%) minmax(0, 1fr); }
  .fh h2 { font-size: 40px; }
  .fk { grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: 'head head' 'stage note' 'stage grid' 'foot grid'; }
  .fk .fh { grid-area: head; } .fk .fnote { grid-area: note; min-height: 0; font-size: 18px; } .fgrid { grid-area: grid; align-content: start; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .fk .ffoot { grid-area: foot; margin: 0; padding: 0; background: none; }
  .fk .ffoot.ask { padding: 12px 16px; border: 3px solid var(--ink); border-radius: 18px; background: #fff; }
  .fstage { grid-area: stage; position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; align-content: center; gap: 0 4px; padding: 20px; border-radius: 24px; background: var(--cobalt); overflow: hidden; }
  .fstage .av { width: min(240px, 34vh); height: min(240px, 34vh); margin: 0 -14px; }
  .fstage .av:not(:only-of-type) { width: min(180px, 28vh); height: min(180px, 28vh); }
  .fstage p { width: 100%; margin: 12px 0 0; text-align: center; font-family: var(--show); font-size: 26px; line-height: 1.1; color: var(--cream); }
  .ft { padding: 12px 8px 12px; border-radius: 16px; } .ft .av { width: 104px; height: 104px; } .ft b { font-size: 16px; } .ft small { font-size: 13px; }
  .fgrid.few { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .fgrid.few .ft { padding: 18px 10px 14px; } .fgrid.few .ft .av { width: min(150px, 22vh); height: min(150px, 22vh); margin-bottom: 10px; } .fgrid.few .ft b { font-size: 20px; } .fgrid.few .ft small { font-size: 14px; }
  .fgrid.n1 { grid-template-columns: minmax(0, 340px); } .fgrid.n1 .ft .av { width: min(240px, 36vh); height: min(240px, 36vh); }
  .fl, .v-add, .v-card { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'head head' 'left right'; }
  .fl .fh { grid-area: head; }
  .fl .fleft, .v-add .fleft, .v-card .fleft { grid-area: left; display: grid; }
  .fl .fright, .v-add .fright, .v-card .fright { grid-area: right; display: grid; }
  .fl .fadd { display: none; }
  .v-add .fback { display: none; }
  .fpass, .fcard { margin: 0; padding: 28px 24px; border-radius: 24px; }
  .fqr { width: min(260px, 38vh); }
  .frows { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
  .fsec { font-size: 18px; }
  .frow { grid-template-columns: 64px minmax(0, 1fr) auto 18px; padding: 10px 12px 10px 10px; } .frow .av, .frq .av { width: 64px; height: 64px; }
  .frow .fn b { font-size: 18px; } .fn small { font-size: 14px; } .fsc b { font-size: 18px; } .fsc small { font-size: 13px; }
  .frq { grid-template-columns: 64px minmax(0, 1fr) auto; padding: 12px 16px 12px 12px; } .frq .fn b { font-size: 18px; } .frk { grid-column: auto; } .frk .btn { padding: 11px 24px; }
  .fbi { width: 64px; height: 64px; } .fbi svg, .fbi .ic { width: 30px; height: 30px; }
  .fempty h3 { font-size: 40px; } .fempty p { font-size: 18px; } .fghost i, .fghost span { width: 124px; height: 152px; } .fghost .av { width: 108px; height: 108px; }
  .fcard .av { width: min(260px, 32vh); height: min(260px, 32vh); margin-top: 3vh; } .fcard h3 { font-size: clamp(32px, 5vh, 48px); }
  .fcard { padding-top: 48px; } .fpass { padding-top: 40px; } .fcard .fstats b { font-size: 36px; } .fcard .fstats small { font-size: 14px; }
}
@media (min-width: 1500px) {
  .fk, .fl { max-width: 1640px; grid-template-columns: 460px minmax(0, 1fr); }
  .fgrid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } .ft .av { width: 124px; height: 124px; }
  .fgrid.few .ft .av { width: min(210px, 25vh); height: min(210px, 25vh); } .fgrid.few .ft b { font-size: 24px; } .fgrid.few .ft small { font-size: 16px; }
  .frows { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 14px; }
  .frow { grid-template-columns: 84px minmax(0, 1fr) auto 20px; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; } .frow .av, .frq .av { width: 84px; height: 84px; }
  .frow .fn b, .frq .fn b { font-size: 22px; } .fn small { font-size: 16px; } .fsc b { font-size: 22px; } .fsc small { font-size: 14px; } .fsec { font-size: 22px; }
  .frq { grid-template-columns: 84px minmax(0, 1fr) auto; } .fqr { width: min(340px, 40vh); }
}


/* SongBuzz on the home screen (src/web/pin.ts): the home page's banner, the card at the end of a game, and the sheet with
   the browser's own steps. Each sits in its place from the start: nothing on the page moves to make room */
.pinbar { display: none; grid-template-columns: 44px minmax(0, 1fr) auto 36px; gap: 10px; align-items: center; padding: max(10px, env(safe-area-inset-top)) 6px 10px 14px; background: var(--cream); color: var(--ink); border-bottom: 3px solid var(--ink); }
html[data-pin] .pinbar { display: grid; }
html[data-pin] .sitebar { padding-top: 0; }
.pinbar img { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 0 0 2px var(--ink); }
.pinbar b { display: block; font-weight: 900; font-size: 16px; line-height: 1.15; }
.pinbar small { display: block; font-weight: 600; font-size: 13px; line-height: 1.2; color: rgba(20, 20, 50, .72); }
.pinbar .btn { min-height: 40px; padding: 0 16px; font-size: 15px; font-weight: 900; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.pinbar .btn:active { box-shadow: 0 1px 0 var(--ink); }
.pinbar .x { width: 36px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; } .pinbar .x .ic { width: 18px; height: 18px; }
@media (min-width: 700px) { .pinbar { padding-left: max(14px, calc(50% - 330px)); padding-right: max(6px, calc(50% - 330px)); } }
.pincard { --fg: var(--ink); --fg-2: rgba(20, 20, 50, .72); color: var(--ink); display: grid; gap: 10px; padding: 16px 16px 8px; border-radius: 20px; background: #fff; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); margin: 10px 0 6px; text-align: left; }
.pincard .kh { display: flex; gap: 12px; align-items: center; }
.pincard .kh img { width: 56px; height: 56px; border-radius: 14px; flex: none; box-shadow: 0 0 0 2.5px var(--ink); }
.pincard .kh small { display: block; font-weight: 800; font-size: 13px; color: var(--fg-2); }
.pincard .kh h2 { margin: 0; font-family: var(--show); font-weight: 400; font-size: 26px; line-height: 1.02; color: var(--ink); }
.pincard p { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--fg-2); }
.pincard .pinadd { width: 100%; min-height: 52px; padding: .5em 1em; font-weight: 900; font-size: 17px; line-height: 1.15; border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.pincard .pinadd:active { box-shadow: 0 1px 0 var(--ink); }
.pincard .pinadd svg, .pinsheet li i svg { width: 22px; height: 22px; flex: none; }
.pincard .lnk { justify-self: center; background: none; border: 0; font: inherit; font-weight: 800; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; padding: 8px 10px 10px; cursor: pointer; }
html.pinlocked, html.pinlocked body { overflow: hidden; }
.pinsheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; overflow-y: auto; background: var(--cream); color: var(--ink); --fg: var(--ink); --fg-2: rgba(20, 20, 50, .72); font-family: var(--font); text-align: left; }
.pinsheet .pk { display: grid; grid-template-rows: auto auto auto 1fr; gap: 14px; min-height: 100%; max-width: 520px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); }
.pinsheet .fh { display: flex; align-items: center; gap: 12px; } .pinsheet .fh h2 { flex: 1; min-width: 0; margin: 0; font-family: var(--show); font-weight: 400; font-size: 28px; line-height: 1.05; color: var(--ink); }
.pinsheet .fx { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; } .pinsheet .fx .ic { width: 20px; height: 20px; }
.pinsheet .fnote { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--fg-2); }
.pinsheet ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; counter-reset: pin; }
.pinsheet li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 46px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fff; border: 2.5px solid var(--ink); font-weight: 600; font-size: 17px; line-height: 1.25; }
.pinsheet li::before { counter-increment: pin; content: counter(pin); width: 34px; height: 34px; display: grid; place-items: center; box-sizing: border-box; border-radius: 50%; background: var(--sun); border: 2.5px solid var(--ink); font-family: var(--show); font-size: 18px; line-height: 1; }
.pinsheet li b { font-weight: 900; }
.pinsheet li i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: #eef0f6; color: #0a7aff; }
.pinsheet li i.app { background: none; } .pinsheet li i.app img { width: 46px; height: 46px; border-radius: 11px; }
.pinsheet .pk > .btn { align-self: end; width: 100%; min-height: 54px; border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
/* a tablet or a computer: a card in the middle, Done right under the steps (a phone's column with Done 600px below them
   was an empty page) */
@media (min-width: 600px) {
  .pinsheet { display: grid; place-items: center; padding: 24px; background: rgba(20, 20, 50, .55); }
  .pinsheet .pk { grid-template-rows: none; min-height: 0; width: 100%; max-width: 560px; margin: 0; padding: 26px 28px 28px; border-radius: 26px; background: var(--cream); border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); }
  .pinsheet .pk > .btn { align-self: start; margin-top: 6px; }
}
.pincard .btn.go, .sunfield .pincard .btn.go, .pinsheet .btn.go, .sunfield .pinsheet .btn.go { background: var(--sun); color: var(--ink); } /* the yellow key, on a board whose keys are ink too */
@media (max-width: 380px) { .pincard .pinadd { font-size: 16px; padding: .5em .8em; } .pincard .pinadd svg { display: none; } }

/* Sound and screen (web/house-tv.ts): where a house hears and sees the game, this device or a TV. A phone's whole screen;
   a card in the middle from a tablet's width, the two ways side by side from a computer's. */
.hsheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; overflow-y: auto; background: var(--cream); color: var(--ink); --fg: var(--ink); --fg-2: rgba(20, 20, 50, .72); font-family: var(--font); text-align: left; }
.hsheet .hk { display: grid; grid-template-rows: auto auto auto 1fr; gap: 14px; min-height: 100%; max-width: 520px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); box-sizing: border-box; }
.hsheet .fh { display: flex; align-items: center; gap: 12px; } .hsheet .fh h2 { flex: 1; min-width: 0; margin: 0; font-family: var(--show); font-weight: 400; font-size: 28px; line-height: 1.05; color: var(--ink); }
.hsheet .fx { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; } .hsheet .fx .ic { width: 20px; height: 20px; }
.hsheet .fnote { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--fg-2); }
.hsopts { display: grid; gap: 12px; align-content: start; }
.hso { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 18px; background: #fff; border: 2.5px solid var(--ink); }
.hso.on { box-shadow: 0 4px 0 var(--ink); }
.hsi { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 2.5px solid var(--ink); box-sizing: border-box; color: var(--ink); } .hsi .ic { width: 24px; height: 24px; }
.hso.on .hsi { background: var(--sun); }
.hso > div { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.hso h3 { margin: 10px 0 0; font-weight: 900; font-size: 19px; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.hso p { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--fg-2); }
.hso .btn { margin-top: 2px; font-size: 16px; padding: 11px 16px; border: 2.5px solid var(--ink); white-space: nowrap; }
.hso .btn .ic { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; }
.hso .btn[aria-busy="true"] { opacity: .6; }
.hso .hsline:empty { display: none; }
.hso .hsline { font-weight: 800; color: var(--ink); }
.hso .hsalt { font-size: 14px; }
.hso .hsway { font-size: 16px; color: var(--ink); }
.hso code { font-family: inherit; font-weight: 900; color: var(--ink); white-space: nowrap; }
.hso b { font-weight: 900; color: var(--ink); }
.hso .hscode { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--sun); letter-spacing: .08em; }
.hso .hswarn { font-weight: 800; color: var(--ink); }
.hsheet .hk > .btn { align-self: end; width: 100%; min-height: 54px; border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.hsheet .btn.go, .sunfield .hsheet .btn.go { background: var(--sun); color: var(--ink); }
.hsheet .btn.ghost { background: transparent; color: var(--ink); }
.hsheet .btn:not(.go):not(.ghost) { background: var(--ink); color: var(--cream); }
@media (min-width: 600px) {
  .hsheet { display: grid; place-items: center; padding: 24px; background: rgba(20, 20, 50, .55); }
  .hsheet .hk { grid-template-rows: none; min-height: 0; width: 100%; max-width: 580px; margin: 0; padding: 26px 28px 28px; border-radius: 26px; background: var(--cream); border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); }
  .hsheet .hk > .btn { align-self: start; margin-top: 6px; }
  .hsheet .fh h2 { font-size: 34px; }
}
@media (min-width: 960px) {
  .hsheet .hk { max-width: 900px; padding: 30px 34px 32px; }
  .hsopts { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hso { grid-template-columns: 1fr; padding: 20px; align-content: start; }
  .hso h3 { margin-top: 2px; font-size: 22px; }
  .hso p, .hsheet .fnote { font-size: 16px; }
  .hsheet .hk > .btn { justify-self: end; width: auto; min-width: 220px; }
}

/* Something new for your character (web/reward.ts): the whole screen, over whatever page it's on. Several things sit side by
   side, a screenful each, swiped (scroll-snap) or stepped with the dots and, given a mouse, the arrows.
   Its rays turn behind you; the name and how you earned it under; Wear it, then Not now, at the thumb. */
.rw { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; overflow: hidden auto; padding: max(16px, env(safe-area-inset-top)) var(--gut, 16px) max(16px, env(safe-area-inset-bottom)); background: var(--ink); color: var(--cream); --fg: var(--cream); --fg-2: rgba(255, 246, 227, .9); animation: rwin .28s ease-out both; }
body.rewarding { overflow: hidden; }
.rwrays { position: fixed; left: 50%; top: 40%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, var(--cobalt) 0deg 9deg, transparent 9deg 22.5deg); animation: rwspin 24s linear infinite; }
.rwrays::after { content: ''; position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(255, 197, 49, .4), transparent 34%); }
.rwx { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 246, 227, .14); color: var(--cream); cursor: pointer; }
.rwx .ic { width: 22px; height: 22px; stroke-width: 2.6; }
.rwin { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px; width: 100%; max-width: 460px; text-align: center; }
.rwtop { position: relative; z-index: 2; padding: 4px 12px; border-radius: 99px; background: var(--ink); font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--sun); }
.rwview { --fig: min(62vw, 38vh, 300px); --figm: clamp(18px, 5vh, 44px); position: relative; justify-self: start; width: 100vw; margin-left: calc(50% - 50vw); }
.rwtrack { display: flex; overflow: auto hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x pan-y; }
.rwtrack::-webkit-scrollbar { display: none; }
.rwslide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0 var(--gut, 16px); }
.rwslide > * { max-width: 460px; }
.rwarr { position: absolute; top: calc(var(--figm) + var(--fig) / 2 - 28px); display: none; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: rgba(255, 246, 227, .14); color: var(--cream); cursor: pointer; transition: opacity .2s; }
.rwarr .ic { width: 26px; height: 26px; stroke-width: 2.6; }
.rwarr.prev { left: calc(50% - min(46vw, 330px)); }
.rwarr.next { right: calc(50% - min(46vw, 330px)); }
.rwarr.next .ic { transform: scaleX(-1); }
.rwarr:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 600px) { .rwarr { display: grid; } .rwarr:hover { background: rgba(255, 246, 227, .26); } }
.rwdots { display: flex; justify-content: center; margin-top: 4px; }
.rwdots button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.rwdots button::before { content: ''; display: block; width: 10px; height: 10px; margin: auto; border-radius: 99px; background: rgba(255, 246, 227, .35); transition: width .2s, background .2s; }
.rwdots button.on::before { width: 24px; background: var(--sun); }
.rwfig { width: var(--fig); aspect-ratio: 1; margin: var(--figm) 0 2px; animation: rwpop .55s cubic-bezier(.2, 1.6, .4, 1) .08s both; }
.rwfig .av { width: 100%; height: 100%; overflow: visible; }
.rwfig.worn { animation: rwworn .5s ease-out both; }
.rwtag { margin-top: -4px; font-size: 18px; }
.rwhear { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 99px; background: rgba(255, 246, 227, .14); color: var(--cream); font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; }
.rwhear .ic { width: 20px; height: 20px; }
.rwname { font-size: clamp(38px, 11vw, 60px); line-height: 1; margin-top: 4px; }
.rwhow { margin: 0; max-width: 30em; font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--fg-2); text-wrap: balance; }
.rwacts { display: grid; justify-items: center; gap: 4px; width: 100%; margin-top: 14px; }
.rwgo { width: 100%; max-width: 340px; min-height: 58px; }
.rwgo .ic { width: 1em; height: 1em; stroke-width: 3; }
.rwsign { font-weight: 800; font-size: 16px; }
.rw .gbtn { min-height: 44px; }
.rwlater { min-height: 48px; padding: 0 22px; border: 0; background: none; color: var(--fg-2); font: inherit; font-weight: 800; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@keyframes rwin { from { opacity: 0; } }
@keyframes rwspin { to { transform: rotate(360deg); } }
@keyframes rwpop { from { transform: scale(.3) rotate(-8deg); opacity: 0; } }
@keyframes rwworn { 40% { transform: scale(1.08); } }
@media (min-width: 600px) { .rwview { --fig: min(36vh, 360px); } }
@media (min-width: 900px) { .rwview { --fig: min(34vh, 320px); } .rwname { font-size: 64px; } .rwhow { font-size: 18px; } }
@media (max-height: 600px) { .rwview { --fig: min(34vh, 200px); --figm: 0px; } .rwname { font-size: 34px; } .rwacts { margin-top: 6px; } }
@media (min-width: 1600px) and (min-height: 900px) { .rwin { max-width: 560px; } .rwslide > * { max-width: 560px; } .rwview { --fig: min(38vh, 420px); } .rwname { font-size: 80px; } .rwhow { font-size: 20px; } .rwgo { max-width: 400px; min-height: 64px; } }