/* Release 15: unified controls and play-screen visual cleanup. */
body.is-playing .game-topbar .settings-button{display:none}

/* Keep the signed-out reminder attached below its icon instead of covering
   the neighbouring deck selector on compact desktop widths. */
.account-button.guest-pulse::before{
  top:calc(100% + 10px)!important;
  right:0!important;
  left:auto!important;
  transform:none!important;
  white-space:nowrap;
}

/* Modal controls stay above elevated cards and retain a full touch target. */
.journey-dialog .dialog-close{
  position:sticky!important;
  z-index:80!important;
  top:10px!important;
  right:auto!important;
  width:46px!important;
  height:46px!important;
  min-height:46px!important;
  margin:0 0 10px auto!important;
  display:grid!important;
  place-items:center!important;
  line-height:1!important;
}
.deck-dialog .dialog-close,
.tutorial-dialog .dialog-close,
.welcome-dialog .dialog-close,
.settings-dialog .dialog-close,
.feedback-dialog .dialog-close,
.app-dialog .dialog-close{
  z-index:80!important;
  width:44px!important;
  height:44px!important;
  min-height:44px!important;
}
.deck-dialog .dialog-close{
  position:sticky!important;
  top:10px!important;
  right:auto!important;
  margin:0 0 8px auto!important;
  display:grid!important;
  place-items:center!important;
}
.deck-dialog form>h2{padding-right:52px}

.lotus-meter.round-navigation button,
.mission-steps.round-navigation button{
  appearance:none;
  min-height:0;
  padding:0;
  cursor:pointer;
  border:0;
}

.lotus-meter.round-navigation button{
  height:11px;
  background:rgba(24,59,69,.12);
  border-radius:999px;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}

.lotus-meter.round-navigation button.complete{background:linear-gradient(90deg,var(--coral),var(--gold))}
.lotus-meter.round-navigation button.current{background:var(--gold);box-shadow:0 0 0 3px rgba(246,183,60,.24)}
.lotus-meter.round-navigation button:hover,
.lotus-meter.round-navigation button:focus-visible{transform:scaleY(1.55);outline:2px solid var(--teal);outline-offset:3px}

.mission-steps.round-navigation{grid-template-columns:repeat(var(--round-count,8),minmax(22px,1fr));gap:7px}
.mission-steps.round-navigation button{
  height:30px;
  display:grid;
  place-items:center;
  color:#557073;
  background:#edf2ef;
  border:1px solid rgba(24,59,69,.12);
  border-radius:9px;
  font-size:10px;
  font-weight:900;
  box-shadow:0 2px 0 #d8e4de;
}
.mission-steps.round-navigation button.done{color:#fff;background:#2b8876}
.mission-steps.round-navigation button.active{color:#173f46;background:#ffd26b;border-color:#e9ad35;box-shadow:0 0 0 3px rgba(246,183,60,.18)}
.mission-steps.round-navigation button:hover,
.mission-steps.round-navigation button:focus-visible{outline:2px solid var(--teal);outline-offset:2px;transform:translateY(-1px)}

.lotus-mistake-journey{
  position:fixed;
  z-index:1000;
  left:50%;
  top:50%;
  width:clamp(112px,16vw,180px);
  height:clamp(112px,16vw,180px);
  color:#f16f7d;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 18px 24px rgba(86,39,48,.28));
  transform:translate(-50%,-50%) scale(.25);
}
.lotus-mistake-journey svg{width:100%;height:100%;overflow:visible}
.lotus-mistake-journey .petal{fill:currentColor;stroke:#fff1dd;stroke-width:2;transform-box:fill-box;transform-origin:bottom center}
.lotus-mistake-journey .petal-center{fill:#ff8b91}.lotus-mistake-journey .petal-left,.lotus-mistake-journey .petal-right{fill:#f27b8b}.lotus-mistake-journey .petal-low-left,.lotus-mistake-journey .petal-low-right{fill:#e45c78}.lotus-mistake-journey .lotus-base{fill:#4d9c75;stroke:#fff1dd;stroke-width:2}
.lotus-mistake-journey.animate{animation:lotusJourney 1.15s cubic-bezier(.23,.8,.35,1) forwards}
.lotus-mistake-journey.animate .petal-center{animation:petalWiltCenter 1.15s ease forwards}
.lotus-mistake-journey.animate .petal-left,.lotus-mistake-journey.animate .petal-low-left{animation:petalWiltLeft 1.15s ease forwards}
.lotus-mistake-journey.animate .petal-right,.lotus-mistake-journey.animate .petal-low-right{animation:petalWiltRight 1.15s ease forwards}

@keyframes lotusJourney{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.14) rotate(-4deg)}
  55%{opacity:1;filter:grayscale(.35) drop-shadow(0 18px 24px rgba(86,39,48,.28));transform:translate(-50%,calc(-50% + 34px)) scale(.86) rotate(17deg)}
  82%{opacity:.9;transform:translate(calc(-50% + var(--lotus-end-x) * .72),calc(-50% + var(--lotus-end-y) * .72)) scale(.48) rotate(34deg)}
  100%{opacity:0;filter:grayscale(.75);transform:translate(calc(-50% + var(--lotus-end-x)),calc(-50% + var(--lotus-end-y))) scale(.2) rotate(48deg)}
}
@keyframes petalWiltCenter{0%,25%{transform:rotate(0) scaleY(1)}65%,100%{transform:rotate(12deg) scaleY(.56)}}
@keyframes petalWiltLeft{0%,25%{transform:rotate(0) scaleY(1)}65%,100%{transform:rotate(-34deg) scaleY(.55)}}
@keyframes petalWiltRight{0%,25%{transform:rotate(0) scaleY(1)}65%,100%{transform:rotate(34deg) scaleY(.55)}}

.round-button .vq-icon,
.play-tools .vq-icon,
.app-bottom-nav .vq-icon,
.dialog-close .vq-icon{width:22px;height:22px;display:block}

.settings-button .vq-icon,
#play-settings-button .vq-icon{width:21px;height:21px;stroke-width:1.75}

#play-settings-button{
  width:46px;
  height:46px;
  border-radius:15px;
  background:#fff;
  border:1px solid rgba(24,59,69,.14);
  box-shadow:0 4px 0 #d9e6df;
}

#play-settings-button:hover,
#play-settings-button:focus-visible{
  outline:3px solid rgba(35,137,117,.28);
  outline-offset:2px;
  transform:translateY(-1px);
}

@media(max-width:760px){
  .welcome-shell>.dialog-primary{
    position:sticky!important;
    z-index:6!important;
    bottom:4px!important;
    margin-top:14px!important;
    box-shadow:0 -10px 24px rgba(239,249,245,.94),0 8px 18px rgba(24,59,69,.16)!important;
  }
  #play-settings-button{width:44px;height:44px;border-radius:14px}
  .journey-world-header p:not(.kicker),
  .journey-guidance{font-size:.875rem!important;line-height:1.45!important}
  .mission-card .mission-steps.round-navigation{display:grid!important;grid-column:1/-1;grid-template-columns:repeat(4,1fr);margin-top:7px}
  .mission-steps.round-navigation button{height:34px;font-size:11px}
  .journey-dialog .dialog-close{top:7px!important;margin-bottom:8px!important}
}

@media(prefers-reduced-motion:reduce){
  .lotus-mistake-journey.animate{animation:lotusJourneyReduced .55s ease forwards}
  .lotus-mistake-journey.animate .petal{animation:none}
  @keyframes lotusJourneyReduced{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}35%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.7)}}
}