/* Reading geometry is independent of the current sentence and typewriter length. */
#app{--scene-height:100dvh;--dialogue-height:clamp(280px,34dvh,300px);--sprite-limit:calc((var(--scene-height) - var(--dialogue-height) - 20px) / 2)}
.dialogue{height:var(--dialogue-height);min-height:0;max-height:none;padding:16px 22px calc(10px + var(--safe-bottom))}
.speaker-row{height:24px;min-height:24px;flex:0 0 24px;gap:8px}
.text-box{flex:1 1 0;min-height:0;max-height:none;overflow:hidden;padding:8px 0 18px}
.text-box p{white-space:pre;overflow-wrap:normal;word-break:normal;line-break:strict;line-height:1.85}
.reading-controls{flex:0 0 50px;min-height:50px}
#remote{position:static;transform:none;margin-left:auto;padding:3px 8px;height:23px;gap:6px;box-shadow:none;border-radius:12px;font-size:8px;order:1;flex-shrink:0;pointer-events:none}
#remote b{font-size:10px}#remote .call-wave{display:none}#remote span:nth-child(2){font-size:8px}
#mode-indicator{order:2;flex-shrink:0;margin-left:auto}
#remote:not([hidden]) + #mode-indicator{margin-left:2px}
.character.single,.character.left,.character.right,.character.receptionist{height:auto;aspect-ratio:1/2;bottom:calc(var(--dialogue-height) - 60px);overflow:hidden}
.character img{top:0;bottom:auto;height:auto;width:300%}
.character.single{width:min(65%,var(--sprite-limit));left:0;right:0;margin-inline:auto}
.character.left{width:min(56%,var(--sprite-limit));left:-2%;right:auto}
.character.right,.character.yuki.right{width:min(51%,calc(var(--sprite-limit) * .94));right:-1%;left:auto}
.advance-zone{bottom:var(--dialogue-height)}
.insert{top:calc(74px + var(--safe-top));bottom:calc(var(--dialogue-height) + 14px)}
.image-insert img{max-height:calc(var(--scene-height) - var(--dialogue-height) - 135px)}
.image-insert.panel img{max-height:calc(var(--scene-height) - var(--dialogue-height) - 135px)}
.ui-hidden .character{bottom:calc(var(--dialogue-height) - 60px)}
@media(min-width:700px){#app{--scene-height:calc(100dvh - 32px)}}
@media(max-height:520px) and (orientation:landscape){
 #app{--scene-height:100dvh;--dialogue-height:calc(100dvh - 84px)}
 .dialogue{height:var(--dialogue-height);top:84px;left:43%;padding:15px 22px 7px}
 .character.single{width:45dvh;height:90dvh;left:10%;right:auto;bottom:0;margin:0}
 .character.left,.character.receptionist.left{width:40dvh;height:80dvh;left:1%;bottom:0}
 .character.right,.character.yuki.right{width:37dvh;height:74dvh;left:22%;right:auto;bottom:0}
 .ui-hidden .character{bottom:0}
 .advance-zone{right:57%;bottom:0}
 .insert{top:70px;bottom:16px;left:10px;right:59%}
 .image-insert img,.image-insert.panel img{max-height:calc(100dvh - 130px)}
}
.character[data-pose="phone"]{clip-path:inset(0 1%)}

/* The diary attachment keeps the complete portrait visible above the fixed text frame. */
.insert .image-insert.diary{border-radius:6px;background:#1c1721}
.image-insert.diary .diary-heading{height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 10px;background:#f7f5f2;color:#493b3e}
.diary-heading b{font-size:11px;font-weight:500}.diary-heading small{font-size:8px;color:#8d776a}
.image-insert.diary img{max-height:calc(var(--scene-height) - var(--dialogue-height) - 154px - var(--safe-top));flex-shrink:1;min-height:0;object-fit:contain}
.image-insert.diary .image-caption{padding:8px 10px;font-size:9px;flex-shrink:0}
@media(max-height:520px) and (orientation:landscape){.image-insert.diary img{max-height:calc(100dvh - 151px)}}

/* Wide scene art is a single fitted image, never a tiled background. */
.background,.scene-backdrop{background-repeat:no-repeat}
.background.wide{bottom:var(--dialogue-height);background-size:contain;background-position:center}
@media(max-height:520px) and (orientation:landscape){.background.wide{inset:70px 57% 0 0;background-size:contain;background-position:center}}

.scene-item{text-decoration:none;color:inherit}.title-secondary{gap:5px}.title-secondary button{padding:0 4px}
#end-next{display:block;margin:10px auto 0}.end-content #end-scenes{margin-top:2px}
.chapter2-card{max-height:100%;overflow:auto;padding:16px 18px}.chapter2-card .social-type{padding-bottom:10px;margin-bottom:12px}
.quote-card{border-left:3px solid #9d7a78}.quote-card p{font-family:var(--serif);font-size:18px;line-height:1.8}
.floor-tabs{display:flex;justify-content:space-around;font-size:11px;padding:4px 0 12px;color:#8a8584}.floor-tabs strong{color:#3e6762}
.room-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.room-tile{height:72px;background:linear-gradient(#0005,#0009),url('./assets/chapter2/room.webp') center/cover;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#fff;border-radius:3px}.room-tile b{font:20px Georgia}.room-tile span{font-size:10px;padding:2px 9px;background:#376356}.room-tile.occupied{filter:brightness(.5) saturate(.4)}.room-tile.occupied span{background:#393537}.room-panel small{display:block;font-size:9px;margin-top:12px;color:#7d726a}.hatch-label{width:auto;background:#d7d2bd;color:#403b31;transform:rotate(-2deg);border:1px solid #938873;text-align:center}.hatch-label span{display:block;font-size:17px;letter-spacing:.2em}.hatch-label b{display:block;font:20px Georgia;margin-top:12px}
@media(max-height:650px) and (orientation:portrait){.room-tile{height:44px}.room-panel{padding:10px 14px}.room-panel .social-type{padding-bottom:6px;margin-bottom:5px}.room-panel small{margin-top:5px}}

/* Keep the climax illustration below chapter controls, including small phones. */
.background.story-cg{top:calc(70px + var(--safe-top))}

/* The third boxer sprite contains a 10px fragment of the adjacent arm.
   Its own silhouette starts beyond this 15.36px gutter. */
.character.takase[data-wardrobe="boxers"][data-expression="2"]{clip-path:inset(0 0 0 3%)}