/* 엘리시아 speech bubble. It sits beside the goddess's head in the empty
   upper-left of the stage, clear of the top bar, the stage tabs, the resource
   readouts at the stage bottom and the life rows (design rule §9.2). */
.companion-bubble {
  position: fixed;
  inset: auto;
  top: calc(var(--header-height, 60px) + 64px);
  right: calc(50% + 120px);
  left: auto;
  bottom: auto;
  margin: 0;
  z-index: 5;
  width: max-content;
  max-width: min(290px, calc(50% - 140px));
  height: auto;
  overflow: visible;
  padding: 16px 14px 10px;
  color: var(--ivory, #fff5df);
  background: rgba(9, 36, 40, .94);
  border: 1px solid rgba(240, 210, 146, .7);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  font: 13px/1.5 "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  cursor: pointer;
}
.companion-bubble:not(:popover-open):not([hidden]) { display: block; }
.companion-bubble[popover]:not(:popover-open), .companion-bubble[hidden] { display: none; }
/* Tail pointing right, toward her face. */
.companion-bubble::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 22px;
  width: 12px;
  height: 12px;
  background: inherit;
  border: solid rgba(240, 210, 146, .7);
  border-width: 1px 1px 0 0;
  transform: rotate(45deg);
}
.companion-name {
  position: absolute;
  top: -10px;
  left: 12px;
  padding: 1px 8px;
  border-radius: 9px;
  background: var(--gold, #f0d292);
  color: var(--deep, #071f24);
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: .5px;
}
.companion-text { margin: 0; word-break: keep-all; overflow-wrap: anywhere; }
/* Over the away summary: centered above the dialog, no tail. */
.companion-bubble[data-place="modal"] {
  top: var(--companion-modal-top, 12px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  max-width: min(420px, calc(100vw - 24px));
}
.companion-bubble[data-place="modal"]::after {
  right: auto;
  left: calc(50% - 6px);
  top: auto;
  bottom: -7px;
  transform: rotate(135deg);
}
.companion-bubble.companion-enter { animation: companion-pop .22s ease-out; }
@keyframes companion-pop {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
.companion-live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Expression hints on the single sprite. The base bob animates `translate`,
   so these use `rotate`/`scale` and run alongside it. This file loads before
   minigames.css so the button sprite effects win when both apply. */
.goddess[data-expression="smile"] { animation: goddess-bob var(--goddess-bob) ease-in-out infinite, companion-smile .7s ease-out; }
.goddess[data-expression="surprised"] { animation: goddess-bob var(--goddess-bob) ease-in-out infinite, companion-surprised .5s ease-in-out; }
.goddess[data-expression="pout"] { animation: goddess-bob var(--goddess-bob) ease-in-out infinite, companion-pout 1.2s ease-in-out; }
.goddess[data-expression="sleepy"] { animation: goddess-bob var(--goddess-bob) ease-in-out infinite, companion-sleepy 2.4s ease-in-out; }
@keyframes companion-smile { 0%, 100% { scale: 1; } 35% { scale: 1.012; } 65% { scale: .997; } }
@keyframes companion-surprised { 0%, 100% { rotate: 0deg; } 20% { rotate: -.5deg; } 45% { rotate: .5deg; } 70% { rotate: -.25deg; } }
@keyframes companion-pout { 0%, 100% { rotate: 0deg; } 30%, 70% { rotate: -.6deg; } }
@keyframes companion-sleepy { 0%, 100% { rotate: 0deg; } 50% { rotate: .5deg; } }

@media (max-width: 750px) {
  .companion-bubble {
    top: calc(var(--header-height, 60px) + 62px);
    right: auto;
    left: 8px;
    max-width: calc(50% - 50px);
    padding: 14px 10px 8px;
    font-size: 12px;
  }
  .companion-bubble::after { top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .companion-bubble.companion-enter { animation: none; }
  .goddess[data-expression] { animation: goddess-bob var(--goddess-bob) ease-in-out infinite; }
}