/* The Goode Menu: the console's home screen (js/host/menu/). Everything here
   is sized from the game's picture (--sw), so it fills any TV the same. */

#s-home {
  font-size: calc(var(--sw) * 0.0118);
  background-color: #f4f5f7;
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0 2px, rgba(218, 223, 229, 0.42) 2px 3px, transparent 3px 5px);
  overflow: hidden;
}

/* (the "joined" toasts: just above the bar, clear of the channels) */
body[data-screen='s-home'] .toasts {
  top: auto;
  bottom: 27%;
  flex-direction: column-reverse;
}

/* --- The channels ----------------------------------------------------------- */

.gm-grid {
  position: absolute;
  left: calc(var(--sw) * 0.046);
  top: calc(var(--sh) * 0.058);
  display: grid;
  grid-template-columns: repeat(4, calc(var(--sw) * 0.215));
  grid-auto-rows: calc(var(--sw) * 0.215 / 1.95);
  column-gap: calc(var(--sw) * 0.016);
  row-gap: calc(var(--sh) * 0.027);
}

/* a tile: its picture is 20em across */
.gm-tile {
  position: relative;
  font-size: calc(var(--sw) * 0.215 / 20);
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 1.9em;
  border: 0.17em solid #c7ccd2;
  background: linear-gradient(180deg, #f1f3f5 0%, #e8ebee 48%, #e1e4e8 100%);
  box-shadow: inset 0 0.12em 0 rgba(255, 255, 255, 0.95), 0 0.12em 0.25em rgba(60, 75, 95, 0.12);
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s, box-shadow 0.16s;
}
.wbtn.gm-tile.focused {
  transform: scale(1.045);
  z-index: 2;
  border-color: #3db9ee;
  box-shadow: 0 0 0 0.22em rgba(61, 185, 238, 0.45), 0 0.5em 1.3em rgba(30, 110, 160, 0.28);
}
.wbtn.gm-tile.pressed {
  transform: scale(1.0);
}
.gm-tile.empty {
  box-shadow: inset 0 0.12em 0 rgba(255, 255, 255, 0.9);
}
.ch-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ch-empty span {
  font-size: 3.4em;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  color: #d9dde1;
  text-shadow: 0 0.03em 0 #fff, 0 -0.02em 0 rgba(150, 160, 170, 0.35);
}

/* --- Channel pictures (tiles and previews alike: 20em by 10.26em) ---------------- */
/* (lettering is placed in %: an em on lettering that's been made bigger is a
   bigger em) */

.ch-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  text-align: left;
  pointer-events: none;
}
.ch-art img {
  display: block;
}
.ch-art img:not([src]) {
  visibility: hidden;
}
.ch-only-big {
  display: none;
}
.ch-art.big .ch-only-big {
  display: block;
  opacity: 0;
  transition: opacity 0.45s 0.2s;
}
.gm-preview.shown .ch-art.big .ch-only-big {
  opacity: 1;
}

/* Goode Sports */
.ch-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #4dbcee 0%, #8fd6f5 45%, #d7f1fb 78%, #eaf8fd 100%);
}
.ch-sun {
  position: absolute;
  right: 1.2em;
  top: -2.2em;
  width: 6em;
  height: 6em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 22%, rgba(255, 255, 255, 0.35) 45%, transparent 70%);
}
.ch-field {
  position: absolute;
  left: -4em;
  right: -4em;
  bottom: -5.6em;
  height: 9em;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #95da64 0%, #6cc04a 45%, #4b9f34 100%);
  box-shadow: 0 -0.12em 0 rgba(255, 255, 255, 0.6);
}
.ch-sports-logo {
  position: absolute;
  left: 0;
  right: 0;
  top: 9%;
  text-align: center;
  font-size: 2.55em;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 0.06em #1f78b8;
  paint-order: stroke fill;
  text-shadow: 0 0.07em 0 #1f78b8, 0 0.14em 0.25em rgba(0, 50, 90, 0.3);
}
.ch-sports-logo b {
  color: #ffd21f;
  -webkit-text-stroke-color: #d9771a;
  text-shadow: 0 0.07em 0 #c4620f, 0 0.14em 0.25em rgba(80, 40, 0, 0.3);
}
.ch-sports-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.9em;
  display: flex;
  justify-content: center;
  gap: 0.55em;
}
.ch-sport {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.95em;
  animation: ch-bob 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.52s);
}
.ch-sport svg {
  width: 2.95em;
  height: 2.95em;
  filter: drop-shadow(0 0.12em 0.12em rgba(0, 40, 0, 0.28));
}
.ch-sport span {
  display: none;
}
.ch-art.big .ch-sport span {
  display: block;
  margin-top: -0.1em;
  font-size: 0.42em;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 0.12em #2d7a1e;
  paint-order: stroke fill;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.45s 0.2s;
}
.gm-preview.shown .ch-art.big .ch-sport span {
  opacity: 1;
}
@keyframes ch-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.28em);
  }
}
.ch-sports-crowd {
  position: absolute;
  left: 0;
  right: 0;
  top: 4.05em;
  justify-content: center;
  gap: 0.35em;
}
.ch-art.big .ch-sports-crowd {
  display: flex;
}
.ch-sports-crowd img {
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff, #e3f1fa);
  border: 0.07em solid #fff;
  box-shadow: 0 0.06em 0.15em rgba(0, 50, 90, 0.3);
  animation: ch-hop 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.23s);
}
@keyframes ch-hop {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-0.22em);
  }
}

