/* Mobile controls stay clear of the playfield in either orientation. */
.playing #touch{left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));justify-content:space-between;align-items:center;pointer-events:none;opacity:.92;gap:0;}
#touch #touch-joystick{position:relative;display:grid;place-items:center;width:126px;height:126px;flex-shrink:0;border:2px solid #9bacce77;border-radius:50%;background:radial-gradient(circle,#32425b99,#111a2cbb);box-shadow:inset 0 0 25px #0006,0 5px 22px #0005;touch-action:none;user-select:none;pointer-events:auto;}
.joystick-guide{font:74px/1 sans-serif;color:#bdc9e533;pointer-events:none;}
.joystick-stick{position:absolute;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#8799b7,#35455e);border:2px solid #c0d0e4aa;box-shadow:0 5px 12px #0008;pointer-events:none;}
#touch .touch-actions{display:flex;gap:16px;align-items:center;pointer-events:none;}
.playing #touch .touch-actions button{width:68px;height:68px;min-width:68px;border:2px solid #ffc1d4aa;border-radius:50%;background:radial-gradient(circle at 30% 20%,#a44a7e,#512654);color:#fff2ca;box-shadow:0 6px 0 #251329,0 7px 20px #0007;font:24px/1 var(--pixel);padding:0;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;}
.playing #touch #touch-a{margin-top:-38px;border-color:#aaf3e4aa;background:radial-gradient(circle at 30% 20%,#357e82,#1d3a58);}
.playing #touch button.is-held{filter:brightness(1.3);transform:translateY(4px);box-shadow:0 2px 0 #251329;}
@media(any-pointer:coarse),(max-width:750px){
 .playing #touch{display:flex;}
 .playing .topbar{top:max(8px,env(safe-area-inset-top));}
 .playing #online-strip{bottom:auto;top:52px;right:12px;}
 .playing #chat-game{bottom:174px;max-height:120px;width:min(300px,calc(100vw - 24px));min-height:58px;}
}
@media(orientation:portrait) and (max-width:750px){
 .playing #play-screen #stage,.playing #play-screen:fullscreen #stage{top:calc(65px + (100dvh - 260px)/2);width:min(100vw,calc((100dvh - 260px)*1.6));height:auto;aspect-ratio:1.6;}
 .playing #touch{bottom:max(32px,env(safe-area-inset-bottom));}
 .playing #chat-game{bottom:190px;max-height:90px;}
 .right-menu{max-width:100%;}.topbar{max-width:100%;}
}
@media(orientation:landscape) and (any-pointer:coarse){
 .playing #play-screen #stage,.playing #play-screen:fullscreen #stage{width:min(calc(100vw - 270px),calc((100dvh - 46px)*1.6));height:auto;aspect-ratio:1.6;}
 #touch #touch-joystick{width:108px;height:108px;}
 .playing #touch .touch-actions button{width:58px;height:58px;min-width:58px;font-size:21px;}
 #touch .touch-actions{gap:10px;flex-direction:column-reverse;}
 .playing #touch #touch-a{margin-top:0;margin-left:14px;}
 .playing #touch{bottom:24px;}
 .playing #chat-game{left:50%;right:auto;transform:translateX(-50%);bottom:5px;width:min(320px,40vw);max-height:80px;min-width:160px;}
}
.sheet-card:has(#skins-graphics:not([hidden])) #sheet-tabs{height:auto!important;min-height:0!important;max-height:50px;align-items:flex-start;align-self:stretch;}
.sheet-card:has(#skins-graphics:not([hidden])) #sheet-tabs button{height:auto;min-height:0;max-height:48px;flex:0 1 auto;}
.sheet-card:has(#skins-graphics[data-standalone=true]) #sheet-tabs,#skins-graphics[data-standalone=true] .world-intro,#skins-graphics[data-standalone=true] .world-preview-note{display:none!important;}
@media(orientation:landscape) and (max-height:550px){.sheet:has(#skins-graphics:not([hidden])){padding:8px;align-items:center}.sheet-card:has(#skins-graphics:not([hidden])){margin:0;max-height:calc(100dvh - 16px);padding:12px;transform:none;animation:none}#skins-graphics .world-option img{height:clamp(45px,calc(100dvh - 250px),100px)}}