/* cg-friends.css (27 Oct 2026): Play with friends, the same in every game; follows the text color of the game it sits in */
.fr{display:grid;gap:14px;justify-items:center;text-align:center;width:100%;max-width:460px;margin:0 auto;padding:clamp(20px,3vw,32px) 0;color:inherit}
.fr-h{margin:0;font-size:clamp(24px,2.6vw,30px);font-weight:600;letter-spacing:-.02em}
.fr-t{margin:0;font-size:15px;line-height:1.5;opacity:.7;max-width:30em}
.fr-names{display:grid;gap:8px;width:100%;margin:4px 0 0;padding:0;list-style:none}
.fr-names li{display:flex;align-items:center;gap:8px}
.fr-names input{flex:1;min-width:0;min-height:46px;padding:0 14px;border:0;border-radius:12px;font:inherit;font-size:16px;color:inherit;
  background:color-mix(in srgb,currentColor 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent)}
.fr-names input:focus{outline:2px solid #19AAE3;outline-offset:1px}
.fr-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--p)}
.fr-x{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:20px;opacity:.6;cursor:pointer}
.fr-acts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:6px}
.fr-btn{min-height:48px;padding:0 24px;border:0;border-radius:999px;font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  background:#141416;color:#fff;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.fr-dark .fr-btn,.fr-on-dark .fr-btn{background:#fff;color:#141416}
.fr-btn:active{transform:scale(.97)}
.fr-btn:focus-visible,.fr-link:focus-visible{outline:2px solid #19AAE3;outline-offset:3px}
.fr-link{padding:0;border:0;background:none;color:inherit;font:inherit;font-size:15px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;opacity:.85}
.fr-pass{padding:clamp(40px,8vw,90px) 0}
.fr-pass .fr-dot{width:18px;height:18px}
.fr-pass-t{margin:0;font-size:clamp(24px,3vw,34px);font-weight:600;letter-spacing:-.02em}
.fr-win{margin:0;font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-.025em}
.fr-standings{display:grid;gap:8px;width:100%;margin:6px 0 0;padding:0;list-style:none;text-align:left}
.fr-standings li{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:color-mix(in srgb,currentColor 7%,transparent)}
.fr-standings li.is-first{box-shadow:inset 0 0 0 2px currentColor}
.fr-rank{width:18px;font-weight:600;opacity:.6;font-variant-numeric:tabular-nums}
.fr-standings b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px}
.fr-de{font-size:13px;opacity:.65;font-variant-numeric:tabular-nums}
.fr-s{min-width:52px;text-align:right;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.fr-s small{font-size:13px;font-weight:500;opacity:.6}
.fr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fr p,.fr b{color:inherit!important}
/* characters (31 Oct 2026, FX; ColorMix first): the player's character where the dot was, on its own (FX: no round badge around it);
   on the setup each one is a button, a tap gives the next character nobody has */
.fr-av{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;vertical-align:middle}
.fr-av img{display:block;width:100%;height:100%;object-fit:contain}
.fr-avb{flex:none;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.fr-avb .fr-av{width:46px;height:46px}
.fr-avb:hover{transform:scale(1.06)}.fr-avb:active{transform:scale(.94)}
.fr-avb:focus-visible{outline:2px solid #19AAE3;outline-offset:3px}
.fr-hint{margin:-4px 0 0;font-size:13px;opacity:.6}
.fr-pass .fr-av{width:112px;height:112px}
.fr-standings .fr-av{width:32px;height:32px}
@media (prefers-reduced-motion:reduce){.fr-avb{transition:none}}
html[data-motion="paused"] .fr-avb{transition:none}
/* the characters move (31 Oct 2026, FX), in the site's agent language (agents.css): a tap gives the next character, which hops in from
   the floor, squash and stretch; nothing moves with reduced motion or the global pause */
.fr-avb .fr-av{transform-origin:50% 100%}
.fr-avb .fr-av.is-hop{animation:fr-hop .8s cubic-bezier(.33,.9,.4,1) both}
@keyframes fr-hop{0%{transform:none}14%{transform:scale(1.1,.88)}42%{transform:translateY(-24%) scale(.95,1.06)}70%{transform:translateY(0) scale(1.08,.92)}86%{transform:scale(.98,1.02)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.fr-avb .fr-av.is-hop{animation:none}}
html[data-motion="paused"] .fr-avb .fr-av.is-hop{animation:none}
/* every game with friends (31 Oct 2026, FX: "add it to the other games with multiplayer"): a tap makes any character hop; the winner,
   happy, hops twice above the standings; a happy or a surprised hop for a game's own moments (is-win, is-oops); the setup's note */
.fr-av{transform-origin:50% 100%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fr-av.is-hop{animation:fr-hop .8s cubic-bezier(.33,.9,.4,1) both}
.fr-av.is-win{animation:fr-win 1.15s cubic-bezier(.33,.9,.4,1) .15s both}
.fr-av.is-oops{animation:fr-oops .9s cubic-bezier(.33,.9,.4,1) .1s both}
.fr-crown{margin:0 0 -6px;text-align:center}
.fr-crown .fr-av{width:96px;height:96px}
.fr-crown .fr-av.is-win{animation-delay:.45s;animation-iteration-count:2}
.fr-note{margin:0;font-size:13px;line-height:1.5;opacity:.6;max-width:32em}
@keyframes fr-win{0%{transform:none}10%{transform:scale(1.12,.86)}30%{transform:translateY(-26%) scale(.92,1.1) rotate(-6deg)}50%{transform:translateY(0) scale(1.1,.9)}
  64%{transform:translateY(-14%) scale(.96,1.05) rotate(5deg)}80%{transform:translateY(0) scale(1.05,.95)}90%{transform:scale(.99,1.01)}100%{transform:none}}
@keyframes fr-oops{0%{transform:none}12%{transform:scale(1.06,.94)}24%{transform:translateX(-7%) rotate(-7deg)}36%{transform:translateX(6%) rotate(6deg)}
  48%{transform:translateX(-4%) rotate(-4deg)}60%{transform:translateX(2%) rotate(2deg) scale(1.04,.92)}78%{transform:scale(1.08,.88)}100%{transform:none}}
@media (max-width:560px){.fr-crown .fr-av{width:80px;height:80px}}
@media (prefers-reduced-motion:reduce){.fr-av.is-hop,.fr-av.is-win,.fr-av.is-oops{animation:none}}
html[data-motion="paused"] .fr-av.is-hop,html[data-motion="paused"] .fr-av.is-win,html[data-motion="paused"] .fr-av.is-oops{animation:none}
.fr-msg{margin:0;min-height:0;font-size:14px;font-weight:600}.fr-msg:empty{display:none}   /* a name to change (31 Oct 2026) */