/* V38 — Keep skip button anchored during close; no center flash. */

.journey-companion-layer{
  position:fixed;
  inset:0;
  z-index:30;
  pointer-events:none;
  overflow:hidden;
}

.journey-companion-layer[hidden],
body:not(.journey-choice-visible) .journey-companion-layer{
  display:none !important;
}

/* Both stars remain visible on the journey page, but never on Home. */
.journey-companion-star{
  position:absolute;
  display:block;
  visibility:visible;
  opacity:.98;
  width:clamp(132px,8.4vw,168px);
  height:auto;
  pointer-events:auto;
  cursor:pointer;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  line-height:0;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  animation:journeyStarFloatV36 4.8s ease-in-out infinite;
  filter:brightness(1.03) drop-shadow(0 0 20px rgba(255,244,185,.66));
}

.journey-companion-star:focus-visible{
  outline:4px solid rgba(255,246,178,.96);
  outline-offset:7px;
}

.journey-companion-star:active{
  filter:brightness(1.2) drop-shadow(0 0 34px rgba(255,247,184,.98));
}

.journey-companion-star img{
  display:block;
  width:100%;
  height:auto;
  opacity:1;
}

.journey-companion-star::before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,248,194,.54) 0%,rgba(255,236,145,.18) 44%,rgba(255,236,145,0) 72%);
  filter:blur(13px);
  animation:journeyStarPulseV36 3s ease-in-out infinite;
}

.journey-companion-star--left{
  left:54px;
  top:408px;
}

.journey-companion-star--right{
  right:54px;
  top:408px;
  width:clamp(142px,9vw,180px);
  animation-delay:-2.1s;
}

.journey-companion-star.is-speaking{
  filter:brightness(1.16) drop-shadow(0 0 34px rgba(255,247,184,.98));
}

/* Dialog position is the approved left-side position. Right uses the exact mirror. */
.journey-companion-dialog{
  position:absolute;
  top:54px;
  width:330px;
  height:326px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
  transform:translateY(8px) scale(.98);
  transition:opacity .24s ease,transform .24s ease,visibility .24s ease;
  filter:drop-shadow(0 14px 28px rgba(0,25,56,.28));
}

/* Mirror only the artwork. Text stays in a normal, unflipped coordinate system. */
.journey-companion-dialog::before{
  content:"";
  position:absolute;
  inset:0;
  background:transparent url("../portal-assets/companion/journey-dialog-bubble-v34.png") center/100% 100% no-repeat;
  transform-origin:center;
}

.journey-companion-dialog--left{
  left:24px;
}

.journey-companion-dialog--right{
  right:24px;
}

.journey-companion-dialog--right::before{
  transform:scaleX(-1);
}

.journey-companion-dialog.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.journey-companion-dialog-inner{
  position:absolute;
  inset:0;
  z-index:1;
}

/* Same safe text box for both sides because only the artwork is mirrored. */
.journey-companion-copy{
  position:absolute;
  left:18%;
  right:18%;
  top:17%;
  bottom:31%;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#183f5b;
  font-size:16px;
  line-height:1.34;
  font-weight:900;
  text-align:center;
  white-space:pre-line;
  overflow-wrap:normal;
  word-break:keep-all;
  writing-mode:horizontal-tb !important;
}

/* Skip stays below the active dialog in the outer safe zone. */
.journey-companion-skip{
  position:absolute;
  top:344px;
  width:154px;
  height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  color:#fff8ea;
  font-size:19px;
  font-weight:900;
  text-shadow:0 2px 8px rgba(0,20,45,.56);
  background:transparent url("../portal-assets/v798/button-normal.png") center/100% 100% no-repeat;
  filter:brightness(1) drop-shadow(0 0 10px rgba(255,210,120,.28));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease,filter .18s ease;
}


.journey-companion-skip[hidden]{
  display:none !important;
}

.journey-companion-skip.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.journey-companion-skip--left{ left:112px; }
.journey-companion-skip--right{ right:112px; }

.journey-companion-skip:hover{
  transform:translateY(-2px);
  filter:brightness(1.07) drop-shadow(0 0 18px rgba(255,220,140,.55));
}

.journey-companion-skip:active{
  transform:scale(.97);
  background-image:url("../portal-assets/v798/button-pressed.png");
}


@keyframes journeyStarFloatV36{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-9px) scale(1.035);}
}

@keyframes journeyStarPulseV36{
  0%,100%{transform:scale(.95);opacity:.54;}
  50%{transform:scale(1.08);opacity:1;}
}

@media (max-width:1200px){
  .journey-companion-dialog{
    top:42px;
    width:286px;
    height:282px;
  }
  .journey-companion-dialog--left{left:10px;}
  .journey-companion-dialog--right{right:10px;}
  .journey-companion-copy{
    left:18%;
    right:18%;
    top:17%;
    bottom:31%;
    font-size:14px;
    line-height:1.32;
  }
  .journey-companion-star--left{left:24px;top:390px;width:132px;}
  .journey-companion-star--right{right:24px;top:390px;width:142px;}
  .journey-companion-skip{top:305px;width:140px;height:48px;font-size:17px;}
  .journey-companion-skip--left{left:82px;}
  .journey-companion-skip--right{right:82px;}
}

@media (max-width:820px){
  .journey-companion-dialog{
    top:8px;
    width:min(260px,66vw);
    height:min(256px,65vw);
    left:50%;
    right:auto;
    transform:translate(-50%,8px) scale(.98);
  }
  .journey-companion-dialog.is-visible{
    transform:translate(-50%,0) scale(1);
  }
  .journey-companion-copy{
    left:18%;
    right:18%;
    top:17%;
    bottom:31%;
    font-size:13px;
    line-height:1.3;
  }
  .journey-companion-star--left{left:10px;top:auto;bottom:84px;width:110px;}
  .journey-companion-star--right{right:10px;top:auto;bottom:84px;width:118px;}
  .journey-companion-skip,
  .journey-companion-skip--left,
  .journey-companion-skip--right{
    left:50%;
    right:auto;
    top:270px;
    transform:translateX(-50%);
  }
}