/* The mobile console is one unit: picture, sound and a real touch controller. */
.file-load-overlay{position:absolute;inset:0;z-index:5;background:#0c1718f5;display:flex;text-align:center;padding:18px;overflow:auto}.file-load-content{margin:auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}.file-load-content>.title-icon{color:var(--mint)}.file-load-overlay strong{font-weight:550;font-size:20px}.file-load-overlay p{max-width:360px;margin:0;color:var(--muted);font-size:12px;line-height:1.7}.file-load-overlay.error .title-icon{color:var(--orange)}.file-load-overlay button{min-height:40px}.file-load-overlay #file-dismiss{border:0;background:transparent;color:var(--muted);font-size:11px}
.file-load-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.file-load-actions:has(>button:not([hidden])){flex-shrink:0}.file-load-actions button{font-size:11px;padding:8px 12px}.file-load-overlay details{width:min(100%,360px);font-size:11px;text-align:left}.file-load-overlay summary{cursor:pointer;color:var(--muted);text-align:center}.file-load-overlay textarea{width:100%;height:92px;min-height:60px;margin-top:8px;padding:8px;resize:none;font:10px/1.5 ui-monospace,monospace;text-align:left;user-select:text}
.file-native-choice{width:min(100%,360px);display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:9px;font-size:11px;text-align:left}.file-native-choice label{color:var(--muted)}.file-native-choice input{width:100%;min-width:0;font-size:11px;padding:0;border:0;background:transparent}.file-native-choice input::file-selector-button{background:var(--mint);border:0;border-radius:6px;padding:9px 12px;margin-right:8px;color:#10201c;cursor:pointer}.file-native-choice a{color:var(--muted);font-size:10px}
.pause-overlay{gap:12px;padding:16px;text-align:center}.pause-overlay>.pause-symbol{font-size:30px}.pause-overlay strong{font-size:22px}.pause-context{max-width:330px;margin:0;color:#b6c8c0;font-size:12px;line-height:1.6}.pause-players{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.pause-players span{border:1px solid #46594f;border-radius:20px;padding:6px 10px;font-size:10px;color:#a6b9b0}.pause-players span.ready{background:#a7d1b91a;border-color:#a7d1b9;color:#d4e9d9}.pause-overlay>.primary{min-height:44px;min-width:176px;font-size:13px}.pause-overlay .cancel-resume{border:0;background:transparent;padding:5px;color:#afbeb5;font-size:10px;min-height:32px}
.controller-settings>summary{display:none}
.touch-controls{--dpad-size:clamp(112px,calc(var(--portable-width)*.34),146px);--touch-key:clamp(44px,calc(var(--portable-width)*.125),54px);padding:13px 16px 10px;background:linear-gradient(145deg,#263137,#1b252b 65%,#222c33);border:1px solid #435158;border-top:0;border-radius:0 0 22px 22px;box-shadow:inset 0 1px #62717544,inset 0 -5px #0a121733;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y pinch-zoom}
.touch-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px;margin-bottom:6px}
.portable-brand{display:flex;align-items:center;gap:6px;font-size:11px;font-style:italic;font-weight:750;letter-spacing:1.2px;color:#d0d7d9}
.portable-brand>span{font-size:8px;font-weight:450;letter-spacing:1.5px;color:#93a7a5}
.portable-brand>i{width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 6px #a7d1b940}
#touch-player{height:44px;width:110px;flex:0 0 110px;min-width:92px;padding:7px 22px 7px 9px;border:1px solid #59686d;border-radius:6px;background:#152026;color:#d0dcd7;font:inherit;font-size:11px}
#touch-role{font-size:11px;color:var(--mint)}
.touch-main{display:flex;justify-content:space-between;align-items:center;gap:10px;max-width:430px;margin:0 auto}
.touch-dpad{position:relative;flex:0 0 var(--dpad-size);width:var(--dpad-size);height:var(--dpad-size);touch-action:none}
.touch-disc{position:absolute;inset:2px;border-radius:50%;background:linear-gradient(145deg,#141c23,#34414b);border:1px solid #63717d;box-shadow:inset 0 2px 5px #080f17b0,0 1px #acb7ba1a;pointer-events:none}
.touch-cross{position:absolute;inset:14%;clip-path:polygon(32% 0,68% 0,68% 32%,100% 32%,100% 68%,68% 68%,68% 100%,32% 100%,32% 68%,0 68%,0 32%,32% 32%);background:linear-gradient(145deg,#66717c,#303c47);filter:drop-shadow(0 3px 1px #070d15);pointer-events:none}
.touch-direction{position:absolute;z-index:1;border:0;border-radius:6px;background:transparent!important;padding:0!important;width:38%;height:38%;min-height:44px;min-width:44px;display:grid;place-items:center;color:#1d2933!important;touch-action:none}
.touch-direction>span{font-size:15px;line-height:1;text-shadow:0 1px #9ba6af44}
.touch-up{left:31%;top:5%}.touch-down{left:31%;bottom:5%}.touch-left{left:5%;top:31%}.touch-right{right:5%;top:31%}
.touch-direction.held{color:#ffcb9d!important;background:#ffb06d30!important;box-shadow:inset 0 0 0 1px #ffca9055}
.touch-pivot{position:absolute;inset:41%;border-radius:50%;z-index:2;pointer-events:none;background:radial-gradient(circle at 35% 25%,#63717d,#27333e 65%);box-shadow:0 1px 3px #080e18}
.touch-action-pad{display:grid;grid-template-columns:repeat(3,var(--touch-key));gap:5px 3px;transform:rotate(-11deg);padding:12px 0}
.touch-button{width:var(--touch-key);height:var(--touch-key);border:1px solid #7d8994;border-radius:50%;background:radial-gradient(circle at 35% 25%,#65717e,#37434e 68%,#29343e)!important;color:#e7e8ea!important;box-shadow:0 4px 0 #101924,0 0 0 3px #111a22,0 5px 6px #060b1266,inset 0 1px #a3afb055;padding:0!important;display:grid;place-items:center;touch-action:none}
.touch-button>span{font-size:18px;font-weight:650;transform:rotate(11deg);text-shadow:0 1px 1px #0b131c}
.touch-button.touch-small{background:radial-gradient(circle at 35% 25%,#556371,#303e4b 68%,#26333f)!important}
.touch-button.touch-small>span{font-size:15px}
.touch-button.held{background:radial-gradient(circle at 35% 25%,#bd946e,#7a593e 75%)!important;border-color:#ffcf9c;box-shadow:0 1px 0 #101924,0 0 0 3px #111a22,inset 0 2px 4px #37251799;translate:0 3px}
.touch-bottom{display:flex;align-items:center;justify-content:center;position:relative;min-height:48px;margin-top:2px}
.touch-system{display:flex;gap:13px}
.touch-system button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:52px;min-height:44px;padding:3px 4px!important;border:0;background:transparent!important;color:#a7b7b9;font-size:8px;letter-spacing:1.2px;touch-action:none}
.touch-system button>span{width:38px;height:13px;background:linear-gradient(#8c86d6,#625ca9);border:1px solid #a8a0e4;border-radius:9px;box-shadow:0 3px 0 #111824,0 0 0 3px #152029;transform:rotate(-9deg)}
.touch-system button.held>span{background:#c4a8e6;box-shadow:0 1px 0 #111824,0 0 0 3px #152029;translate:0 2px}
.portable-vents{display:flex;gap:4px;position:absolute;right:5px;bottom:9px;transform:rotate(-22deg)}
.portable-vents i{width:3px;height:23px;border-radius:2px;background:#101a22;box-shadow:1px 0 #73858b44}
.touch-hint{text-align:center;min-height:15px;margin:5px 0 0;color:#9eb2b1;font-size:9px;line-height:1.6}
.touch-controls.is-disabled .touch-main,.touch-controls.is-disabled .touch-system{opacity:.52}
.touch-controls button:disabled{opacity:1;cursor:default}
.touch-controls button:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.touch-mode main{padding:14px max(12px,env(safe-area-inset-left)) 0}
.touch-mode .workspace{grid-template-columns:minmax(0,1fr);gap:14px}
.touch-mode .workspace>aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.touch-mode .workspace>aside .room-panel{grid-column:auto;grid-row:auto}
.touch-mode .screen{max-height:none;min-height:0;aspect-ratio:4/3}
.touch-mode .console-controls{border-radius:0;border-bottom-color:#465358;flex-wrap:nowrap;padding:5px 7px;min-height:48px;gap:4px}
.touch-mode .console-controls .transport{gap:0}
.touch-mode .console-controls .transport button{min-height:40px;padding:6px;font-size:10px}
.touch-mode .console-controls .transport .icon-button{font-size:18px}
.touch-mode .console-controls #save,.touch-mode .console-controls #restore{font-size:0;min-width:32px}.touch-mode #save:before{content:'↓';font-size:17px}.touch-mode #restore:before{content:'↑';font-size:17px}
.touch-mode .console-controls .icon-button,.touch-mode .sound-toggle{min-width:34px;min-height:40px}
.touch-mode .console-controls .divider{display:none}
.touch-mode .console-controls .game-volume input{width:55px}
.touch-mode .console-controls .game-volume output{display:none}
.touch-mode .controller-settings{border:1px solid var(--line);border-radius:10px;background:#182123;margin:4px 0 0;padding:0 12px}
.touch-mode .controller-settings>summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;font-size:11px;color:#c5d5ce}
.controller-settings>summary::-webkit-details-marker{display:none}
.controller-settings>summary:after{content:none}
.controller-settings>summary>span{display:flex;align-items:center;gap:7px}
.controller-settings>summary svg{width:15px;height:15px}
.controller-settings-toggle{font-size:10px;color:var(--muted)}
.controller-settings[open] .controller-settings-toggle svg{transform:rotate(180deg)}
.touch-mode .controller-settings .players-heading{display:none}
.touch-mode .controller-settings .players{padding:2px 0 12px}
.touch-mode .players .controller-map svg{height:155px}
.game-console:fullscreen .exit-fullscreen,.game-console.expanded .exit-fullscreen{display:block}
body.console-expanded{overflow:hidden}
.game-console.expanded{position:fixed;inset:0;z-index:50}
.touch-mode .game-console:fullscreen,.touch-mode .game-console.expanded{width:100%;height:100dvh;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:#101719;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto}
.touch-mode .game-console>*{min-width:0}
.touch-mode .game-console:fullscreen .screen,.touch-mode .game-console.expanded .screen{aspect-ratio:auto;max-height:none;min-height:0}
.touch-mode .game-console:fullscreen .touch-controls,.touch-mode .game-console.expanded .touch-controls{width:100%;max-width:540px;justify-self:center}
@media(max-width:520px){
  .touch-mode .topbar{height:58px;padding:0 16px;gap:12px}
  .touch-mode .workspace>aside{grid-template-columns:minmax(0,1fr)}
  .touch-mode .screen-top{padding:9px 11px;font-size:10px}
  .touch-mode .screen-empty h2{font-size:17px;margin-top:9px}
  .touch-mode .screen-empty p{font-size:10px}
  .touch-mode .sega-cartridge{width:148px!important}
  .touch-mode .screen-empty>.primary{min-height:40px;margin-top:10px}
  .touch-mode .notice{font-size:10px;min-height:0;padding:9px 2px}
}
@media(max-width:360px){
  .touch-controls{padding-left:12px;padding-right:12px}
  .portable-brand{font-size:10px;gap:4px}.portable-brand>span{font-size:7px;letter-spacing:.8px}
  .touch-mode .console-controls .transport button{font-size:9px;padding:5px 3px}
  .touch-mode .game-volume input[type=range]{width:42px}
  .touch-mode .console-controls .icon-button,.touch-mode .console-controls .sound-toggle{min-width:28px;padding:3px}
  .touch-mode .screen-empty .sega-cartridge{width:120px!important}
  .touch-mode .screen-empty p{display:none}
  .touch-mode .console-controls #save,.touch-mode .console-controls #restore{font-size:0;min-width:30px}
  .touch-mode #save:before{content:'↓';font-size:17px}.touch-mode #restore:before{content:'↑';font-size:17px}
}
/* Three physical zones: the picture spans the full height; tools live in the right wing. */
.console-viewport{display:contents}.console-viewport:fullscreen{display:block;background:#101719;width:100vw;height:100dvh;overflow:hidden}
.console-controls .exit-fullscreen{position:static;display:inline-grid;place-items:center;padding:5px;font-size:0;background:transparent;z-index:auto}
.console-controls .exit-fullscreen svg{width:21px;height:21px}
.game-console,.screen,.screen canvas,.screen-empty{touch-action:pan-y pinch-zoom}
.touch-controls.is-disabled .touch-dpad,.touch-controls.is-disabled [data-touch-action]{touch-action:pan-y pinch-zoom}
.touch-controls.is-disabled .touch-dpad{pointer-events:auto}
#touch-player{width:88px;min-width:76px;flex-basis:88px;height:36px;font-size:11px;padding:5px 18px 5px 8px}
.portable-voice{position:relative;display:flex;gap:4px;align-items:center;flex-shrink:0;z-index:8}
.portable-voice .portable-voice-button{position:relative;display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:8px;border:1px solid #50635e;background:#182725;color:#b8d6c7;border-radius:9px;touch-action:manipulation}
.portable-voice-button svg{width:19px;height:19px}.portable-voice-button i{position:absolute;right:4px;top:4px;width:5px;height:5px;border-radius:50%;background:#738780}
.portable-voice-button.connected{background:#a7d1b91c;border-color:#89b49d}.portable-voice-button.connected i{background:#b8e7cc}
.portable-voice-button.waiting{border-color:var(--orange);color:var(--orange)}.portable-voice-button.waiting i{background:var(--orange);box-shadow:0 0 0 3px #ffb06d20}.portable-voice-button.error{border-color:#bb7368}
.portable-voice-button[aria-pressed=true]{color:var(--orange);border-color:#9b7654}.portable-voice .portable-voice-button:disabled{opacity:.4}
.portable-voice-panel{position:absolute;bottom:calc(100% + 9px);right:0;width:228px;max-height:240px;overflow:auto;padding:12px;border:1px solid #65796f;border-radius:12px;background:#16231ff5;box-shadow:0 8px 30px #0009;text-align:left;font-size:11px;color:#c8ded3;touch-action:pan-y}
.portable-voice-caption{display:flex;align-items:center;justify-content:space-between;gap:8px}.portable-voice-caption strong{font-size:12px;font-weight:550}.portable-voice-caption button{width:32px;height:32px;min-height:32px;padding:0;border:0;background:transparent;font-size:20px}
.portable-voice-panel p{font-size:11px;line-height:1.5;color:#b7c9c0;margin:7px 0 12px}.portable-voice-panel label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px}.portable-voice-panel input{width:100%;height:36px;accent-color:var(--mint);margin:0}.portable-voice-panel #portable-voice-play{width:100%;font-size:11px;min-height:36px;margin-top:7px}
.touch-mode .game-console.expanded:not(.landscape){grid-template-rows:auto auto auto auto;align-content:center}
.touch-mode .expanded:not(.landscape)>.screen-top,.touch-mode .expanded:not(.landscape)>.screen,.touch-mode .expanded:not(.landscape)>.console-controls{width:100%;max-width:540px;justify-self:center}
.touch-mode .game-console.expanded:not(.landscape)>.screen{aspect-ratio:4/3;height:auto}
body:not(.touch-mode) .game-console.expanded{display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#101719}
.touch-mode .game-console.landscape{--wing:clamp(124px,calc(var(--portable-width)*.17),152px);--right-wing:clamp(172px,calc(var(--portable-width)*.21),190px);display:grid;grid-template-columns:var(--wing) minmax(0,1fr) var(--right-wing);grid-template-rows:124px minmax(102px,1fr) 48px;gap:0 10px;height:calc(100svh - 82px);min-height:304px;max-height:680px;background:linear-gradient(140deg,#253039,#19242b 60%,#253039);border:1px solid #435158;border-radius:18px;padding:8px}
.touch-mode .landscape>.screen-top{display:none}
.touch-mode .landscape>.screen{grid-column:2;grid-row:1/-1;aspect-ratio:auto;height:100%;min-height:0;max-height:none;border:0;border-radius:7px}
.touch-mode .landscape>.console-controls{grid-column:3;grid-row:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:40px 40px 36px;gap:2px;border:0;border-radius:0;background:transparent;padding:0;min-height:0;align-self:start}
.touch-mode .landscape .transport,.touch-mode .landscape .display-controls,.touch-mode .landscape .game-volume{display:contents}
.touch-mode .landscape .console-controls .divider,.touch-mode .landscape .game-volume output{display:none}
.touch-mode .landscape .console-controls button{min-width:0;width:100%;height:40px;min-height:40px;padding:5px;border:1px solid #52625f;border-radius:8px;background:#15202180;font-size:18px;display:grid;place-items:center}
.touch-mode .landscape .console-controls button[aria-pressed=true]{color:var(--orange);border-color:#bd8b62;background:#ffb06d12}
.touch-mode .landscape #layout-toggle{grid-column:1;grid-row:1}.touch-mode .landscape #fullscreen{grid-column:2;grid-row:1}.touch-mode .landscape #mute{grid-column:3;grid-row:1}.touch-mode .landscape #exit-fullscreen{grid-column:4;grid-row:1;position:static}
.touch-mode .landscape #pause{grid-column:1;grid-row:2}.touch-mode .landscape #reset{grid-column:2;grid-row:2}.touch-mode .landscape #save{grid-column:3;grid-row:2}.touch-mode .landscape #restore{grid-column:4;grid-row:2}
.touch-mode .landscape .console-controls #save,.touch-mode .landscape .console-controls #restore,.touch-mode .landscape #exit-fullscreen{font-size:0}
.touch-mode .landscape #exit-fullscreen:before{content:none}
.touch-mode .landscape .console-controls #game-volume{grid-column:1/-1;grid-row:3;width:100%;height:28px;align-self:center;margin:0 3px;max-width:calc(100% - 6px)}
.touch-mode .landscape .touch-controls{display:contents;--dpad-size:clamp(108px,calc(var(--portable-width)*.155),136px);--touch-key:clamp(44px,calc(var(--portable-width)*.053),50px)}
.touch-mode .landscape .touch-main{display:contents}
.touch-mode .landscape .touch-dpad{grid-column:1;grid-row:1/-1;align-self:center;justify-self:center}
.touch-mode .landscape .touch-action-pad{grid-column:3;grid-row:2;align-self:center;justify-self:center;gap:5px 3px}
.touch-mode .landscape .touch-heading{grid-column:1;grid-row:1;min-height:40px;margin:0;align-self:start;justify-content:center}
.touch-mode .landscape .portable-brand,.touch-mode .landscape .portable-vents,.touch-mode .landscape .touch-hint{display:none}
.touch-mode .landscape #touch-player{height:36px;width:82px;flex-basis:82px;font-size:10px;padding:5px 6px}
.touch-mode .landscape .portable-voice{gap:2px}.touch-mode .landscape .portable-voice-button{width:38px;height:40px;min-height:40px;padding:7px}
.touch-mode .landscape .portable-voice-panel{bottom:auto;top:0;left:calc(100% + 10px);right:auto;width:min(228px,calc(var(--portable-width) - var(--wing) - var(--right-wing) - 40px));max-height:calc(var(--portable-height) - 32px)}
.touch-mode .landscape .touch-bottom{grid-column:3;grid-row:3;margin:0;min-height:44px;align-self:end}
.touch-mode .landscape .touch-system{gap:9px}
.touch-mode .game-console.landscape.expanded{grid-template-columns:var(--wing) minmax(0,1fr) var(--right-wing);grid-template-rows:124px minmax(102px,1fr) 48px;height:100dvh;max-height:none;min-height:0;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.touch-mode .landscape.expanded .touch-controls{display:contents}
.touch-mode .game-console.manual-rotated.expanded{position:fixed;inset:auto;top:0;left:0;width:var(--portable-width);height:var(--portable-height);max-height:none;min-height:0;transform-origin:0 0;transform:translateY(var(--physical-height)) rotate(-90deg);padding:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom));z-index:50}
.touch-mode .game-console.manual-rotated.rotate-portrait.expanded{transform:translateX(var(--physical-width)) rotate(90deg);padding:max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-top))}
.touch-mode .landscape.compact-landscape .pause-context,.touch-mode .landscape.compact-landscape .pause-players{display:none}
.touch-mode .landscape .file-load-overlay{padding:10px}.touch-mode .landscape .file-load-content{gap:8px}.touch-mode .landscape .file-load-content>.title-icon{display:none}.touch-mode .landscape .file-load-overlay strong{font-size:16px}.touch-mode .landscape .file-load-overlay p{font-size:10px}.touch-mode .landscape .file-load-overlay button{min-height:34px;font-size:11px}
.touch-mode .landscape .screen-empty .sega-cartridge{width:95px!important}.touch-mode .landscape .screen-empty h2{font-size:14px;margin:5px 0}.touch-mode .landscape .screen-empty p{display:none}.touch-mode .landscape .screen-empty>.primary{margin-top:5px;min-height:34px;padding:7px 10px}
.touch-mode .landscape .pause-overlay{padding:10px;gap:8px}.touch-mode .landscape .pause-symbol{display:none}.touch-mode .landscape .pause-overlay strong{font-size:18px}.touch-mode .landscape .pause-context{font-size:10px}.touch-mode .landscape .pause-players span{padding:4px 7px;font-size:9px}.touch-mode .landscape .pause-overlay>.primary{min-height:40px;font-size:12px;min-width:150px}
@media(max-height:520px) and (min-width:500px){.touch-mode .topbar{height:48px}.touch-mode main{padding-top:8px}.touch-mode .game-console.landscape{height:calc(100svh - 66px)}.touch-mode .game-console.landscape.expanded{height:100dvh}}
@media(max-width:360px){.touch-mode .console-controls{flex-wrap:wrap}.touch-mode .console-controls .display-controls{margin-left:auto}.portable-voice-panel{width:208px}}

/* These depend on the logical console width, including a portrait console on a locked landscape display. */
.touch-mode .expanded.compact-portrait>.screen-top{padding:8px 10px;font-size:10px}
.touch-mode .expanded.compact-portrait .console-controls{flex-wrap:nowrap;padding:5px 4px;gap:2px}
.touch-mode .expanded.compact-portrait .transport,.touch-mode .expanded.compact-portrait .display-controls{gap:0}
.touch-mode .expanded.compact-portrait .console-controls button,.touch-mode .expanded.compact-portrait .sound-toggle{min-width:28px;min-height:40px;padding:4px}
.touch-mode .expanded.compact-portrait .console-controls #save,.touch-mode .expanded.compact-portrait .console-controls #restore{min-width:28px}
.touch-mode .expanded.compact-portrait .game-volume.sound-control{gap:0}
.touch-mode .expanded.compact-portrait #game-volume{width:28px}
.touch-mode .expanded.compact-portrait .touch-controls{padding:10px 12px 8px}
.touch-mode .expanded.compact-portrait .touch-heading{min-height:36px;margin-bottom:4px}
.touch-mode .expanded.compact-portrait .touch-hint{display:none}
.touch-mode .expanded.compact-portrait .screen-empty .sega-cartridge{width:120px!important}
.touch-mode .expanded.compact-portrait .screen-empty h2{font-size:17px;margin-top:8px}
.touch-mode .expanded.compact-portrait .screen-empty p{display:none}

.portrait-mode-icon{display:none}.touch-mode .portrait-mode-icon{display:inline-flex}.touch-mode .desktop-mode-icon{display:none}

/* Safari's visible viewport excludes its browser bars. Never size the fallback
   from 100dvh while rotating from visualViewport: those are different rectangles. */
.touch-mode .game-console.expanded{inset:auto;left:var(--viewport-left,0px);top:var(--viewport-top,0px);width:var(--physical-width);height:var(--physical-height)}
.touch-mode .game-console.expanded:not(.landscape){grid-template-rows:auto minmax(0,1fr) auto auto;align-content:stretch}
.touch-mode .game-console.expanded:not(.landscape)>.screen{aspect-ratio:auto;height:100%;min-height:0}
.touch-mode .game-console.landscape.expanded{height:var(--physical-height)}
.touch-mode .game-console.manual-rotated.expanded{left:var(--viewport-left,0px);top:var(--viewport-top,0px);width:var(--portable-width);height:var(--portable-height)}
.fullscreen-help{margin:8px 2px;color:var(--muted);font-size:11px;line-height:1.7}.fullscreen-help summary{cursor:pointer;color:var(--mint)}.fullscreen-help p{max-width:540px;margin:6px 0}
.room-technical pre{white-space:pre-wrap;overflow-wrap:anywhere;font:10px/1.7 ui-monospace,monospace;color:var(--muted)}
.screen-transfer{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;background:#162320f2;border:1px solid #4c6358;border-radius:8px;font-size:11px;text-align:center;line-height:1.5}.screen-transfer button{font-size:11px;min-height:40px;flex-shrink:0}.screen-transfer.error{color:#ffb7a3}.touch-mode .landscape .screen-transfer{left:6px;right:6px;bottom:6px;flex-wrap:wrap;gap:4px;padding:6px;font-size:10px}
.game-console.expanded>.screen{container-type:size}
@container (max-height:240px){.screen-empty .sega-cartridge{width:85px!important}.screen-empty h2{font-size:14px!important;margin:6px 0!important}.screen-empty p{display:none}.screen-empty>.primary{min-height:34px!important;margin-top:6px!important;padding:7px 12px!important}}
