/* cutscene.css: arrival conversations between the player and the place keepers (cutscene.js). Loaded last. */
/* Stage: the hero stops on the left third, the keeper stands on the right, mirrored to face them.
   The rig's torso sits at 46% of its box (54% mirrored), so `left` is where each torso stands. */
.travel-dialog.cutscene .cut-stage{outline:none;cursor:pointer}
.travel-dialog.cutscene .cut-hero{left:29%;transform:translateX(-46%)}
.travel-dialog.cutscene .cut-keeper{left:71%;transform:translateX(-54%)}
.travel-dialog.cutscene .cut-speaking{z-index:3}
.travel-dialog.cutscene .walker-facing{filter:none}
.cut-flip{position:absolute;inset:0;transform:scaleX(-1)}
.cut-flip .keeper-figure{position:absolute;inset:0}
.cut-flip .combat-rig{display:block;width:100%;height:100%;overflow:visible}
.cut-keeper .walker-shadow{left:auto;right:6%}
/* Comic speech bubbles: parchment, ink outline, a tail at the speaker's head, a name tag. */
.cut-bubble{position:absolute;bottom:90%;z-index:4;width:max-content;max-width:min(330px,64vw);padding:14px 14px 10px;background:var(--ss-parch-bg,#f3e3bd);color:var(--ss-parch-ink,#3a220f);border:2.5px solid var(--ss-ink,#2b1709);border-radius:18px;box-shadow:0 3px 0 var(--ss-ink,#2b1709),0 10px 22px #0007;opacity:0;transform:scale(.55);transition:opacity .12s ease-out,transform .22s cubic-bezier(.2,1.6,.4,1);pointer-events:none}
.cut-bubble.on{opacity:1;transform:none}
.cut-bubble.hero{left:34%;transform-origin:14% 110%}
.cut-bubble.keeper{right:34%;transform-origin:86% 110%;bottom:calc((248 - var(--top,24)) / 240 * 100%)}
.cut-bubble::before,.cut-bubble::after{content:'';position:absolute;top:100%;border-style:solid}
.cut-bubble.hero::before{left:16px;border-width:15px 12px 0 2px;border-color:var(--ss-ink,#2b1709) transparent transparent transparent}
.cut-bubble.hero::after{left:19px;margin-top:-1px;border-width:10px 8px 0 1px;border-color:#ecd7a8 transparent transparent transparent}
.cut-bubble.keeper::before{right:16px;border-width:15px 2px 0 12px;border-color:var(--ss-ink,#2b1709) transparent transparent transparent}
.cut-bubble.keeper::after{right:19px;margin-top:-1px;border-width:10px 1px 0 8px;border-color:#ecd7a8 transparent transparent transparent}
.cut-tag{position:absolute;top:-13px;left:12px;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 9px 2px;border:2px solid var(--ss-ink,#2b1709);border-radius:9px;background:linear-gradient(#ffe08f,#f0b955 55%,#d18f3a);box-shadow:0 2px 0 var(--ss-ink,#2b1709);font:400 13px/1.25 var(--ss-font-display,'Lilita One',sans-serif);letter-spacing:.02em;color:var(--ss-parch-ink,#3a220f)}
.cut-bubble.keeper .cut-tag{left:auto;right:12px;background:linear-gradient(#fff4,#0000 60%),var(--accent,#b86f35);color:#fff;text-shadow:var(--ss-outline-sm,0 1px 0 #2b1709)}
.cut-bubble p{margin:0;font:700 15.5px/1.32 var(--font,'DM Sans',sans-serif);color:var(--ss-parch-ink,#3a220f);text-align:left;overflow-wrap:anywhere}
.cut-rest{visibility:hidden}
/* Caption: who you're meeting, a tap hint, Town / Skip. The spoken line is mirrored for screen readers only. */
.cut-sr{position:absolute!important;width:1px;height:1px;margin:0!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cut-caption small{display:block;font:400 14px/1.2 var(--ss-font-display,'Lilita One',sans-serif);letter-spacing:.03em}
.cut-hint{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font:600 12px/1.2 var(--font,'DM Sans',sans-serif);color:#e8d5b0cc}
.cut-hint .icon{width:14px;height:14px}
html:not([data-motion=off]) .cut-hint{animation:cut-hint 1.6s ease-in-out 3}
@keyframes cut-hint{50%{opacity:.45}}
.travel-dialog.cutscene .arrival-progress span{transition:transform .2s linear}
/* Landscape phones: the caption becomes a bottom bar so the keeper has the right half of the room. */
@media (max-height:520px){
 .travel-dialog.cutscene .arrival-caption{left:0;right:0;top:auto;bottom:0;padding:26px max(18px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));flex-direction:row;align-items:center;justify-content:space-between;background:linear-gradient(transparent,#1a0b03e6)}
 .travel-dialog.cutscene .arrival-caption .arrival-buttons{margin-left:auto}
 .travel-dialog.cutscene .arrival-heading{max-width:none}
 .travel-dialog.cutscene .arrival-walker{bottom:19%;width:clamp(150px,44dvh,200px)}
 .cut-bubble{max-width:min(300px,38vw);padding:12px 12px 8px}
 .cut-bubble p{font-size:14px}
}
/* Portrait phones: figures sit above the caption; bubbles may reach across the middle. */
@media (max-width:600px) and (min-height:521px){
 .travel-dialog.cutscene .arrival-walker{bottom:22%;width:min(57%,250px);min-width:0}
 .cut-bubble{max-width:min(300px,70vw)}
}
@media (max-width:380px){.cut-bubble p{font-size:14.5px}.cut-bubble{padding:13px 12px 9px}}
/* Wide screens: bring the pair a little closer. */
@media (min-width:1000px) and (min-height:521px){
 .travel-dialog.cutscene .cut-hero{left:35%}
 .travel-dialog.cutscene .cut-keeper{left:65%}
 .travel-dialog.cutscene .arrival-walker{width:clamp(240px,28vw,360px);max-width:none;bottom:20%}
 .cut-bubble p{font-size:17px}
}
html[data-motion=off] .cut-bubble{transition:none}
/* The town map is hidden under the chat: its decorative loops rest until the walk back. */
body.in-arrival-chat .town-map *{animation-play-state:paused!important}
/* ---------- Interactive replies (Swords & Sandals): numbered parchment speech options in place of Town / Skip ---------- */
.cut-interactive .arrival-caption{flex-direction:column;align-items:stretch;gap:6px}
.cut-interactive .cut-who small{display:none}
.cut-interactive .cut-who{width:auto!important}
.cut-choosing .cut-hint{visibility:hidden}
.cut-choices{display:grid;gap:8px;width:100%;max-width:560px;margin:0 auto}
.cut-choices:not(.on){visibility:hidden}
.travel-dialog .cut-choice{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:10px;width:100%;min-height:50px;margin:0;padding:6px 14px 6px 9px;border:2.5px solid var(--ss-ink,#2b1709);border-radius:16px;background:var(--ss-parch-bg,#f3e3bd);color:var(--ss-parch-ink,#3a220f);box-shadow:inset 0 0 0 1px #fff8,0 3px 0 var(--ss-ink,#2b1709),0 8px 16px #0006;text-align:left;cursor:pointer;font:inherit;text-shadow:none}
.cut-choice kbd{display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--ss-ink,#2b1709);border-radius:50%;background:linear-gradient(#ffe08f,#f0b955 55%,#d18f3a);box-shadow:0 2px 0 var(--ss-ink,#2b1709);font:400 15px/1 var(--ss-font-display,'Lilita One',sans-serif);color:var(--ss-parch-ink,#3a220f)}
.cut-choice>span{min-width:0}
.cut-choice b{display:block;font:700 15px/1.25 var(--font,'DM Sans',sans-serif);color:var(--ss-parch-ink,#3a220f);overflow-wrap:anywhere}
.cut-choice small{display:block;margin-top:2px;font:400 11px/1.1 var(--ss-font-display,'Lilita One',sans-serif);letter-spacing:.08em;text-transform:uppercase;color:#8a3d12}
.cut-choice[data-choice=leave] small{color:#6e4a26}
.travel-dialog .cut-choice:hover{filter:brightness(1.05)}
.travel-dialog .cut-choice:focus-visible{outline:3px solid var(--ss-gold,#ffd24a);outline-offset:3px}
html:not([data-motion=off]) .travel-dialog .cut-choice:active{transform:translateY(2px);box-shadow:inset 0 0 0 1px #fff8,0 1px 0 var(--ss-ink,#2b1709)}
html:not([data-motion=off]) .cut-choices.on .cut-choice{animation:cut-choice .28s cubic-bezier(.2,1.4,.4,1) both}
.cut-choices.on .cut-choice:nth-child(2){animation-delay:.06s}
.cut-choices.on .cut-choice:nth-child(3){animation-delay:.12s}
@keyframes cut-choice{from{opacity:0;transform:translateY(10px) scale(.96)}}
/* The figures stand above the replies. */
@media (max-width:600px) and (min-height:521px){
 .travel-dialog.cutscene .cut-interactive .arrival-walker{bottom:27%}
 .cut-interactive .arrival-caption{padding-top:56px}
}
@media (max-width:600px) and (min-height:521px) and (max-height:700px){
 .travel-dialog.cutscene .cut-interactive .arrival-walker{bottom:30%;width:min(52%,230px)}
 .travel-dialog .cut-choice{min-height:44px;padding-top:4px;padding-bottom:4px}
 .cut-choices{gap:6px}
 .cut-choice b{font-size:14.5px}
}
@media (min-width:601px),(max-height:520px){
 .cut-choices{grid-template-columns:repeat(3,minmax(0,1fr));max-width:980px}
}
@media (max-height:520px){
 .travel-dialog.cutscene .cut-interactive .arrival-caption{flex-direction:column;align-items:stretch;padding-top:14px}
 .travel-dialog.cutscene .cut-interactive .arrival-walker{bottom:26%;width:clamp(130px,40dvh,170px)}
 .travel-dialog .cut-choice{min-height:46px;padding:4px 10px 4px 7px;gap:7px;grid-template-columns:26px minmax(0,1fr)}
 .cut-choice kbd{width:24px;height:24px;font-size:13px}
 .cut-choice b{font-size:13.5px}
}
@media (min-width:1000px) and (min-height:521px){
 .travel-dialog.cutscene .cut-interactive .arrival-walker{bottom:22%}
 .cut-choice b{font-size:16px}
}