html,body{margin:0;height:100%;background:#07051a;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#game{width:min(100vw,177.78vh);height:min(56.25vw,100vh);image-rendering:pixelated;background:#000;box-shadow:0 0 60px #6a1bff55}
/* Controles táctiles: el tamaño se adapta al ancho de la pantalla */
#touch{--b:min(64px,14.5vw);position:fixed;inset:0;pointer-events:none}
#touch button{pointer-events:auto;position:absolute;border:2px solid #ffffff66;background:#ffffff1f;color:#fff;font:700 calc(var(--b)*.2) system-ui;border-radius:50%;width:var(--b);height:var(--b);backdrop-filter:blur(2px);padding:0}
#touch button.on{background:#ff3b6b88}
.pad{position:absolute;left:12px;bottom:14px;width:calc(var(--b)*3);height:calc(var(--b)*3)}
.t-up{left:var(--b);top:0}.t-down{left:var(--b);bottom:0}.t-left{left:0;top:var(--b)}.t-right{right:0;top:var(--b)}
.btns{position:absolute;right:12px;bottom:14px;width:calc(var(--b)*3.1);height:calc(var(--b)*3)}
.b-p{left:0;bottom:calc(var(--b)*.35)}.b-k{left:calc(var(--b)*1.05);bottom:0}.b-s{right:0;bottom:calc(var(--b)*.9)}.b-x{left:calc(var(--b)*1.05);bottom:calc(var(--b)*1.1);background:#ffcc3340!important}
.b-start{left:0;top:0;width:calc(var(--b)*1.1)!important;height:calc(var(--b)*.55)!important;border-radius:10px!important}
#rotate{display:none;position:fixed;top:12px;left:50%;transform:translateX(-50%);color:#ffe14a;font:700 15px system-ui;background:#000a;padding:8px 14px;border-radius:20px;pointer-events:none}
@media (orientation:portrait) and (pointer:coarse){#rotate{display:block}}