/* the Goode Guy Maker: a crowd of faces */
.ch-maker {
  background: linear-gradient(180deg, #ffffff 0%, #eef8fd 55%, #d9effa 100%);
}
.ch-crowd {
  position: absolute;
  inset: 0;
}
.ch-crowd-row {
  position: absolute;
  left: 0;
  right: 0;
  overflow: visible;
}
/* (rows further forward are bigger, each one in front of the last, like a
   crowd; each face fades out at the shoulders) */
.ch-crowd-row:nth-child(1) {
  top: 1.05em;
  --s: 2.35em;
}
.ch-crowd-row:nth-child(2) {
  top: 2.75em;
  --s: 2.85em;
}
.ch-crowd-row:nth-child(3) {
  top: 4.75em;
  --s: 3.45em;
}
.ch-crowd-row:nth-child(4) {
  top: 7.1em;
  --s: 4.2em;
}
.ch-crowd-strip {
  display: flex;
  width: max-content;
  animation: ch-drift 46s linear infinite;
}
.ch-crowd-row:nth-child(2) .ch-crowd-strip {
  animation-direction: reverse;
  animation-duration: 40s;
  margin-left: -1.2em;
}
.ch-crowd-row:nth-child(3) .ch-crowd-strip {
  animation-duration: 34s;
  margin-left: -0.6em;
}
.ch-crowd-row:nth-child(4) .ch-crowd-strip {
  animation-direction: reverse;
  animation-duration: 30s;
  margin-left: -2em;
}
.ch-crowd-strip img {
  width: var(--s);
  height: var(--s);
  margin-right: calc(var(--s) * -0.16);
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 0 66%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 0 66%, transparent 90%);
}
@keyframes ch-drift {
  to {
    transform: translateX(-50%);
  }
}
/* the name on a frosted band across the top */
.ch-maker-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 0.22em 0 0.3em;
  text-align: center;
  font-size: 1.55em;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: #ffffff;
  -webkit-text-stroke: 0.09em #2a95c6;
  paint-order: stroke fill;
  text-shadow: 0 0.05em 0 #2a95c6;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 70%, rgba(255, 255, 255, 0) 100%);
}
.ch-maker-title b {
  color: #bdeafb;
}
.ch-art.big .ch-maker-title {
  font-size: 1.75em;
  padding: 0.18em 0 0.32em;
}

