/* Same flat-top regular pentagon as Astreya. A separate viewport isolates each atlas cell. */
.portrait-frame{background:none!important;aspect-ratio:5/6;position:relative;overflow:visible;flex-shrink:0;filter:none;max-height:none}
.portrait-frame .framed-art{display:block;width:100%;height:100%;overflow:visible}
.portrait-frame.intro-person{position:absolute;width:min(35vw,420px);right:6%;bottom:7%;aspect-ratio:5/6}
.avatar-choice{justify-content:center;overflow:visible;background:transparent;border-color:transparent;gap:8px;padding:12px 7px;isolation:isolate}
.avatar-choice[aria-pressed=true]{background:#f3e6bc;border-color:#92711c}
.avatar-choice .portrait-frame.player{position:relative;width:min(100%,220px);height:auto;aspect-ratio:5/6;bottom:auto;min-height:0;max-height:none;margin:0}
.avatar-choice>span{flex:0 0 auto;width:auto;border-radius:8px;background:transparent;padding:9px 12px}
.avatars{align-items:center;flex:0 1 auto;min-height:0;margin:auto 0;max-height:none}
.name-stage .portrait-frame.player{position:relative;width:140px;height:168px;aspect-ratio:5/6;margin:0 0 18px;background:none;bottom:auto}
.result .options:empty{display:none}.result .bubble{max-height:calc(100dvh - 280px)}
.keyword strong{user-select:text}
@media(min-width:1200px){.conversation .portrait-frame.scene-person{right:14%}.conversation .portrait-frame.scene-person.player{left:18%;right:auto}}
@media(max-width:700px){.portrait-frame.scene-person,.conversation.goal .portrait-frame.scene-person,.result .portrait-frame.scene-person{right:4%;bottom:calc(var(--bubble-height,240px) + 5px);width:250px;aspect-ratio:5/6}.portrait-frame.scene-person.player{left:4%;right:auto;width:250px}.portrait-frame.intro-person{width:min(61vw,300px);right:5%;bottom:124px}.avatars{gap:10px;width:100%;margin:auto 0}.avatar-choice{padding:14px 3px;gap:5px;width:50%;min-width:0}.avatar-choice .portrait-frame.player{width:100%;height:auto;aspect-ratio:5/6;bottom:auto;position:relative}.avatar-choice>span{font-size:12px;padding:8px}.name-stage .portrait-frame.player{width:125px;height:150px;margin-bottom:16px}.result .bubble{max-height:calc(100dvh - 235px)}.result .project-mark{max-width:48%}.result-links{gap:6px}.result-links .text-button{font-size:11px}.intro-copy p{max-width:75%;width:75%}}
@media(max-height:650px) and (max-width:700px){.name-stage .portrait-frame.player{width:85px;height:102px;margin:0 0 12px}.avatar-choice .portrait-frame.player{width:95%;height:auto}.avatars{margin:5px 0}.avatar-choice{padding:8px 3px}.portrait-frame.intro-person{width:46vw;bottom:121px}.result .bubble{max-height:calc(100dvh - 200px)}.result .dialogue-text{font-size:13px}.result .keyword{margin:10px 0;padding:10px}.result-links .text-button{font-size:11px;padding:8px 0}.result .primary,.result .secondary{padding:10px;min-height:42px}}

/* Stable stage: content never resizes or moves the speaker. Only the viewport does. */
#game .conversation{
 --portrait-width:clamp(132px,28dvh,280px);
 display:grid;grid-template-columns:minmax(0,1fr);
 grid-template-rows:calc(var(--portrait-width)*1.2) minmax(0,1fr);
 gap:12px;padding:136px 30px 28px;justify-items:center;align-items:stretch;
 width:min(1100px,100%);margin-inline:auto;
 animation:none;
}
#game .conversation .portrait-frame.scene-person{
 position:relative;grid-row:1;grid-column:1;
 inset:auto;width:var(--portrait-width);height:calc(var(--portrait-width)*1.2);
 max-height:none;margin:0;transform:none;filter:none;animation:none;
 justify-self:end;
}
#game .conversation .portrait-frame.scene-person.player{justify-self:start}
#game .conversation .bubble{
 grid-row:2;grid-column:1;align-self:start;
 display:flex;flex-direction:column;
 width:min(760px,100%);max-width:760px;height:auto;min-height:0;max-height:100%;
 margin:0;overflow:auto;overscroll-behavior:contain;
}
#game .conversation .bubble>*{flex-shrink:0}
#game .conversation .tap-next{margin-top:16px}
@media(max-width:700px){
 #game .conversation{padding:128px 16px 20px}
}
@media(max-height:650px) and (max-width:700px){
 #game .conversation{--portrait-width:clamp(112px,25dvh,162px);padding-top:104px;gap:12px}
}
@media(max-height:650px) and (min-width:701px){
 #game .conversation{--portrait-width:clamp(100px,24dvh,156px);padding-top:90px;padding-bottom:16px}
}

/* Viewing mode gives the entire viewport to the project image. */
#game[data-screen=gallery] header{display:none}
#game .gallery img{position:absolute;inset:0;width:100%;height:100%;margin:0;object-fit:cover}
#game .gallery-info{left:20px;right:20px;bottom:20px;display:block}
#game .gallery-next{width:100%;max-width:none;min-height:48px;margin:0;padding:12px 0;border:0;justify-content:center;text-align:center;font-size:12px;text-shadow:0 1px 5px #000}
#game .gallery-back{top:20px;left:20px}
#game .gallery-count{top:32px;right:20px}