/* Comfortable touch controls and readable text, including narrow phones. */
@media(max-width:760px){
  header{height:auto;min-height:64px;gap:8px;flex-wrap:wrap;padding:10px 16px}
  .tools{gap:8px;margin-left:auto}.tools button,.tools select{min-height:44px;font-size:14px;padding:8px 4px}
  .tools select{font-size:16px;max-width:150px}
  .brand{font-size:17px}.brand-icon{width:32px;height:32px}
  .intro p,.hint{font-size:13px}
  .choice{min-height:52px;font-size:13px;padding:12px 10px;overflow-wrap:anywhere}
  .panel{min-width:0}.choices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-fields select,.character-controls select{font-size:16px;min-height:48px;max-width:100%;width:100%}
  .character-controls{max-width:100%;width:100%}.character-controls .tradition{justify-content:center;flex-wrap:wrap}
  .character-controls .tradition select{width:auto;max-width:100%}
  .primary,.secondary,.back,.text-action,.practical summary,#releaseClose{min-height:44px}
  .back,.text-action,.practical summary{font-size:13px;padding-top:12px;padding-bottom:12px}
  .scene.idle-chat{height:270px}.scene.idle-chat #character{height:195px}.scene.idle-chat .bubble{top:0;font-size:12px;min-height:64px}
  .scene.idle-chat .arch{height:205px}
  .scene.task-scene .bubble{white-space:normal;width:94%;text-align:center;line-height:1.4}
  #releaseDialog{max-height:calc(100dvh - 16px);overscroll-behavior:contain}
  #releaseTitle{font-size:23px;overflow-wrap:anywhere}#releaseContext{overflow-wrap:anywhere}
  .release-controls{padding-bottom:max(8px,env(safe-area-inset-bottom));flex-wrap:wrap}
  .release-controls .primary,.release-controls .secondary{font-size:13px;white-space:normal;flex:1 1 120px}
  #releaseStage .scene .candles{gap:4px}#releaseStage .scene .candles i{width:clamp(28px,10vw,42px)}
  .panel,.sanctuary{scroll-margin-top:12px}
}
@media(max-width:380px){
  header .brand{flex:1 0 100%}header .tools{width:100%;justify-content:space-between}
  .panel{padding:16px}.steps{font-size:9px}.choice{font-size:12px;gap:6px}
  #releaseStage .scene #character{height:195px}
}

@media(max-width:760px){.tools button{min-width:44px}.tools button span{display:inline}.primary{font-size:14px}}

.final-blessing{padding:16px 18px;margin:18px 0;border:1px solid #c9b67c;border-radius:16px;background:#fff8df;color:#62461f;font-size:clamp(16px,2vw,21px);font-weight:650;line-height:1.5;overflow-wrap:anywhere;animation:blessing-arrive .7s ease-out}.ritual-complete .bubble{color:#62461f;background:#fff8df;border-color:#c9b67c}.scene.ritual-complete .bubble{font-size:clamp(12px,1.5vw,16px);height:auto;min-height:64px;line-height:1.4} @keyframes blessing-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.final-blessing{animation:none}}

/* A complete generated pose avoids detached hands over the original sprite. */
.scene.blessing-gesture .priest-idle{display:block;background-image:url('assets/orthodox-blessing-v1.webp')}
.scene.blessing-gesture .priest-dance{display:none}
.scene.blessing-gesture .person{transform-origin:160px 350px;animation:blessing-salute 2.8s ease-in-out 1 both}
.scene.blessing-gesture[data-tradition="2"] .person,.scene.blessing-gesture[data-tradition="3"] .person{animation-name:finale-bow}
.scene.blessing-gesture #character{filter:drop-shadow(0 0 9px #d3aa4450)}
@keyframes blessing-salute{0%{opacity:.55;transform:translateY(3px) scale(.985)}30%{opacity:1;transform:translateY(-3px) rotate(-2deg)}65%{transform:rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes finale-bow{0%,100%{transform:none}45%{transform:translateY(5px) rotate(5deg) scaleY(.96)}}
@media(prefers-reduced-motion:reduce){.scene.blessing-gesture .person{animation:none!important}}

/* Each companion uses one isolated final pose, not a frame from the dance sheet. */
.scene.blessing-gesture .companion-sheet{background-size:contain;background-position:center bottom;clip-path:none}
.scene.blessing-gesture .companion-sheet-1{background-image:url('assets/catholic-finale-v1.webp')}
.scene.blessing-gesture .companion-sheet-2{background-image:url('assets/buddhist-finale-v1.webp')}
.scene.blessing-gesture .companion-sheet-3{background-image:url('assets/secular-finale-v1.webp')}
.scene.blessing-gesture[data-tradition="1"] .person{animation:padre-blessing 3s ease-in-out 1 both}
.scene.blessing-gesture[data-tradition="2"] .person{animation:zen-closing-bow 3.6s ease-in-out 1 both}
.scene.blessing-gesture[data-tradition="3"] .person{animation:guardian-toast 2.8s ease-in-out 1 both}
.scene.blessing-gesture[data-tradition="2"] #character{filter:drop-shadow(0 0 9px #c5ac6a40)}
.scene.blessing-gesture[data-tradition="3"] #character{filter:drop-shadow(0 0 9px #299e8a40)}
@keyframes padre-blessing{0%{opacity:.6;transform:translateY(4px)}30%{opacity:1;transform:rotate(-2deg)}65%{transform:rotate(1deg)}100%{transform:none}}
@keyframes zen-closing-bow{0%{opacity:.6;transform:none}25%{opacity:1}45%,65%{transform:translateY(7px) scaleY(.94)}100%{transform:none}}
@keyframes guardian-toast{0%{opacity:.6;transform:translateY(5px) rotate(2deg)}30%{opacity:1;transform:translateY(-7px) rotate(-3deg)}60%{transform:translateY(-3px) rotate(1deg)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.scene.blessing-gesture[data-tradition] .person{animation:none!important}}