/* Celular. Todo cuelga de html.touch (lo pone js/input/touch.js), así que en escritorio no cambia nada.
   Vertical: canvas arriba; debajo la franja de ping/lista; y en la zona negra la cruceta (izquierda) y los botones (derecha).
   Horizontal: cruceta | canvas | botones. */

#dpad, #actions, #chatBar { display: none; }

html.touch, html.touch * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
html.touch #chatInput, html.touch #vgInput { font-size: 16px; } /* menos de 16px y iOS hace zoom al escribir */

/* Ya dentro del mundo: pantalla fija, sin scroll ni zoom. */
html.touch.in-world,
html.touch.in-world body {
  height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none;
  background: #000; touch-action: none;
  -webkit-user-select: none; user-select: none;
}
html.touch.in-world body { display: block; min-height: 0; }
html.touch.in-world main { height: 100%; text-align: initial; }

html.touch.in-world #world {
  position: fixed; inset: 0; background: #000;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "view view" "hud hud" "dpad actions";
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

html.touch.in-world canvas#view { grid-area: view; margin: 0; touch-action: none; image-rendering: pixelated; }

/* Franja de ping / estado / jugadores */
html.touch.in-world #hudBox {
  grid-area: hud; min-height: 0; overflow: hidden;
  padding: 4px 10px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 12px;
}
html.touch.in-world #hudBox .hud, html.touch.in-world #hudBox #status { margin: 0; font-size: 12px; }
html.touch.in-world #playerList { margin: 0; font-size: 12px; max-height: 2.6em; overflow-y: auto; touch-action: pan-y; }

/* Cruceta */
html.touch.in-world #dpad {
  grid-area: dpad; place-self: center; display: block; position: relative;
  width: var(--ctl, 160px); height: var(--ctl, 160px);
  border: 3px solid #fff; border-radius: 50%; background: #0a0a0a; touch-action: none;
}
html.touch.in-world #dpad::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 24%; height: 24%;
  transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 50%; opacity: .35;
}
#dpad .dp { position: absolute; background: #fff; opacity: .45; }
#dpad .up    { left: 35%; top: 8%;    width: 30%; height: 26%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
#dpad .down  { left: 35%; bottom: 8%; width: 30%; height: 26%; clip-path: polygon(0 0, 100% 0, 50% 100%); }
#dpad .left  { left: 8%;  top: 35%;   width: 26%; height: 30%; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
#dpad .right { right: 8%; top: 35%;   width: 26%; height: 30%; clip-path: polygon(0 0, 100% 50%, 0 100%); }
#dpad.u .up, #dpad.d .down, #dpad.l .left, #dpad.r .right { background: var(--accent, #ffe600); opacity: 1; }

