/* Handset game: a landscape stage, with a safe and paused portrait state. */
#rotate-device{position:fixed;inset:0;z-index:2000;background:#151c1e;color:#ede8da;padding:calc(32px + env(safe-area-inset-top)) 30px calc(30px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between}
#rotate-device header{display:flex;justify-content:space-between;align-items:center}#rotate-language{min-height:44px;font-size:13px}
.rotate-content{margin-block:auto;padding-block:40px;max-width:380px}.rotate-content svg{width:88px;height:70px;color:var(--accent);margin-bottom:25px}.rotate-content h2{font:600 52px/1.1 var(--display);margin:18px 0}.rotate-content p{color:#b6bdb7;font-size:14px;line-height:1.8}#rotate-note{border-top:1px solid #ffffff30;padding-top:18px;font-size:11px;color:#b6bdb7}
html[dir=rtl] .rotate-content h2{font-size:36px;line-height:1.6}
html[data-device=phone] #companion-open,html[data-device=phone] #companion-divider,html[data-device=phone] .context-key{display:none!important}
html[data-device=phone],html[data-device=phone] body,html[data-device=phone] #experience{height:100dvh}
html[data-device=phone]{--gutter:max(20px,env(safe-area-inset-left),env(safe-area-inset-right))}
html[data-device=phone] .topline{top:max(4px,env(safe-area-inset-top));gap:12px}
html[data-device=phone] .topline nav{gap:18px;font-size:12px}html[data-device=phone] .topline .signature{font-size:22px}
html[data-device=phone] .bottomline{bottom:max(4px,env(safe-area-inset-bottom));font-size:9px}html[data-device=phone] #control-hint{display:none}
html[data-device=phone] #opening{top:20%;inset-inline-start:7%}html[data-device=phone] #opening .eyebrow{margin-block:0 16px;font-size:10px}html[data-device=phone] #opening h1{font-size:clamp(70px,25dvh,125px)}html[data-device=phone] #tagline{margin:14px 0 16px;font-size:15px}html[data-device=phone] #begin{padding:8px 0;min-height:44px}html[data-device=phone] #load-status{margin:0}
html[data-device=phone][dir=rtl] #opening h1{font-size:clamp(42px,17dvh,78px);line-height:1.25}html[data-device=phone][dir=rtl] #tagline{margin:8px 0}
html[data-device=phone] #narrative{top:22%;inset-inline:8%}html[data-device=phone] #logline{font-size:clamp(32px,9dvh,48px);margin:16px 0}html[data-device=phone][dir=rtl] #logline{font-size:30px;line-height:1.6}html[data-device=phone] .narrative-rule{margin-top:15px}html[data-device=phone] #skip{bottom:25px;min-height:44px}
html[data-device=phone] #objective{top:56px;max-width:38%;inset-inline-start:var(--gutter)}html[data-device=phone] #objective-line{font-size:12px;line-height:1.5}html[data-device=phone] .eyebrow{font-size:10px}html[data-device=phone] #identity-status{top:51px;max-width:27%;font-size:10px;inset-inline-end:var(--gutter)}
html[data-device=phone] #context{font-size:13px;min-height:44px;padding:9px 14px}
html[data-device=phone] #document-tools,html[data-device=phone] #comparison-actions{bottom:max(22px,env(safe-area-inset-bottom));inset-inline:var(--gutter);padding:4px 16px}html[data-device=phone] #document-tools button,html[data-device=phone] #comparison-actions button{font-size:12px;min-height:44px}html[data-device=phone] .action-row{gap:12px 24px;flex-wrap:wrap}html[data-device=phone] #document-side,html[data-device=phone] #compare-heading{margin:4px 0}
html[data-device=phone] #event-panel,html[data-device=phone] #processing-panel,html[data-device=phone] #resolution,html[data-device=phone] #inspection-finish{inset-inline-start:var(--gutter);bottom:34px;width:46%;max-height:calc(100dvh - 132px);padding-inline-end:12px}
html[data-device=phone] #event-body,html[data-device=phone] #processing-body,html[data-device=phone] #outcome-body,html[data-device=phone] #inspection-finish-body{font-size:12px;line-height:1.65;margin-block:10px}html[data-device=phone] #event-actions .text-action,html[data-device=phone] #processing-actions .text-action{font-size:12px;min-height:44px;padding-block:9px}
html[data-device=phone] #resolution h2,html[data-device=phone] #inspection-finish h2{font-size:28px;margin-block:10px}html[data-device=phone] .resolution-bottom{gap:12px;margin-top:12px}html[data-device=phone] #choices{bottom:35px;max-height:calc(100dvh - 140px);overflow:auto}html[data-device=phone] #choices>button{font-size:13px;min-height:48px}
html[data-device=phone] #inspection-toolbar{bottom:23px;inset-inline:var(--gutter);gap:12px;align-items:end;flex-direction:row}html[data-device=phone] .perspectives,html[data-device=phone] .inspection-actions{gap:14px}html[data-device=phone] .inspection-actions{justify-content:end;max-width:64%}html[data-device=phone] .perspectives button,html[data-device=phone] .inspection-actions button{font-size:12px;min-height:44px;padding:8px 0}
html[data-device=phone] #finding-panel{bottom:83px;inset-inline-start:var(--gutter);width:40%;max-height:calc(100dvh - 170px);overflow:auto;padding:12px 16px}html[data-device=phone] #finding-detail{font-size:12px;line-height:1.6}html[data-device=phone] #finding-panel button{min-height:44px;font-size:12px}
html[data-device=phone] #processing-object{bottom:60px;inset-inline-start:var(--gutter);width:40%;max-height:calc(100dvh - 160px);padding:12px 16px}html[data-device=phone] #processing-object p{font-size:12px;line-height:1.5}html[data-device=phone] #processing-object button{font-size:12px;min-height:44px}html[data-device=phone] #processing-object .action-row{margin-top:6px;gap:5px 18px}
html[data-device=phone] #processing-next,html[data-device=phone] #processing-continue,html[data-device=phone] #evaluation-start{bottom:24px;inset-inline-end:var(--gutter);font-size:12px;min-height:44px;max-width:40%}html[data-device=phone] #processing-hover{font-size:12px;min-height:44px;white-space:normal;max-width:40%}
html[data-device=phone] #subtitle{top:60px;bottom:auto;left:auto;transform:none;inset-inline-end:var(--gutter);width:43%}html[data-device=phone] #dialogue-line{font-size:12px;line-height:1.65;padding:8px 12px;margin-top:4px}html[data-device=phone] #speaker{font-size:10px}
html[data-device=phone] #light-tools{bottom:26px}html[data-device=phone] #observation-toast{top:102px;inset-inline-start:var(--gutter);font-size:11px;max-width:40%}html[data-device=phone] #privacy-cut{padding:9%}html[data-device=phone] #privacy-cut #privacy-heading{font-size:28px}html[data-device=phone] #privacy-body{font-size:12px}
html[data-device=phone] .debrief-content{padding-top:64px;padding-bottom:40px;width:76%;margin-inline-start:5%}html[data-device=phone] .debrief-content h1{font-size:40px}html[data-device=phone][dir=rtl] .debrief-content h1{font-size:30px}html[data-device=phone] .debrief-open{font-size:13px}html[data-device=phone] .debrief-nav{gap:20px}html[data-device=phone] #session-resume{bottom:22px;inset-inline-start:var(--gutter);min-height:44px;font-size:12px}html[data-device=phone] #rewind-hud{top:52px;font-size:10px;max-width:33%}html[data-device=phone] #session-notice{bottom:18px;font-size:10px}html[data-device=phone] #audio-settings{max-width:620px;width:80%;padding:20px 28px}html[data-device=phone] dialog label{margin:12px 0}html[data-device=phone] #error{inset:20% 10%;padding:20px}

.phone-document-readout,.phone-compare-readout{display:none}html[data-device=phone] .phone-document-readout{display:flex;justify-content:center;align-items:center;gap:14px;padding-block:6px}html[data-device=phone] .phone-compare-readout{display:flex;justify-content:center;gap:38px;padding-block:6px}html[data-device=phone] .phone-compare-readout>div{display:flex;align-items:center;gap:12px}html[data-device=phone] .phone-document-readout span,html[data-device=phone] .phone-compare-readout span{font-size:10px;color:var(--muted)}html[data-device=phone] .phone-document-readout bdi,html[data-device=phone] .phone-compare-readout bdi{font-size:16px;letter-spacing:.04em}html[data-device=phone] #document-side,html[data-device=phone] #compare-heading{display:none}