/* Ajustes de la interfaz de HaxBall para pantallas táctiles.
   Se inyecta dentro del game.html del juego (ver server.js). */
@media (pointer: coarse) {
  /* El chat flota sobre el campo en vez de quitarle altura */
  .game-view > .bottom-section {
    position: absolute !important;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(46vw, 480px);
    z-index: 5;
    pointer-events: none;
  }

  .game-view .chatbox-view {
    width: 100% !important;
    min-width: 0 !important;
    height: 96px !important; /* ~4 líneas; anula el alto que guarda el arrastre */
    margin: 0 !important;
  }

  .game-view .chatbox-view-contents {
    background-color: rgba(26, 33, 37, 0.55) !important;
    padding: 4px 8px !important;
    font-size: 12px;
    border-radius: 8px 8px 0 0;
  }

  /* El tirador de redimensionar no sirve en táctil */
  .game-view .chatbox-view-contents > .drag {
    display: none;
  }

  .game-view .chatbox-view-contents > .log {
    pointer-events: auto; /* para poder hacer scroll en el historial */
    scrollbar-width: none;
  }
  .game-view .chatbox-view-contents > .log::-webkit-scrollbar {
    display: none;
  }

  /* El cuadro de escribir solo aparece cuando se está escribiendo */
  .game-view .chatbox-view-contents:not(:focus-within) > .input {
    height: 0 !important;
    margin: 0 !important;
    overflow: hidden;
  }

  /* Mientras se escribe: chat más alto, opaco y con campo grande */
  .game-view .bottom-section:focus-within {
    pointer-events: auto;
  }
  .game-view .bottom-section:focus-within .chatbox-view {
    height: 150px !important;
  }
  .game-view .chatbox-view-contents:focus-within {
    background-color: rgba(26, 33, 37, 0.92) !important;
  }
  .game-view .chatbox-view-contents > .input {
    height: 34px !important;
  }
  .game-view .chatbox-view-contents > .input input[type="text"] {
    font-size: 16px; /* < 16px hace que iOS haga zoom al enfocar */
  }

  /* Ping/FPS: encima del chat y discretos; quitar el hueco lateral */
  .game-view > .bottom-section .stats-view-container {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin: 0;
    opacity: 0.6;
    pointer-events: none;
  }
  .game-view > .bottom-section .bottom-spacer {
    display: none;
  }
}

/* ==========================================================================
   Tema HaxClient para móvil: menús, diálogos, lista de salas y sala.
   Solo CSS: la estructura HTML del juego no se toca.
   ========================================================================== */
