/* Modo táctil: solo se activa con html.touch (lo pone touch.js en dispositivos touch) */
html.touch, html.touch body { touch-action: manipulation; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
html.touch input, html.touch textarea { -webkit-user-select: text; user-select: text; font-size: 16px; }
html.touch #stage, html.touch #wrap, html.touch canvas#c, html.touch #mini { touch-action: none; }
html.touch #app { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); padding-top: max(10px, env(safe-area-inset-top)); }
html.touch #roomchip { top: calc(14px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left)); }
html.touch #status { top: calc(14px + env(safe-area-inset-top)); }
html.touch #bar { max-width: calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
html.touch #bar button, html.touch #zoom button, html.touch #setmenu button, html.touch #bubbtn, html.touch .bt button, html.touch #tvclose, html.touch #emopick button, html.touch #holdpick button, html.touch #decor button, html.touch dialog button { min-height: 44px; min-width: 44px; }
html.touch #zoom { right: calc(14px + env(safe-area-inset-right)); }
html.touch #zoom button { width: 44px; height: 44px; }
html.touch #bubkeys .tch { display: block; }
/* joystick y botones de acción */
#tjoy, #tact { display: none; }
html.touch #tjoy, html.touch #tact { display: block; position: absolute; z-index: 6; touch-action: none; }
html.touch.nologin #tjoy, html.touch.nologin #tact, html.touch.decorating-on #tjoy, html.touch.decorating-on #tact, html.touch.dlg-on #tjoy, html.touch.dlg-on #tact { display: none; }
#tjoy { left: calc(18px + env(safe-area-inset-left)); bottom: calc(var(--tbar, 90px) + 18px + env(safe-area-inset-bottom)); width: 124px; height: 124px; border-radius: 50%; background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.55); backdrop-filter: blur(6px); }
#tjoy i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(122,92,255,.85); border: 2px solid #fff; box-shadow: 0 6px 16px rgba(34,24,80,.4); }
#tact { right: calc(14px + env(safe-area-inset-right)); bottom: calc(var(--tbar, 90px) + 18px + env(safe-area-inset-bottom)); display: none; }
html.touch #tact { display: grid; grid-template-columns: repeat(2, 60px); gap: 10px; }
#tact button { width: 60px; height: 60px; min-width: 60px; border-radius: 50%; border: 2px solid #fff; background: rgba(74,79,122,.92); color: #fff; font: 700 11px/1.1 system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 6px 16px rgba(34,24,80,.4); padding: 0; }
#tact button b { font-size: 20px; line-height: 1; }
#tact button:active { transform: scale(.92); background: #6c5ce7; }
html.touch #hint, html.touch #emopick, html.touch #holdpick, html.touch #setmenu { }
html.touch #zoom { bottom: calc(var(--tbar, 90px) + 166px + env(safe-area-inset-bottom)); }
html.touch #tact { bottom: calc(var(--tbar, 90px) + 18px + env(safe-area-inset-bottom)); }
html.touch #status { top: calc(70px + env(safe-area-inset-top)); max-width: calc(100% - 28px); text-align: center; }