/* 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; }
/* teléfono: nada se encima. Zoom arriba a la izquierda, chat flotante sobre los botones de acción, barra de chat y aviso arriba (el teclado tapa lo de abajo) */
html.touch #zoom { bottom: auto; top: calc(66px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left)); right: auto; }
html.touch #bubble { right: calc(14px + env(safe-area-inset-right)); bottom: calc(var(--tbar, 90px) + 160px + env(safe-area-inset-bottom)); }
html.touch #chatbar { bottom: auto; top: calc(10px + env(safe-area-inset-top)); width: calc(100% - 20px); z-index: 9; }
html.touch #hint { bottom: auto; top: calc(112px + env(safe-area-inset-top)); max-width: calc(100% - 28px); text-align: center; white-space: normal; z-index: 5; }
html.touch #emopick, html.touch #holdpick, html.touch #setmenu { bottom: calc(var(--tbar, 90px) + 14px + env(safe-area-inset-bottom)); max-height: 55vh; overflow: auto; z-index: 8; }
html.touch body:has(#chatbar[style*="flex"]) #petchip { display: none; }