.play-invite {
  display: flex;
  gap: 14px;
  align-items: center;
  width: 100%;
  max-width: 930px;
  margin: 14px auto 0;
  border: 2px solid #98bbaf;
  border-radius: 19px;
  background: #e2f1e9;
  box-shadow: 0 3px 0 #b5c7b7;
  padding: 10px 18px;
  color: #194b46;
  font:
    900 1.18rem/1.1 Nunito,
    sans-serif;
  text-align: left;
  cursor: pointer;
}
.play-invite img {
  width: 74px;
  height: 33px;
  object-fit: contain;
}
.play-invite .ico {
  margin-left: auto;
}
.finish-short {
  margin: 14px auto;
  display: flex;
}
.toy-game {
  max-width: 1030px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  background: #fffaf0;
  border-radius: 26px;
  border: 2px solid #dbd4bb;
  overflow: hidden;
  box-shadow: 0 6px 0 #e3dcc6;
}
.toy-stage,
.toy-picture,
.pass-curtain {
  position: relative;
}
.toy-stage {
  align-self: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: #c3decf;
}
.toy-picture {
  container-type: inline-size;
}
.pip-patient {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  display: block;
  pointer-events: none;
}
.tooth-zone {
  width: max(44px, 11%);
  height: max(44px, 17%);
  border: 0;
  background: transparent;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: pointer;
  color: #135966;
}
.tooth-zone:focus-visible {
  outline: 3px dashed #005e6d;
  border-radius: 40%;
  background: #ffffff4d;
}
.tooth-bubbles {
  position: relative;
  width: 4.6cqw;
  height: 3.8cqw;
  filter: drop-shadow(0 1px 1px #14495880);
  display: block;
  pointer-events: none;
}
.tooth-bubbles i {
  position: absolute;
  width: 65%;
  height: 78%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 28% 20%,
    #fff 3%,
    #c6f7fa 24%,
    #7cbcc3 72%,
    #6398a4
  );
  border: 1px solid #478895;
  left: 0;
  bottom: 0;
}
.tooth-bubbles i:nth-child(2) {
  width: 49%;
  height: 60%;
  left: 51%;
  bottom: 5%;
}
.tooth-bubbles i:nth-child(3) {
  width: 45%;
  height: 55%;
  left: 33%;
  bottom: 52%;
}
.tooth-bubbles.n-2 i:nth-child(3),
.tooth-bubbles.n-1 i:nth-child(n + 2) {
  display: none;
}
.clean-spark,
.secret-star,
.mirror-glint,
.empty-glint {
  font:
    900 clamp(16px, 4cqw, 34px) / 1 Nunito,
    sans-serif;
  pointer-events: none;
  color: #fffad9;
  text-shadow:
    0 0 3px #b26b1a,
    0 1px 2px #805000;
}
.secret-star {
  color: #ffd459;
  font-size: clamp(26px, 6cqw, 48px);
  filter: drop-shadow(0 2px 1px #83452a);
}
.empty-glint {
  color: #22675f;
  text-shadow: 0 0 2px white;
}
.mirror-glint {
  color: #fcf7e3;
  text-shadow: 0 0 3px #396b79;
}
.hand-tool {
  width: 32%;
  position: absolute;
  left: 66%;
  top: 86%;
  pointer-events: none;
  transform: translate(-12%, -27%) rotate(-7deg);
  transform-origin: 12% 27%;
}
.hand-tool.moving {
  transform: translate(-12%, -27%);
}
.toy-brush {
  width: 100%;
  display: block;
}
.toy-mirror {
  display: block;
  position: relative;
  width: 80%;
  height: 10px;
  background: linear-gradient(#c5ebe5, #457c7f);
  border-radius: 10px;
  transform: rotate(28deg);
  transform-origin: 10% 0;
}
.toy-mirror i {
  display: block;
  position: absolute;
  left: -9px;
  top: -15px;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  border: 4px solid #85b1ad;
  background: linear-gradient(135deg, #ecfafba8 25%, #e4faff4d 50%, #b5d9d3bf);
  box-shadow: 0 1px 2px #27402c80;
}
.toy-panel {
  padding: clamp(18px, 3vw, 38px);
  align-self: center;
}
.toy-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.toy-heading h1,
.wrap-up h1,
.parent-sheet h1 {
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -0.04em;
  margin: 0;
}
.toy-heading .sound-btn {
  font:
    900 1.3rem Nunito,
    sans-serif;
  flex: none;
  align-self: center;
}
.toy-cue {
  margin: 9px 0 16px;
  font-weight: 700;
  color: #425950;
}
.toy-actions,
.parent-actions,
.toy-alternatives > div {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.toy-actions:empty {
  display: none;
}
.toy-alternatives {
  margin: 10px 0;
}
.toy-alternatives summary {
  cursor: pointer;
  font-weight: 850;
  width: fit-content;
  padding: 6px 0;
}
.toy-alternatives button {
  background: #f5ead0;
  border: 1px solid #aa9874;
  border-radius: 11px;
  font:
    800 1rem Nunito,
    sans-serif;
  min-height: 44px;
  padding: 7px 14px;
  color: #193e41;
  cursor: pointer;
}
.tooth-score {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 16px;
}
.tooth-score i {
  width: 35px;
  height: 13px;
  border-radius: 8px;
  border: 1px solid #a5b3a4;
  background: linear-gradient(
    to right,
    #337a78 var(--washed),
    #e6e7d7 var(--washed)
  );
}
.toy-count {
  margin-left: 4px;
  color: #4f6154;
}
.toy-finish {
  margin-top: 8px;
}
.pass-curtain {
  display: grid;
  place-items: center;
  aspect-ratio: 3/2;
  background: repeating-linear-gradient(
    135deg,
    #32736d 0 16px,
    #367a76 16px 32px
  );
  overflow: hidden;
}
.pass-curtain > span {
  position: absolute;
  top: 13%;
  left: 23%;
  font-size: 2.2rem;
  color: #ffdc92;
}
.pass-curtain img {
  width: 34%;
  filter: drop-shadow(0 10px 7px #16382955);
}
.wrap-up,
.parent-sheet {
  margin: 22px auto;
  max-width: 720px;
  padding: clamp(20px, 5vw, 48px);
  background: #fffdf3;
  border: 2px solid #dbd5bf;
  border-radius: 24px;
  box-shadow: 0 5px 0 #e7e0c8;
}
.wrap-up > img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}
.parent-sheet h2 {
  margin: 25px 0 5px;
  font-size: 1.2rem;
}
.parent-sheet p,
.wrap-up p {
  max-width: 54ch;
  line-height: 1.5;
}
.parent-foot {
  margin-top: 23px;
}
.parent-actions {
  margin: 18px 0;
}
.parent-actions a {
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .toy-game {
    display: flex;
    flex-direction: column;
  }
  .toy-stage,
  .toy-panel,
  .pass-curtain {
    width: 100%;
  }
  .toy-panel {
    padding: 16px;
  }
  .toy-heading h1 {
    font-size: clamp(1.7rem, 7vw, 2.5rem);
  }
  .toy-cue {
    margin: 8px 0;
  }
  .play-invite {
    font-size: 1.03rem;
    margin-top: 10px;
    padding: 8px 12px;
  }
  .play-invite img {
    width: 60px;
  }
  .tooth-score {
    margin: 10px 0;
  }
  .parent-sheet,
  .wrap-up {
    margin: 12px 0;
  }
  .toy-alternatives {
    margin: 5px 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .clean-spark,
  .secret-star {
    animation: shine-in 0.4s ease-out;
  }
  .hand-tool:not(.moving) .toy-brush {
    animation: brush-hello 0.88s ease-in-out 2;
  }
  @keyframes shine-in {
    from {
      opacity: 0.4;
      transform: scale(0.55);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes brush-hello {
    50% {
      transform: translateX(-7px) rotate(-3deg);
    }
  }
}
.made-brush {
  position: relative;
  display: block;
  width: 100%;
}
.paint {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.paste-dab {
  position: absolute;
  top: 23%;
  width: 4.4%;
  height: 17%;
  transform: translate(-50%, -30%);
  border-radius: 65% 65% 35% 40%;
  background: radial-gradient(ellipse at 35% 26%, #ffffffe8, var(--paste) 58%);
  box-shadow: 0 1px 1px #355c614f;
}
.mix-stage {
  position: relative;
  align-self: stretch;
  touch-action: none;
  user-select: none;
  overflow: hidden;
  min-height: 240px;
  background: radial-gradient(ellipse at 50% 30%, #f9f8e7, #d2ebdd);
  border-bottom: 5px solid #bddbc9;
}
.mix-brush {
  position: absolute;
  width: 270%;
  left: 6%;
  top: 54%;
  transform: translateY(-50%);
  pointer-events: none;
}
.mix-brush .made-brush {
  width: 100%;
}
.paste-palette {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 13px 0 16px;
}
.paste-palette button {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 8px 11px;
  border: 2px solid #d9d4bf;
  border-radius: 12px;
  background: #fffdf4;
  font:
    800 0.91rem Nunito,
    sans-serif;
  color: #254b45;
  cursor: pointer;
}
.paste-palette button[aria-pressed="true"] {
  border-color: #27695f;
  box-shadow: 0 2px 0 #27695f;
  background: #edf5df;
}
.paste-palette i {
  display: block;
  width: 22px;
  height: 16px;
  background: radial-gradient(ellipse at 30% 18%, white 2%, var(--paste) 65%);
  border-radius: 70% 50% 35% 50%;
  box-shadow: 0 1px 2px #32665855;
}
@media (max-width: 720px) {
  .mix-stage {
    width: 100%;
    min-height: 0;
    aspect-ratio: 3/2;
  }
}
.role-scene {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 1.5;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 20%, #fcf1c7, #c1ddd4 78%);
  isolation: isolate;
}
.role-backdrop {
  position: absolute;
  inset: 8% 7% 14%;
  border: 3px solid #ffffff68;
  border-radius: 48% 48% 26px 26px;
  background: linear-gradient(135deg, #f8f4d57a, #b6d9dbaa);
  z-index: -1;
}
.role-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
  position: relative;
  padding: 5% 0 8%;
  min-width: 0;
}
.role-player img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: 85%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 4px 4px #2e5f4d26);
}
.role-player span {
  font:
    850 clamp(0.7rem, 2vw, 1rem) / 1.1 Nunito,
    sans-serif;
  padding: 5px 9px;
  background: #fffced;
  border-radius: 16px;
  color: #294740;
  max-width: 96%;
  text-align: center;
}
.role-scene.with-model .role-player {
  padding-bottom: 30%;
}
.role-scene.with-model .role-player img {
  height: 80%;
}
.role-scene.with-model .role-player span {
  font-size: clamp(0.65rem, 1.5vw, 0.88rem);
}
.model-stage {
  width: 100%;
}
.tooth-model {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8%;
  position: absolute;
  bottom: 2%;
  left: 7%;
  right: 7%;
  height: 29%;
  background: #d99082;
  border: 4px solid #f3baa4;
  border-radius: 36% 36% 20px 20px;
  box-shadow: 0 3px 1px #9b6858;
}
.tooth-model .model-tooth {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: 22%;
  height: 82%;
  min-height: 36px;
  min-width: 44px;
  background: linear-gradient(#fffdf3, #ece2be);
  border-radius: 40% 40% 45% 45%;
  box-shadow: 0 3px 0 #ac8270;
}
.model-stage .hand-tool {
  left: 70%;
  top: 70%;
}
.model-stage .role-scene {
  touch-action: none;
}
@media (prefers-reduced-motion: no-preference) {
  .role-scene.swapped .role-player img {
    animation: take-seat 0.32s ease-out;
  }
  @keyframes take-seat {
    from {
      transform: translateY(-7px);
      opacity: 0.6;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}
.likeness-review {
  max-width: 880px;
  margin: auto;
}
.likeness-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}
.likeness-images figure {
  min-width: 0;
  margin: 0;
  padding: 8px;
  border: 1px solid #d7d3bd;
  border-radius: 14px;
  text-align: center;
  background: #f3f0de;
}
.likeness-images img {
  width: 100%;
  height: clamp(130px, 30vw, 260px);
  object-fit: contain;
}
.likeness-images figcaption {
  font-weight: 800;
}
#role-demo {
  margin: 15px 0;
}
#role-demo summary {
  cursor: pointer;
  font-weight: 850;
  padding: 8px 0;
}
#review-toy .toy-game {
  margin: 8px 0;
}
.role-scene.with-model .role-player span {
  position: absolute;
  top: 4%;
  z-index: 1;
  box-shadow: 0 2px 2px #86978338;
}
.role-scene.with-model .role-player img {
  height: 87%;
}
.role-scene.with-model .role-player {
  padding-top: 12%;
  padding-bottom: 28%;
}