/* Rotazione interna: il browser può restare in verticale, il gioco è un piano
   orizzontale a risoluzione piena. Nessun ridimensionamento non uniforme. */
html[data-rottami-rotated="true"] { width:var(--rottami-layout-width,var(--rottami-physical-width))!important; height:var(--rottami-layout-height,var(--rottami-physical-height))!important; overflow:hidden!important; background:#f2eee5; }
html[data-rottami-rotated="true"] body.phone-game { position:fixed!important; inset:var(--rottami-physical-top,0px) auto auto var(--rottami-physical-left,0px)!important; width:var(--rottami-width)!important; height:var(--rottami-height)!important; min-width:0!important; min-height:0!important; max-width:none!important; max-height:none!important; margin:0!important; transform-origin:0 0!important; transform:translateX(var(--rottami-physical-width)) rotate(90deg)!important; overflow:hidden!important; --phone-safe-top:var(--rottami-safe-top,0px)!important; --phone-safe-right:var(--rottami-safe-right,0px)!important; --phone-safe-bottom:var(--rottami-safe-bottom,0px)!important; --phone-safe-left:var(--rottami-safe-left,0px)!important; }
html[data-rottami-rotated="true"]:has(body.in-field),html[data-rottami-rotated="true"]:has(body.in-arena) { background:#304447; }
/* I dialog showModal appartengono al top layer e non seguono la trasformazione
   dei loro antenati. Il centro fisico corrisponde al centro del piano logico. */
html[data-rottami-rotated="true"] body.phone-game dialog[open] { position:fixed!important; inset:auto!important; left:calc(var(--rottami-physical-left,0px) + var(--rottami-physical-width) / 2 - (var(--phone-safe-top,0px) - var(--phone-safe-bottom,0px)) / 2)!important; top:calc(var(--rottami-physical-top,0px) + var(--rottami-physical-height) / 2 + (var(--phone-safe-left,0px) - var(--phone-safe-right,0px)) / 2)!important; width:min(700px,calc(var(--rottami-width) - var(--phone-safe-left,0px) - var(--phone-safe-right,0px) - 16px))!important; max-width:calc(var(--rottami-width) - var(--phone-safe-left,0px) - var(--phone-safe-right,0px) - 16px)!important; max-height:calc(var(--rottami-height) - var(--phone-safe-top,0px) - var(--phone-safe-bottom,0px) - 16px)!important; min-height:0!important; margin:0!important; transform-origin:center!important; transform:translate(-50%,-50%) rotate(90deg)!important; box-sizing:border-box; }
html[data-rottami-rotated="true"] body.phone-game :is(#engineer-dialog,#workshop-dialog)[open] { width:calc(var(--rottami-width) - var(--phone-safe-left,0px) - var(--phone-safe-right,0px) - 12px)!important; height:calc(var(--rottami-height) - var(--phone-safe-top,0px) - var(--phone-safe-bottom,0px) - 12px)!important; max-width:none!important; max-height:none!important; }
html[data-rottami-rotated="true"] body.phone-game #tutorial-dialog[open] { left:calc(var(--rottami-physical-left,0px) + var(--rottami-physical-width) / 2)!important; top:calc(var(--rottami-physical-top,0px) + var(--rottami-physical-height) / 2)!important; width:var(--rottami-width)!important; height:var(--rottami-height)!important; max-width:none!important; max-height:none!important; }
html[data-rottami-rotated="true"] body.phone-game dialog::backdrop { position:fixed; inset:auto; left:var(--rottami-physical-left,0px); top:var(--rottami-physical-top,0px); width:var(--rottami-physical-width); height:var(--rottami-physical-height); }