@media (pointer: coarse) {
  :root {
    --hx-bg: #0f1519;
    --hx-surface: #182026;
    --hx-surface-2: #232e36;
    --hx-surface-3: #2c3943;
    --hx-field: #0c1114;
    --hx-line: rgba(255, 255, 255, 0.08);
    --hx-text: #e8eef2;
    --hx-muted: #8f9ea8;
    --hx-accent: #3fa7d6;
    --hx-accent-press: #2c8dba;
    --hx-ok: #2f9e5b;
    --hx-danger: #d0494b;
    --hx-red: #e56e56;
    --hx-blue: #5689e5;
    --hx-radius: 14px;
    --hx-btn-h: 40px;
    /* hueco a la izquierda para la barra de botones de HaxClient */
    --hx-left: 52px;
  }

  body {
    background: radial-gradient(120% 120% at 50% 0%, #1a252c 0%, var(--hx-bg) 60%) fixed !important;
    color: var(--hx-text);
    font-size: 15px;
    -webkit-tap-highlight-color: transparent;
  }

  /* ---- Tarjetas / diálogos ---- */

  .dialog,
  .room-view > .container {
    background: var(--hx-surface) !important;
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-radius) !important;
    padding: 14px 16px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    max-height: calc(100vh - 16px);
  }

  .dialog > h1,
  .room-view > .container > h1 {
    font-size: 18px !important;
    font-weight: 700 !important;
    border-bottom: 0 !important;
    padding: 2px 0 0 !important;
    margin: 0 0 12px !important;
    line-height: 1.25;
  }

  .dialog p,
  .basic-dialog p {
    color: var(--hx-muted);
    line-height: 1.45;
  }

  /* ---- Botones ---- */

  .dialog button,
  .room-view button,
  .dialog .file-btn label,
  .room-view > .container .file-btn label,
  .game-view > .buttons button,
  .connecting-view button,
  .disconnected-view button,
  .replay-controls-view button {
    min-height: var(--hx-btn-h);
    padding: 0 16px !important;
    border-radius: 10px !important;
    background: var(--hx-surface-2) !important;
    color: var(--hx-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    touch-action: manipulation;
    transition: background-color 0.12s, transform 0.06s;
  }
  .dialog button:active,
  .room-view button:active,
  .dialog .file-btn label:active,
  .game-view > .buttons button:active,
  .connecting-view button:active,
  .disconnected-view button:active {
    background: var(--hx-surface-3) !important;
    transform: scale(0.97);
  }
  .dialog button:disabled,
  .room-view button:disabled {
    opacity: 0.4;
  }

  /* Acciones principales en azul */
  .dialog button[data-hook="ok"],
  .create-room-view button[data-hook="create"],
  .roomlist-view button[data-hook="join"],
  .dialog button[data-hook="pick"],
  .dialog button[data-hook="change"],
  .dialog button[data-hook="copy"],
  .disconnected-view button[data-hook="ok"] {
    background: var(--hx-accent) !important;
    color: #fff !important;
  }
  .dialog button[data-hook="ok"]:active,
  .create-room-view button[data-hook="create"]:active,
  .roomlist-view button[data-hook="join"]:active,
  .dialog button[data-hook="pick"]:active,
  .dialog button[data-hook="change"]:active,
  .dialog button[data-hook="copy"]:active {
    background: var(--hx-accent-press) !important;
  }

  /* Acciones destructivas / de salida */
  .dialog button[data-hook="leave"],
  .dialog button[data-hook="kick"],
  .connecting-view button[data-hook="cancel"] {
    background: rgba(208, 73, 75, 0.22) !important;
    color: #ffb3b3 !important;
  }

  /* Los tooltips de ratón no tienen sentido en táctil */
  .tooltip {
    display: none !important;
  }

  /* ---- Campos ---- */

  .dialog input:not([type="range"]):not([type="file"]),
  .room-view > .container input:not([type="range"]):not([type="file"]) {
    min-height: var(--hx-btn-h);
    font-size: 16px !important; /* evita el zoom de iOS */
    background: var(--hx-field) !important;
    border: 1px solid var(--hx-line) !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    color: var(--hx-text) !important;
  }
  .dialog input:focus:not([type="range"]),
  .room-view > .container input:focus:not([type="range"]) {
    border-color: var(--hx-accent) !important;
    outline: none;
  }

  .dialog select,
  .room-view > .container select,
  .settings-view .section select {
    min-height: 36px;
    height: auto !important;
    font-size: 15px;
    background-color: var(--hx-field) !important;
    border: 1px solid var(--hx-line) !important;
    border-radius: 10px !important;
    padding: 0 30px 0 12px !important;
    color: var(--hx-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238f9ea8' stroke-width='2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
  }

  .dialog .label-input,
  .room-view > .container .label-input {
    background: transparent !important;
    padding: 0 !important;
    align-items: center !important;
    gap: 12px;
  }
  .dialog .label-input label,
  .room-view > .container .label-input label {
    color: var(--hx-muted);
    margin: 0 !important;
    font-size: 14px;
  }

  .dialog .row,
  .basic-dialog .buttons {
    gap: 8px;
  }
  .dialog .row > :not(:last-child),
  .basic-dialog .buttons > :not(:last-child) {
    margin-right: 0 !important;
  }

  /* ---- Elegir nick ---- */

  .choose-nickname-view > img {
    max-height: 26vh;
    width: auto;
    left: 0 !important;
    margin-bottom: 14px !important;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
  }
  .choose-nickname-view > .dialog {
    width: min(360px, 90vw) !important;
  }
  .choose-nickname-view > .dialog > [data-hook="ok"] {
    align-self: stretch !important;
    width: auto !important;
    margin-top: 4px;
  }

  /* ---- Lista de salas ---- */

  .roomlist-view {
    left: var(--hx-left);
    width: calc(100% - var(--hx-left)) !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 8px 8px 8px 0;
    box-sizing: border-box;
  }
  .roomlist-view > .notice {
    max-width: none !important;
    border-radius: 12px !important;
    background: var(--hx-surface-2) !important;
    font-size: 13px;
  }
  .roomlist-view > .dialog {
    max-width: none !important;
    max-height: none !important;
    padding: 12px 12px 10px 14px !important;
  }
  .roomlist-view > .dialog > h1 {
    margin-bottom: 8px !important;
  }
  .roomlist-view > .dialog > p:not([data-hook="count"]) {
    display: none; /* "Tip: ..." ocupa una línea valiosa */
  }
  .roomlist-view > .dialog [data-hook="count"] {
    top: 16px !important;
    right: 14px !important;
    color: var(--hx-muted);
    font-size: 13px;
  }

  .roomlist-view .list table.header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hx-muted);
  }
  .roomlist-view .list table.header td {
    padding-bottom: 6px;
  }
  .roomlist-view .list .separator {
    height: 1px !important;
    background: var(--hx-line) !important;
  }
  .roomlist-view .list .content {
    border-radius: 10px;
  }
  .roomlist-view .list .content table {
    margin-top: 2px !important;
  }
  .roomlist-view .list tbody tr td {
    padding-top: 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--hx-line);
    font-size: 15px;
  }
  .roomlist-view .list tbody tr td:first-child {
    padding-left: 10px;
  }
  .roomlist-view .list tbody tr td:not(:first-child) {
    color: var(--hx-muted);
    font-variant-numeric: tabular-nums;
  }
  .roomlist-view .list tbody tr:hover {
    background: transparent !important;
  }
  .roomlist-view .list tbody tr:active {
    background: rgba(255, 255, 255, 0.04) !important;
  }
  .roomlist-view .list tbody tr.selected {
    background: rgba(63, 167, 214, 0.16) !important;
    box-shadow: inset 3px 0 0 var(--hx-accent);
  }
  .roomlist-view .list tbody tr.selected td {
    color: var(--hx-text);
  }
  .roomlist-view .list tbody tr.old {
    opacity: 0.6;
  }
  .roomlist-view .list .flagico {
    margin-right: 6px;
    vertical-align: -1px;
  }
  .roomlist-view .list col:nth-child(2) { width: 66px !important; }
  .roomlist-view .list col:nth-child(3) { width: 50px !important; }
  .roomlist-view .list col:nth-child(4) { width: 104px !important; }

  .roomlist-view .filters {
    margin-top: 10px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .roomlist-view .filters .bool {
    margin: 0 !important;
    padding: 0 12px !important;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px !important;
    background: var(--hx-surface-2) !important;
    font-size: 13px;
  }

  .roomlist-view .splitter > .buttons {
    width: 150px;
    gap: 6px;
  }
  .roomlist-view .splitter > .buttons > :not(:last-child) {
    margin-bottom: 0 !important;
  }
  .roomlist-view .splitter > .buttons > button,
  .roomlist-view .splitter > .buttons > .file-btn > label {
    justify-content: flex-start;
    padding: 0 12px !important;
    font-size: 14px !important;
    text-align: left;
  }
  .roomlist-view .splitter > .buttons i {
    width: 18px;
    text-align: center;
    opacity: 0.85;
  }

  /* ---- Ajustes del juego ---- */

  .settings-view {
    width: min(540px, 92vw) !important;
    max-height: calc(100vh - 16px) !important;
  }
  .settings-view [data-hook="close"] {
    top: 10px !important;
    right: 12px !important;
    min-height: 34px !important;
  }
  .settings-view .tabs {
    background: var(--hx-field);
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
    margin-bottom: 12px !important;
    align-self: stretch;
  }
  .settings-view .tabs > :not(:last-child) {
    margin-right: 0 !important;
  }
  .settings-view .tabs button {
    flex: 1;
    min-height: 36px !important;
    border-radius: 9px !important;
    background: transparent !important;
    font-size: 14px !important;
    transition: none !important;
  }
  .settings-view .tabs button.selected {
    background: var(--hx-accent) !important;
    color: #fff !important;
  }
  .settings-view .section > div:not(.inputrow):not(.option-row):not(.toggle) {
    min-height: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .settings-view .section > :not(:last-child) {
    margin-bottom: 2px !important;
  }
  .settings-view .section .toggle {
    line-height: 1.3 !important;
    padding: 9px 10px;
    border-radius: 10px;
  }
  .settings-view .section .toggle:hover {
    background: transparent !important;
  }
  .settings-view .section .toggle:active {
    background: var(--hx-surface-2) !important;
  }
  .settings-view .section .toggle i {
    color: var(--hx-accent);
    margin-right: 8px !important;
  }
  .settings-view .section .inputrow {
    border-radius: 8px;
  }
  .settings-view .section .inputrow:nth-child(odd) {
    background: var(--hx-surface-2) !important;
  }
  .settings-view input[type="range"] {
    accent-color: var(--hx-accent);
    flex: 1;
  }

  /* ---- Crear sala, contraseña, conexión, diálogos simples ---- */

  .create-room-view > .dialog {
    max-width: min(420px, 92vw) !important;
  }
  .create-room-view > .dialog > .label-input > label {
    flex: 0 0 110px !important;
  }
  .create-room-view [data-hook="unlisted"] {
    background: var(--hx-field) !important;
    border: 1px solid var(--hx-line) !important;
  }

  .connecting-view .dialog,
  .disconnected-view .dialog,
  .room-password-view .dialog,
  .simple-dialog-view > .dialog {
    width: min(380px, 90vw) !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .connecting-view-log {
    color: var(--hx-muted);
    font-size: 13px;
    max-height: 40vh;
    overflow-y: auto;
  }
  .connecting-view button,
  .disconnected-view button {
    align-self: stretch !important;
  }

  /* ---- Sala (menú dentro de la partida) ---- */

  .room-view {
    left: var(--hx-left);
    width: calc(100% - var(--hx-left)) !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 8px 8px 8px 0;
    box-sizing: border-box;
  }
  .room-view > .container {
    max-width: none !important;
    max-height: none !important;
    padding-bottom: 12px !important;
  }
  .room-view > .container > :not(:last-child) {
    margin-bottom: 10px !important;
  }
  .room-view > .container > h1 {
    padding-right: 250px !important; /* no pisar los botones de arriba */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .room-view > .container > .header-btns {
    top: 10px !important;
    right: 12px !important;
    display: flex;
    gap: 6px;
  }
  .room-view > .container > .header-btns > :not(:last-child) {
    margin-right: 0 !important;
  }
  .room-view > .container > .header-btns button {
    min-height: 34px;
    padding: 0 12px !important;
    font-size: 14px !important;
  }
  .room-view > .container > .header-btns [data-hook="leave-btn"] {
    background: rgba(208, 73, 75, 0.22) !important;
    color: #ffb3b3 !important;
  }

  .room-view > .container > .teams {
    gap: 6px;
  }
  .room-view > .container > .teams > .tools {
    width: 76px !important;
    gap: 6px;
  }
  .room-view > .container > .teams > .tools > :not(:last-child) {
    margin-bottom: 0 !important;
  }
  .room-view > .container > .teams > .tools button {
    padding: 0 6px !important;
    font-size: 13px !important;
    min-height: 34px;
  }
  .room-view > .container > .teams .player-list-view {
    flex: 1 1 0;
    width: auto !important;
    max-width: 260px;
  }
  .room-view .player-list-view .list {
    background: var(--hx-field) !important;
    border-radius: 10px;
    border: 1px solid var(--hx-line);
  }
  .room-view .player-list-view.t-red .list { border-top: 3px solid var(--hx-red); }
  .room-view .player-list-view.t-blue .list { border-top: 3px solid var(--hx-blue); }
  .room-view .player-list-view.t-red button[data-hook="join-btn"] {
    background: rgba(229, 110, 86, 0.2) !important;
    color: #ffb4a6 !important;
  }
  .room-view .player-list-view.t-blue button[data-hook="join-btn"] {
    background: rgba(86, 137, 229, 0.22) !important;
    color: #b9cdff !important;
  }
  .room-view .player-list-view button[data-hook="join-btn"] {
    flex: 1;
    min-width: 0 !important;
  }
  .room-view .player-list-item {
    padding: 7px 8px !important;
    margin: 2px 4px !important;
    border-radius: 8px;
    font-size: 15px !important;
  }
  .room-view .player-list-item:hover {
    background: transparent !important;
  }
  .room-view .player-list-item:active {
    background: var(--hx-surface-2) !important;
  }
  .room-view .player-list-item [data-hook="ping"] {
    color: var(--hx-muted);
    font-size: 13px;
  }

  .room-view > .container > .settings {
    width: min(420px, 100%) !important;
  }
  .room-view > .container > .settings > div {
    line-height: 1.2 !important;
    gap: 8px;
  }
  .room-view > .container > .settings > div > .lbl {
    color: var(--hx-muted);
    flex: 0 0 96px !important;
  }

  .room-view > .container > .controls {
    gap: 8px;
  }
  .room-view > .container > .controls > * {
    margin: 0 !important;
  }
  .room-view button[data-hook="start-btn"] {
    background: var(--hx-ok) !important;
    color: #fff !important;
  }
  .room-view button[data-hook="stop-btn"] {
    background: var(--hx-danger) !important;
    color: #fff !important;
  }

  /* ---- Partido: botones de arriba a la derecha y marcador ---- */

  .game-view > .buttons {
    background: rgba(15, 21, 25, 0.72) !important;
    border-radius: 0 0 0 12px !important;
    height: auto !important;
    padding: 6px !important;
    gap: 6px;
  }
  .game-view > .buttons > :not(:last-child) {
    margin-right: 0 !important;
  }
  .game-view > .buttons button {
    min-height: 34px !important;
    padding: 0 12px !important;
  }

  .game-state-view .bar {
    background: rgba(15, 21, 25, 0.78) !important;
    border-radius: 0 0 14px 14px !important;
    height: 38px !important;
    padding: 5px 16px !important;
    font-size: 21px !important;
  }
  .game-state-view .bar > .scoreboard .teamicon {
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
  }
}