/* Everybody Votes: two sides and a ballot box */
.ch-votes-a,
.ch-votes-b {
  position: absolute;
  inset: 0;
}
.ch-votes-a {
  background: linear-gradient(160deg, #6cc3f4 0%, #2b8fdc 100%);
  clip-path: polygon(0 0, 56% 0, 44% 100%, 0 100%);
}
.ch-votes-b {
  background: linear-gradient(200deg, #ffc163 0%, #f0821e 100%);
  clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%);
}
.ch-votes-box {
  position: absolute;
  left: 50%;
  bottom: 0.7em;
  width: 3.9em;
  height: 3.9em;
  margin-left: -1.95em;
  animation: ch-box 3s ease-in-out infinite;
}
.ch-votes-box svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0.12em 0.16em rgba(0, 30, 60, 0.35));
}
@keyframes ch-box {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg) translateY(-0.12em);
  }
}
.ch-votes-side {
  position: absolute;
  bottom: 0.55em;
  display: flex;
}
.ch-votes-side.left {
  left: 0.7em;
}
.ch-votes-side.right {
  right: 0.7em;
}
.ch-votes-side img {
  width: 2.1em;
  height: 2.1em;
  margin: 0 -0.15em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 0.08em solid #fff;
  box-shadow: 0 0.06em 0.16em rgba(0, 30, 60, 0.3);
}
.ch-votes-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 5.5%;
  text-align: center;
  font-size: 1.85em;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 0.08em #3a4a5c;
  paint-order: stroke fill;
  text-shadow: 0 0.06em 0 #3a4a5c, 0 0.12em 0.25em rgba(0, 0, 0, 0.25);
}
.ch-votes-q.ch-only-big {
  position: absolute;
  left: 3.4em;
  right: 3.4em;
  top: 2.75em;
  padding: 0.35em 0.5em 0.4em;
  border-radius: 0.6em;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0.08em 0.25em rgba(0, 30, 60, 0.25);
  text-align: center;
}
.ch-votes-qtext {
  font-size: 0.5em;
  font-weight: 900;
  color: #3b4049;
}
.ch-votes-answers {
  display: flex;
  justify-content: center;
  gap: 0.4em;
  margin-top: 0.25em;
}
.ch-votes-answers span {
  font-size: 0.4em;
  font-weight: 900;
  color: #fff;
  padding: 0.2em 0.9em;
  border-radius: 999px;
}
.ch-votes-answers .a {
  background: #2b8fdc;
}
.ch-votes-answers .b {
  background: #f0821e;
}

/* --- Along the bottom ---------------------------------------------------------- */

.gm-bar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.gm-bar-edge {
  stroke: #46bce9;
  stroke-width: 3.4;
}
.gm-bar-shade {
  stroke: rgba(120, 135, 150, 0.16);
  stroke-width: 7;
}

