html.phone{overflow:hidden;height:100%}
.phone body{position:fixed;top:var(--pt,0);left:var(--pl,0);height:var(--ph,100dvh);width:var(--pw,100vw);overflow:hidden;display:grid;grid-template-rows:58px 44px minmax(0,1fr) 38px 110px;grid-template-columns:minmax(0,1fr);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);font-family:system-ui}
.phone #hud{position:static;grid-row:1;grid-column:1;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto auto;padding:3px 5px;gap:2px 6px;background:#0c1728;font-size:12px;min-width:0}
.phone #hud[hidden]{visibility:hidden;display:grid}
.phone #hud>div:first-child{grid-column:1;grid-row:1;overflow:hidden}
.phone #hud strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.phone #chapter{display:none}
.phone #vitals{grid-column:1;grid-row:2;white-space:nowrap}
.phone #pause,.phone #mute{grid-row:1/3;padding:4px 8px;min-height:44px}
.phone #phoneStage{grid-row:3;grid-column:1;min-width:0;min-height:0;overflow:hidden;background:#070c1b}
.phone #game{width:100%;height:100%;touch-action:none}
.phone #phoneView{grid-row:2;grid-column:1;display:flex;align-items:stretch;gap:3px;padding:0 4px}
.phone #phoneView button{flex:1;padding:2px;font-size:12px;min-height:44px;min-width:0}
.phone #phoneZoom{align-self:center;font-size:11px;min-width:35px;text-align:center;color:#e6c485}
.phone #notice{position:static;grid-row:4;grid-column:1;transform:none;max-width:none;max-height:38px;margin:0;padding:2px 8px;overflow:auto;pointer-events:auto;font-size:12px;line-height:1.35;border-radius:0}
.phone #notice:empty{display:block}
.phone #touch,.phone body.playing #touch{position:static;grid-column:1;grid-row:5;display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;padding:4px;gap:4px;pointer-events:none;min-height:0}
.phone body:not(.playing) #touch{visibility:hidden}
.phone #touch .move,.phone #touch .actions{display:flex;gap:4px;max-width:none;flex-wrap:nowrap;align-items:stretch;min-width:0}
.phone #touch .move{grid-row:2}
.phone #touch .actions{grid-row:1}
.phone #touch button{width:auto;height:auto;min-width:44px;min-height:44px;flex:1;padding:3px;font-size:12px;opacity:max(.8,var(--opacity));touch-action:none}
.phone #touch button.held{background:#e6c485;color:#071121;border-color:white}
.phone #rotate{display:none}
.phone #overlay{position:absolute;inset:0;padding:6px;overflow:hidden;z-index:10}
.phone .panel{width:min(820px,100%);max-height:100%;padding:0;display:flex;flex-direction:column;overflow:hidden;font-size:16px}
.phone .phonePanelHead{display:flex;gap:6px;align-items:center;padding:4px 8px;flex:none;border-bottom:1px solid #987447;background:#142237}
.phone .phonePanelHead strong{flex:1;font-size:13px}
.phone .phonePanelHead button{min-height:44px;padding:4px 8px;font-size:13px}
.phone .phonePanelBody{overflow:auto;min-height:0;padding:12px;overscroll-behavior:contain}
.phone .panel h1{font-size:38px;margin:10px 0}
.phone .panel h2{font-size:25px;margin:10px 0}
.phone .panel p{line-height:1.45;margin:10px 0}
.phone .panel .ornament{font-size:16px}
.phone .panel button{min-height:44px}
.phone .panel .row{margin:10px 0;gap:6px}
.phone .settings label{gap:8px;padding:9px 0}
.phone .settings input[type=range]{width:125px;min-height:44px}
.phone #storyart{height:auto;aspect-ratio:700/150;margin-bottom:10px}
@media(orientation:landscape){
 .phone body{grid-template-columns:112px minmax(0,1fr) 112px;grid-template-rows:44px 44px minmax(0,1fr) 30px}
 .phone #hud{grid-column:1/4;grid-row:1;grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-rows:1fr}
 .phone #hud>div:first-child,.phone #vitals{grid-row:1;grid-column:auto;align-self:center}
 .phone #pause,.phone #mute{grid-row:1;grid-column:auto}
 .phone #phoneView{grid-column:2;grid-row:2}
 .phone #phoneStage{grid-column:2;grid-row:3}
 .phone #notice{grid-column:2;grid-row:4;max-height:30px}
 .phone #touch,.phone body.playing #touch{display:contents}
 .phone #touch .move{grid-column:1;grid-row:2/5;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;padding:5px;gap:5px}
 .phone #touch .move [data-key=down]{grid-column:1/3}
 .phone #touch .actions{grid-column:3;grid-row:2/5;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(44px,1fr));padding:5px;gap:5px}
 .phone #touch .actions [data-key=jump]{grid-column:1/3}
 .phone body.lefty #touch .move{grid-column:3}
 .phone body.lefty #touch .actions{grid-column:1}
 .phone #touch button{min-width:0}
}
/* Retain the existing touch-size, opacity and interface-size preferences. */
.phone body{grid-template-rows:58px 44px minmax(0,1fr) 38px calc(clamp(44px,var(--size),78px)*2 + 12px)}
.phone #touch button{opacity:var(--opacity);font-size:calc(12px * var(--ui))}
.phone .panel{font-size:calc(16px * var(--ui))}
@media(orientation:landscape){
 .phone body{grid-template-columns:calc(clamp(44px,var(--size),78px)*2 + 16px) minmax(0,1fr) calc(clamp(44px,var(--size),78px)*2 + 16px);grid-template-rows:44px 44px minmax(0,1fr) 30px}
}