/* ============================================================================
 * Decision Coach — cartoony speech bubble from the player's own castle.
 *
 * Driven by a `coach|<tone>|<text>` WS message and showDecisionCoach() in
 * public/main.js. The bubble pops in, holds briefly, then floats up and fades.
 *
 * Structure:
 *   .decision-coach-layer        — stable full-bleed layer in .castle-container
 *     .coach-bubble              — positioned wrapper (left/top set inline by JS,
 *                                   anchored above the own castle). Holds the tail.
 *       .coach-bubble-inner      — the animated, styled bubble body
 * ============================================================================ */

.decision-coach-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 9998;
}

/* Positioned anchor point — JS sets left/top to the top-centre of the castle.
   translate(-50%, -100%) floats the bubble just above that point. */
.coach-bubble {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  will-change: transform, opacity;
  /* pop in, hold, then drift up + fade out */
  animation: coachFloat 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.coach-bubble-inner {
  position: relative;
  display: inline-block;
  /* Short lines stay on one line; longer lines wrap (to ~2) within max-width
     rather than overflowing. JS adds .coach-long for long text (see below). */
  white-space: normal;
  max-width: 200px;
  text-align: center;
  text-wrap: balance; /* split a 2-line message evenly when supported */
  padding: 10px 16px;
  border-radius: 18px;
  border: 3px solid #fff;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  /* a little comic squash-and-stretch on entry */
  animation: coachPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Longer messages: scale the text down a touch and give them room to break
   onto a second line. Added by showDecisionCoach() when the text is long. */
.coach-long .coach-bubble-inner {
  font-size: 0.82rem;
  max-width: 300px;
  padding: 8px 14px;
}
/* The win/combo tones use a larger base font — keep them legible but smaller. */
.coach-long.coach-bubble-win .coach-bubble-inner,
.coach-long.coach-bubble-combo .coach-bubble-inner {
  font-size: 0.92rem;
}

/* Speech-bubble tail pointing down toward the castle. */
.coach-bubble-inner::after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid #fff;
}

/* ---- Tones --------------------------------------------------------------- */

/* Strong play — cheerful green. */
.coach-bubble-bravo .coach-bubble-inner {
  background: linear-gradient(160deg, #3fbf6a, #2c9f55);
}

/* Game-winning play — celebratory gold. */
.coach-bubble-win .coach-bubble-inner {
  background: linear-gradient(160deg, #ffcf4d, #f5a623 60%, #e8890b);
  color: #3a2400;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
  font-size: 1.15rem;
}

/* Missed win — wistful amber. */
.coach-bubble-missed .coach-bubble-inner {
  background: linear-gradient(160deg, #e8893b, #cf6a1d);
}

/* Weak choice — soft orange, kept friendly. */
.coach-bubble-oops .coach-bubble-inner {
  background: linear-gradient(160deg, #d98a4a, #c2703a);
}

/* Slow down — calm blue. */
.coach-bubble-slow .coach-bubble-inner {
  background: linear-gradient(160deg, #4f8be0, #356bbf);
}

/* Magic combo — flashy purple/magenta with an extra glow. */
.coach-bubble-combo .coach-bubble-inner {
  background: linear-gradient(160deg, #b15cff, #8a2be2 60%, #6a1bb0);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(177, 92, 255, 0.7);
  font-size: 1.15rem;
}

/* Buff tip — muted teal, advisory (not a scolding). */
.coach-bubble-buff .coach-bubble-inner {
  background: linear-gradient(160deg, #3aa6a0, #2c807b);
  font-size: 0.95rem;
}

/* ---- Animations ---------------------------------------------------------- */

/* Comic pop on the body. */
@keyframes coachPop {
  0% {
    transform: scale(0.3) rotate(-6deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.12) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Wrapper rises and fades after a hold. Keeps the -50%/-100% anchor offset. */
@keyframes coachFloat {
  0% {
    transform: translate(-50%, -100%);
    opacity: 1;
  }
  55% {
    transform: translate(-50%, -100%);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, calc(-100% - 26px));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coach-bubble {
    animation: coachFade 2.6s linear forwards;
  }
  .coach-bubble-inner {
    animation: none;
  }
  @keyframes coachFade {
    0%,
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

/* Smaller bubble on phones so it doesn't dominate the castle. */
@media (max-width: 700px) {
  .coach-bubble-inner {
    padding: 7px 12px;
    font-size: 0.9rem;
    border-width: 2px;
  }
  .coach-bubble-win .coach-bubble-inner {
    font-size: 0.98rem;
  }
  /* Long messages: keep within the narrower phone screen. */
  .coach-long .coach-bubble-inner {
    font-size: 0.76rem;
    max-width: 220px;
  }
}