/* Локатор — /tools/locator/
   ------------------------------------------------------------------
   Таблица перезагружается раз в 15 секунд целиком: скрипт кладёт свежий
   ответ в #display. При обычной раскладке браузер каждый раз считает ширину
   колонок заново по содержимому — моб появился, в «Локации» стало длиннее,
   пропал — короче, и колонки скакали на каждом обновлении.

   Поэтому раскладка фиксированная: ширина задана и от содержимого не зависит.
   Ширину берут ячейки ПЕРВОЙ строки, то есть шапка таблицы; строки-заголовки
   мобов идут через colspan и на раскладку не влияют.
   «Онлайн» и «Бой» держат свои 60px из атрибутов width в разметке. */

#display table { table-layout: fixed; }

/* Город: столько, чтобы вошло «Angels City» со значком инфы и не осталось
   лишнего — «Локация» забирает всё, что останется. */
#display table th:first-child,
#display table td:first-child { width: 30%; }

/* «Онлайн» и «Бой». В разметке у них width="60" — при обычной раскладке браузер
   считал это пожеланием и растягивал колонку под заголовок, а с table-layout:fixed
   шестьдесят пикселей стали ровно шестьюдесятью, и слово «Онлайн» упёрлось
   в границы ячейки. Ширину задаём по заголовку, а не по галочке. */
#display table th:nth-child(3),
#display table td:nth-child(3) { width: 76px; }
#display table th:nth-child(4),
#display table td:nth-child(4) { width: 62px; }

/* Длинное название локации переносится, а не растягивает колонку. */
#display table td { word-wrap: break-word; overflow-wrap: break-word; }

/* На телефоне четыре колонки и так тесно: «Онлайн» и «Бой» съедают 120px,
   остальное делят «Город» и «Локация». 34% — примерно поровну: название города
   переносится на две строки, но ширина при этом не меняется, а это и нужно. */
@media (max-width: 600px) {
	#display table th:first-child,
	#display table td:first-child { width: 32%; }

	/* На узком экране каждый пиксель на счету: заголовки помельче, отбивка уже —
	   и «Онлайн» всё равно помещается целиком. */
	#display table th { font-size: 12px; }
	#display table th:nth-child(3),
	#display table td:nth-child(3) { width: 66px; }
	#display table th:nth-child(4),
	#display table td:nth-child(4) { width: 52px; }
}