/* Botones */
html.touch.in-world #actions {
  grid-area: actions; place-self: center; display: grid;
  grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 6px; /* 3 columnas: 1 2 V / C TAB P / Y X */
  width: var(--ctl, 160px); height: var(--ctl, 160px);
}
html.touch .act, html.touch #chatBar button {
  font-family: 'Determination', monospace; font-size: 14px; color: #fff; background: #000;
  border: 3px solid #fff; border-radius: 14px; padding: 0; touch-action: none; cursor: default;
}
html.touch .act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; }
html.touch .act b { font-size: calc(var(--ctl, 160px) * .13); font-weight: 400; line-height: 1; }
html.touch .act small { font-size: calc(var(--ctl, 160px) * .055); opacity: .8; letter-spacing: .5px; }
html.touch .act.run { border-color: var(--accent, #ffe600); color: var(--accent, #ffe600); }
html.touch .act:active, html.touch .act.on { background: var(--accent, #ffe600); border-color: var(--accent, #ffe600); color: #000; }

/* Mientras escribes: los controles de juego se apagan y aparece la barra del chat sobre la franja de ping */
html.touch.in-world.chatting #dpad,
html.touch.in-world.chatting #actions { opacity: .2; pointer-events: none; }
html.touch.in-world #chatBar {
  grid-area: hud; z-index: 2; background: #000; align-items: center; gap: 6px; padding: 4px 8px;
}
html.touch.in-world.chatting #chatBar { display: flex; }
html.touch #chatBar button { height: 40px; min-width: 40px; padding: 0 8px; }
html.touch #chatBar .go { flex: 1; border-color: var(--accent, #ffe600); color: var(--accent, #ffe600); }
html.touch #chatBar button:active { background: #fff; color: #000; }

/* Horizontal: cruceta | canvas | botones */
@media (orientation: landscape) {
  /* Botones en 2 columnas: TAB arriba (ancho), 1 2 / V C / Y X, y P abajo (centrado) */
  html.touch.in-world #actions {
    grid-template-columns: 1fr 1fr; gap: 8px;
    width: calc(var(--ctl, 160px) * .66); height: min(calc(var(--ctl, 160px) * 1.7), 94vh);
  }
  html.touch.in-world .act[data-code="Tab"], html.touch.in-world .act[data-code="KeyP"] { grid-column: 1 / -1; justify-self: center; width: 76%; }
  html.touch.in-world .act[data-code="Tab"] { order: -1; }
  html.touch.in-world .act[data-code="KeyP"] { order: 99; }
  html.touch.in-world #world {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "dpad view actions" "dpad hud actions";
    align-content: center; /* canvas + franja de ping quedan centrados en vertical */
    align-items: start;
  }
  html.touch.in-world #dpad, html.touch.in-world #actions { align-self: center; }
  html.touch.in-world canvas#view { justify-self: center; }
  html.touch.in-world #hudBox { justify-content: center; padding: 2px 6px; }
  html.touch.in-world #playerList { display: none; }
}

/* Mesa de UNO (html.seated lo pone touch.js): Z jugar y ESC levantarse reemplazan a disfraz y emote; X pasa a robar/pasar */
html.touch .act.uno-only, html.touch .lbl-uno { display: none; }
html.touch.seated .act.uno-only { display: flex; }
html.touch.seated .act.no-uno, html.touch.seated .lbl-run { display: none; }
html.touch.seated .lbl-uno { display: block; }
html.touch .lbl-bingo, html.touch .lbl-circle, html.touch .lbl-truco { display: none; }
html.touch.seated[data-table=bingo] .lbl-uno { display: none; }
html.touch.seated[data-table=bingo] .lbl-bingo { display: block; }
html.touch.seated[data-table=truco] .lbl-uno { display: none; }
html.touch.seated[data-table=truco] .lbl-truco { display: block; } /* mesa de truco: X = menú de cantos */
html.touch.seated[data-table=impostor] .lbl-uno { display: none; }
html.touch.seated[data-table=impostor] .lbl-circle { display: block; } /* mesa circular: X = borrador (Garabatos) o elegir otro juego */
/* Parado sobre un asiento libre: Z reemplaza a DISFRAZ */
html.touch.atseat .act.uno-z { display: flex; }
html.touch.atseat .act.d1 { display: none; }

/* Selector de vessels (html.menu lo pone touch.js): se ven solo Z (OK) y X (BACK); la cruceta mueve el cursor */
html.touch .act.menu-only { display: none; }
html.touch.menu .act { display: none; }
html.touch.menu #actions { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); width: var(--ctl, 160px); height: var(--ctl, 160px); } /* en el menú: X (atrás) a la izquierda, Z (OK) a la derecha */ /* Z y X quedan del tamaño de siempre, no gigantes (si no, al cerrar el menú el dedo cae sobre otro botón) */
html.touch.menu .act.menu-only { display: flex; }
html.touch.menu .act.menu-only b { font-size: calc(var(--ctl, 160px) * .17); }

/* Pantalla completa (si el navegador la permite) */
#fsBtn { display: none; }
html.touch.in-world:not(.fs) #fsBtn:not([hidden]) {
  display: block; font-family: 'Determination', monospace; font-size: 12px; padding: 3px 8px; margin: 0;
  border: 2px solid var(--accent, #ffe600); border-radius: 8px; color: var(--accent, #ffe600); background: #000;
}