.play-with-coach {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(186px, 222px);
  align-items: start;
  gap: clamp(.8rem, 2vw, 1.55rem);
}
.play-main { min-width: 0; }
.star-coach {
  position: relative;
  display: grid;
  gap: .25rem;
  min-width: 0;
  margin-top: 4.1rem;
  padding: .65rem .82rem .9rem;
  border: 1px solid #aa8cda84;
  border-radius: 1.45rem;
  background: radial-gradient(ellipse at 50% 10%, #60408b88, transparent 61%), #291b4b;
  box-shadow: 0 .45rem 1.35rem #160a3485;
  text-align: center;
  isolation: isolate;
}
.coach-portrait {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.28;
  max-width: 166px;
  width: 100%;
  margin: -.25rem auto 0;
}
.coach-halo {
  position: absolute;
  inset: 12% 13%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe69354, #ad86e64a 45%, transparent 70%);
}
.coach-portrait img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(95%, 147px);
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 .5rem .7rem #170a3670);
  animation: coach-float 4.8s ease-in-out infinite;
  transform-origin: 50% 78%;
}
.coach-copy { min-width: 0; }
.coach-bubble {
  position: relative;
  min-height: 2.7em;
  margin: .25rem 0 .6rem;
  padding: .58rem .68rem;
  border-radius: .95rem;
  background: #f9edff;
  color: #2e1c50;
  font-size: clamp(.88rem, 1.24vw, 1.13rem);
  font-weight: 800;
  line-height: 1.33;
  overflow-wrap: anywhere;
}
.coach-bubble::before {
  content: "";
  position: absolute;
  left: calc(50% - .37rem);
  top: -.33rem;
  width: .74rem;
  aspect-ratio: 1;
  transform: rotate(45deg);
  background: inherit;
}
.coach-hint {
  min-height: 44px;
  padding: .5rem .68rem;
  border-radius: 999px;
  background: #cdb5fc;
  color: #281741;
  font-size: .88rem;
  line-height: 1.1;
}
.coach-hint:disabled { opacity: .52; }
.coach-sparks { position: absolute; inset: 9%; pointer-events: none; }
.coach-sparks i {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  color: #ffe58e;
  font: 900 1.25rem / 1 system-ui, sans-serif;
  --spark-x: -270%;
  --spark-y: -180%;
}
.coach-sparks i:nth-child(2) { --spark-x: 170%; --spark-y: -205%; }
.coach-sparks i:nth-child(3) { --spark-x: 200%; --spark-y: 90%; }
.coach-sparks i:nth-child(4) { --spark-x: -265%; --spark-y: 85%; }
.star-coach[data-speaking="true"] .coach-portrait img { animation: coach-talk 1.05s ease-in-out infinite; }
.star-coach[data-mood="hint"] .coach-bubble { background: #fff0ad; }
.star-coach[data-mood="hint"] .coach-portrait img { animation: coach-lean 1.25s ease both; }
.star-coach[data-mood="encourage"] .coach-bubble { background: #eadbff; }
.star-coach[data-mood="encourage"] .coach-portrait img { animation: coach-nod .66s ease both; }
.star-coach[data-mood="reward"] .coach-bubble { background: #fce18f; }
.star-coach[data-mood="reward"] .coach-portrait img { animation: coach-hop .82s cubic-bezier(.28,.73,.32,1) both; }
.star-coach[data-mood="reward"] .coach-sparks i { animation: coach-spark 1.55s ease-out both; }
.win-medal img[src$="etoile-compagne.png"] { mix-blend-mode: normal; }
@keyframes coach-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-.31rem) rotate(2deg); }
}
@keyframes coach-talk {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  30% { transform: translateY(-.22rem) scale(1.025) rotate(2.4deg); }
  63% { transform: translateY(-.08rem) rotate(-.5deg); }
}
@keyframes coach-lean {
  0%, 100% { transform: rotate(0); }
  34%, 72% { transform: rotate(-7deg) translateX(-.2rem); }
}
@keyframes coach-nod {
  0%, 100% { transform: none; }
  38%, 73% { transform: scale(.99,.94) translateY(.16rem); }
}
@keyframes coach-hop {
  0%, 100% { transform: none; }
  27% { transform: translateY(-1.08rem) scale(1.08) rotate(-7deg); }
  65% { transform: translateY(-.24rem) rotate(5deg); }
}
@keyframes coach-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.3); }
  25%, 58% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(1.1); }
}
@media (max-width: 1149px) {
  .play-with-coach { grid-template-columns: minmax(0, 1fr); gap: .58rem; }
  .star-coach {
    grid-row: 1;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: .42rem;
    margin-top: 0;
    padding: .25rem .48rem;
    border-radius: .92rem;
    text-align: start;
  }
  .coach-portrait { width: 100%; max-height: 63px; margin: 0; }
  .coach-portrait img { width: 100%; }
  .coach-copy { display: flex; gap: .42rem; align-items: center; }
  .coach-bubble { flex: 1; min-height: 0; margin: 0; padding: .42rem .52rem; }
  .coach-bubble::before { top: calc(50% - .37rem); left: -.32rem; }
  .coach-hint { flex: none; font-size: .8rem; }
  .coach-sparks i { font-size: .7rem; }
}
@media (max-width: 425px) {
  .star-coach { grid-template-columns: 51px minmax(0, 1fr); }
  .coach-hint { padding-inline: .38rem; max-width: 4.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .star-coach .coach-portrait img, .star-coach .coach-sparks i { animation: none !important; }
}