/* the clock, in the dip, and the date under it */
.gm-clock {
  position: absolute;
  left: 50%;
  top: 74.9%;
  height: 7.3%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 0.35em;
}
.gm-time {
  display: flex;
  align-items: flex-end;
  height: 100%;
  gap: 0.4em;
}
.gm-digits {
  height: 100%;
  width: auto;
  fill: #8b9096;
  filter: drop-shadow(0 0.08em 0 rgba(255, 255, 255, 0.95));
}
.gm-ampm {
  margin-bottom: 0.15em;
  font-size: 1.15em;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #8b9096;
}
.gm-date {
  position: absolute;
  left: 50%;
  top: 86.6%;
  transform: translateX(-50%);
  font-size: 2.05em;
  font-weight: 800;
  color: #6b7178;
  text-shadow: 0 0.05em 0 rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* who's joined: faces, names under them, and empty spots for the rest */
.gm-players {
  position: absolute;
  left: 1.2%;
  top: 75.4%;
  width: 29.4%;
  display: flex;
  justify-content: space-between;
}
.gm-player {
  width: 24%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.3s;
}
.gm-socket {
  width: calc(var(--sw) * 0.0585);
  height: calc(var(--sw) * 0.0585);
  padding: calc(var(--sw) * 0.003);
  border-radius: 50%;
  background: linear-gradient(180deg, #c3c8ce, #d5d9de);
  box-shadow: inset 0 0.18em 0.35em rgba(40, 50, 65, 0.22), 0 0.1em 0 rgba(255, 255, 255, 0.9);
}
.gm-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.24em solid var(--pc);
  background: radial-gradient(circle at 45% 32%, #ffffff, #e5f2fa 70%, #d3e6f2);
  box-shadow: 0 0.15em 0.35em rgba(30, 45, 65, 0.25), inset 0 0.1em 0 rgba(255, 255, 255, 0.8);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.gm-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12) translateY(4%);
}
.gm-face img:not([src]) {
  visibility: hidden;
}
/* the player's number: a pill in their colour, under their face */
.gm-pnum {
  margin-top: -0.3em;
  position: relative;
  padding: 0.04em 0.6em;
  border-radius: 999px;
  border: 0.12em solid #fff;
  background: var(--pc);
  color: #fff;
  font-size: 0.78em;
  font-weight: 900;
  line-height: 1.2;
  box-shadow: 0 0.08em 0.18em rgba(0, 0, 0, 0.25);
}
/* (an empty spot: the number faint in the middle of its circle) */
.gm-free {
  display: none;
}
.gm-name {
  margin-top: 0.12em;
  max-width: 112%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.12em;
  font-weight: 900;
  color: #4f565f;
  text-shadow: 0 0.05em 0 rgba(255, 255, 255, 0.8);
  min-height: 1.3em;
}
.gm-sub {
  font-size: 0.78em;
  font-weight: 800;
  color: #8a9199;
  min-height: 1.2em;
  white-space: nowrap;
}
.gm-player.empty .gm-face {
  border: 0.17em dashed #b3bac2;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: none;
}
.gm-player.empty .gm-pnum {
  visibility: hidden;
}
.gm-player.empty .gm-free {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b3bac2;
  font-size: 1.55em;
  font-weight: 900;
}
.gm-player.empty .gm-name {
  visibility: hidden;
}
.gm-player.choosing .gm-face::before {
  content: '?';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6em;
  font-weight: 900;
  color: #b9c3cc;
  animation: pulse 1.6s ease-in-out infinite;
}
.gm-player.offline {
  opacity: 0.5;
}
.gm-player.here .gm-face {
  animation: gm-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes gm-pop {
  from {
    transform: scale(0.4);
  }
}

/* the code to join, where the Wii has its message board */
.wbtn.gm-join {
  position: absolute;
  right: 1.2%;
  top: 75.2%;
  height: 20.6%;
  width: 36%;
  padding: 0;
  border: none;
  border-radius: 1.2em;
  background: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9em;
  font-size: 1em;
  text-align: right;
}
.gm-join-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.12em;
  color: #59606a;
}
.gm-join-head {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: 1.32em;
  font-weight: 900;
  color: #4a5058;
}
#gm-join-icon svg {
  width: 1.25em;
  height: 1.25em;
  display: block;
}
.gm-join-how {
  font-size: 0.86em;
  font-weight: 800;
  color: #7a818a;
}
.gm-join-url {
  font-size: 0.82em;
  font-weight: 800;
  color: var(--blue-deep);
}
.gm-join-room {
  margin-top: 0.15em;
  font-size: 0.86em;
  font-weight: 800;
  color: #7a818a;
}
.gm-join-room b {
  font-size: 1.75em;
  font-weight: 900;
  color: #3b4049;
  letter-spacing: 0.14em;
  vertical-align: -0.08em;
}
.gm-join-qr {
  position: relative;
  height: 100%;
  aspect-ratio: 1;
  padding: 0.35em;
  border-radius: 1.1em;
  background: linear-gradient(180deg, #c3c8ce, #d5d9de);
  box-shadow: inset 0 0.18em 0.35em rgba(40, 50, 65, 0.22), 0 0.1em 0 rgba(255, 255, 255, 0.9);
}
.gm-join-qr img {
  width: 100%;
  height: 100%;
  padding: 0.35em;
  border-radius: 0.8em;
  border: 0.22em solid #46bce9;
  background: #fff;
  image-rendering: pixelated;
  box-shadow: 0 0.15em 0.35em rgba(30, 45, 65, 0.22);
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.wbtn.gm-join.focused {
  transform: none;
  box-shadow: none;
  border: none;
}
.wbtn.gm-join.focused .gm-join-qr img {
  transform: scale(1.05);
  border-color: #1ea7e3;
  box-shadow: 0 0 0 0.22em rgba(61, 185, 238, 0.45), 0 0.4em 1em rgba(30, 110, 160, 0.3);
}
.wbtn.gm-join.focused .gm-join-head {
  color: #1d8fc7;
}

/* --- A channel's preview ----------------------------------------------------------- */

.gm-preview {
  position: absolute;
  inset: 0;
  z-index: 5;
}
.gm-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #f4f5f7;
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0 2px, rgba(218, 223, 229, 0.42) 2px 3px, transparent 3px 5px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.gm-preview.shown::before {
  opacity: 1;
}
.gm-banner {
  position: absolute;
  left: 10%;
  top: 4.2%;
  width: 80%;
  height: calc(var(--sw) * 0.8 / 1.95);
  font-size: calc(var(--sw) * 0.8 / 20);
  border-radius: 1.4em;
  background: #fff;
  box-shadow: 0 0 0 0.1em #fff, 0 0 0 0.13em #c9ced4, 0 0.2em 0.6em rgba(40, 60, 90, 0.22);
  transform-origin: 0 0;
  transition: transform 0.46s cubic-bezier(0.22, 0.75, 0.25, 1);
  overflow: hidden;
  will-change: transform;
}
.gm-banner-art {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
.gm-banner.slide-left .ch-art {
  animation: gm-in-left 0.38s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.gm-banner.slide-right .ch-art {
  animation: gm-in-right 0.38s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes gm-in-left {
  from {
    transform: translateX(30%);
    opacity: 0;
  }
}
@keyframes gm-in-right {
  from {
    transform: translateX(-30%);
    opacity: 0;
  }
}
.gm-banner.starting {
  animation: gm-start 0.6s ease-out;
}
@keyframes gm-start {
  30% {
    filter: brightness(1.25);
  }
}
.gm-badge {
  position: absolute;
  right: 0.45em;
  top: 0.4em;
  padding: 0.05em 0.5em 0.1em;
  border-radius: 999px;
  border: 0.035em solid #3b4049;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.42em;
  font-weight: 900;
  font-style: italic;
  color: #3b4049;
  opacity: 0;
  transition: opacity 0.4s 0.2s;
}
.gm-preview.shown .gm-badge {
  opacity: 1;
}
.wbtn.gm-arrow {
  position: absolute;
  top: 33%;
  width: 4.2%;
  height: 12%;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.3s 0.15s, transform 0.15s;
}
.wbtn.gm-arrow.left {
  left: 2.6%;
}
.wbtn.gm-arrow.right {
  right: 2.6%;
}
.gm-arrow svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0.12em 0.2em rgba(20, 90, 140, 0.3));
}
.gm-preview.shown .wbtn.gm-arrow {
  opacity: 1;
}
.wbtn.gm-arrow.focused {
  transform: scale(1.18);
  border: none;
  box-shadow: none;
}
.gm-pv-buttons {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 82%;
  height: 12.4%;
  display: flex;
  gap: 8%;
  opacity: 0;
  transform: translateY(25%);
  transition: opacity 0.3s 0.12s, transform 0.35s 0.12s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.gm-preview.shown .gm-pv-buttons {
  opacity: 1;
  transform: none;
}
.wbtn.gm-pv-btn {
  flex: 1;
  padding: 0;
  border-radius: 999px;
  border: 0.14em solid #61c6ee;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 42%, #eef3f7 55%, #dfe7ee 100%);
  box-shadow: 0 0.18em 0 rgba(120, 150, 175, 0.45), 0 0.5em 1.2em rgba(40, 60, 90, 0.16);
  font-size: 2.3em;
  font-weight: 800;
  color: #4e555e;
}
.wbtn.gm-pv-btn.focused {
  transform: scale(1.04);
  border-color: #1ea7e3;
  color: #1d7fb4;
  box-shadow: 0 0 0 0.16em rgba(61, 185, 238, 0.4), 0 0.18em 0 rgba(120, 150, 175, 0.45), 0 0.6em 1.4em rgba(30, 110, 160, 0.3);
}
.gm-preview.zooming .gm-pv-buttons,
.gm-preview.zooming .wbtn.gm-arrow {
  pointer-events: none;
}

/* --- Joining, big ---------------------------------------------------------------------- */

.gm-joinview {
  position: absolute;
  inset: 0;
  z-index: 6;
  background-color: #f4f5f7;
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0 2px, rgba(218, 223, 229, 0.42) 2px 3px, transparent 3px 5px);
  animation: screen-in 0.3s ease-out;
}
.gm-jv-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 4.5%;
  margin: 0;
  text-align: center;
  font-size: 2.7em;
  font-weight: 900;
  color: #4f565f;
}
.gm-jv-card {
  position: absolute;
  left: 5.5%;
  top: 15%;
  width: 34%;
  height: 66%;
  padding: 1.1em 1em 1em;
  border-radius: 1.6em;
  background: #fff;
  border: 0.2em solid #46bce9;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.gm-jv-qr {
  flex: 1;
  min-height: 0;
  aspect-ratio: 1;
  image-rendering: pixelated;
}
.gm-jv-url {
  margin-top: 0.4em;
  font-size: 1.2em;
  font-weight: 900;
  color: var(--blue-deep);
  word-break: break-all;
  text-align: center;
}
.gm-jv-code-row {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-weight: 800;
  color: var(--muted);
}
.gm-jv-code {
  font-size: 2.6em;
  font-weight: 900;
  color: #3b4049;
  letter-spacing: 0.16em;
}
.gm-jv-side {
  position: absolute;
  left: 44%;
  right: 5%;
  top: 16%;
  bottom: 18%;
  display: flex;
  flex-direction: column;
}
.gm-jv-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 1.3em;
}
.gm-jv-steps li {
  position: relative;
  padding-left: 3.6em;
  min-height: 2.8em;
  counter-increment: step;
}
.gm-jv-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: linear-gradient(180deg, #6dd0f7, #1ea2df);
  color: #fff;
  font-size: 1.15em;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.15em 0.3em rgba(20, 100, 150, 0.3);
}
.gm-jv-steps b {
  display: block;
  font-size: 1.55em;
  font-weight: 900;
  color: #3f454d;
}
.gm-jv-steps span {
  display: block;
  margin-top: 0.2em;
  font-size: 1.08em;
  font-weight: 700;
  color: #737a83;
  line-height: 1.4;
}
.gm-jv-steps i {
  font-style: normal;
  font-weight: 900;
  color: var(--blue-deep);
}
.gm-jv-note {
  margin: 1.4em 0 0;
  padding: 0.7em 1em;
  border-radius: 1em;
  background: #fff7d6;
  border: 0.14em solid #f0c419;
  font-size: 0.95em;
  font-weight: 700;
  color: #6b5a1c;
  line-height: 1.4;
}
.gm-jv-note[hidden] {
  display: none;
}
.gm-jv-who {
  margin-top: auto;
  margin-bottom: 0.5em;
  font-size: 0.85em;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.gm-jv-players {
  display: flex;
  gap: 1.4em;
}
.gm-jv-player {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 900;
  color: #4f565f;
}
.gm-jv-player img {
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  border: 0.16em solid var(--pc);
  background: radial-gradient(circle at 45% 35%, #fff, #e5f2fa);
}
.gm-jv-player img:not([src]) {
  background: #eef1f4;
}
.gm-jv-player.empty {
  color: #b0b7bf;
}
.gm-jv-player.empty img {
  border-style: dashed;
  border-color: #c3c9d0;
}
.gm-jv-buttons {
  position: absolute;
  left: 5.5%;
  right: 5%;
  bottom: 5%;
  display: flex;
  justify-content: space-between;
}

/* Find Goode Guy: a crowd, and a magnifying glass going over it */
.ch-find {
  background: repeating-radial-gradient(circle at 50% -40%, #e6f2fb 0 0.5em, #d6e9f6 0.5em 1em), #e6f2fb;
}
.ch-find-crowd {
  position: absolute;
  left: 0.6em;
  right: 0.6em;
  top: 0.4em;
  bottom: 2.3em;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  place-items: center;
}
.ch-find-crowd img {
  width: 2.5em;
  height: 2.5em;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 0 70%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 0 70%, transparent 95%);
}
.ch-find-lens {
  position: absolute;
  left: 55%;
  top: 6%;
  width: 5.4em;
  height: 5.4em;
  animation: ch-search 9s ease-in-out infinite;
}
.ch-find-lens svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0.1em 0.15em rgba(20, 60, 90, 0.35));
}
.ch-find-big {
  position: absolute;
  left: 9%;
  top: 9%;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  object-fit: cover;
  background: radial-gradient(circle at 50% 40%, #ffffff, #e9f6fd);
}
@keyframes ch-search {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-6.5em, 1.2em);
  }
  50% {
    transform: translate(-3.5em, -0.4em);
  }
  75% {
    transform: translate(1.2em, 1.4em);
  }
}
.ch-find-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.3em 0 0.4em;
  text-align: center;
  font-size: 1.5em;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 0.09em #2a6f99;
  paint-order: stroke fill;
  text-shadow: 0 0.05em 0 #2a6f99;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.75) 70%, rgba(255, 255, 255, 0) 100%);
}
.ch-find-title b {
  color: #ffd76a;
}