/* ErawanRO - responsive overrides for the ro-cool template
 *
 * The template is a fixed 1200px nested-table layout from ~2010. Rather than
 * rewrite it, everything that carries a hard width is turned into a block
 * below 900px so it can reflow, and the wide data tables are given their own
 * horizontal scroll instead of being crushed.
 *
 * Loaded last on purpose - it only overrides, it defines nothing new.
 */

/* รูปทุกใบไม่ควรดันหน้าให้กว้างเกินจอ */
img { max-width: 100%; height: auto; }

@media (max-width: 900px) {

  /* ---- ต้นตอจริง ----
   * เทมเพลตตรึง body ไว้ที่ width 1200px ตราบใดที่ยังไม่ปลดตัวนี้
   * ลูกทุกตัวที่ตั้ง 100% ก็ยังได้ 1200 อยู่ดี แก้ที่นี่ที่เดียวก่อนอย่างอื่น
   */
  html, body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* .header_table ก็ตรึง 1200px ไว้เหมือน body - ตารางข้างในถึงยัง 1200 ทั้งที่
   * แปลงเป็น block แล้ว ต้องปลดตัวห่อทุกชั้นไม่ใช่แค่ตัวใน */
  .header_table, .wrapper, .change, .page_footer, .page_main_footer, .footer_container {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---- โครงตาราง 1200px ของเทมเพลต -> บล็อกที่ยืดตามจอ ---- */
  .header_table > table,
  .header_table > table > tbody,
  .header_table > table > tbody > tr,
  .header_table > table > tbody > tr > td,
  .header_table table[width="1200"],
  .header_table table[width="1200"] > tbody,
  .header_table table[width="1200"] > tbody > tr,
  .header_table table[width="1200"] > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* ช่องระยะขอบ 20px กับแถวเว้นสูง ๆ ไม่มีความหมายบนมือถือ */
  .header_table td[width="20"],
  .header_table td[height="55"],
  .header_table td[height="230"],
  .header_table td[height="60"] {
    display: none !important;
  }

  /* ---- แบนเนอร์หัวเว็บ ----
   * ทั้งแบนเนอร์และโลโก้เป็น position:absolute โดยอาศัยแถว td height=480
   * จองที่ให้ พอเราปลด height เป็น auto มันเลยไปทับเนื้อหา
   * แก้โดยดึงแบนเนอร์กลับเข้า flow แล้วย่อโลโก้ให้อยู่ในกรอบ
   */
  .header_img {
    position: relative !important;
    width: 100% !important;
    height: 130px !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
  }
  .header_logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(0.33) !important;
    transform-origin: center center !important;
  }

  /* ---- คอนเทนเนอร์ที่ตรึงความกว้างไว้ ---- */
  /* .container ของ bootstrap ตรึง 1170px ไม่ปลดตัวนี้ทั้งแถบเมนูก็ยังล้น */
  .container, .row, .navbar_menu, .navbar_menu_bg {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ---- เมนู ---- */
  /* เมนูแนวนอนยาวเกินจอ - ให้เลื่อนซ้ายขวาได้แทนที่จะล้น */
  .navbar_menu { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .navbar_menu nav > ul { white-space: nowrap; display: inline-block; }
  .navbar_container { display: inline-block !important; float: none !important; }
  /* เมนูย่อยต้องลอยอยู่เหมือนเดิม - ถ้าทำเป็น static มันจะกางออกมาดันหน้าให้กว้างกว่าเดิม */
  .dropdown_menu { max-width: 78vw !important; white-space: normal; }

  /* ---- เนื้อหา ---- */
  .ui.segment, .ui.segments .segment { padding: 10px !important; }
  .main-header span { font-size: 20px !important; line-height: 1.3; }
  .ui.big.breadcrumb { font-size: 13px !important; }

  /* ตารางอื่น ๆ ที่หน้าเว็บใช้จัดเลย์เอาต์ (ไม่ใช่ตารางข้อมูล) ให้ยืดตามจอ */
  table:not(.table) { max-width: 100% !important; }

  /* ตารางข้อมูลกว้าง ๆ ให้เลื่อนในกล่องตัวเอง อ่านง่ายกว่าบีบให้พอดีจอ */
  .table, table.table { display: block !important; overflow-x: auto !important;
                        white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .table td, .table th { white-space: normal; }

  /* คอลัมน์ bootstrap ที่เทมเพลตตั้งความกว้างไว้ */
  .col-md-2, .col-md-3, .col-md-5, .col-md-6, .col-md-9 { width: 100% !important; }

  /* ---- หน้าแรก ----
   * วงกลมสถิติเซิร์ฟเวอร์สี่วงจัดวางด้วย position:absolute ให้เรียงเป็นวงโค้ง
   * บนจอ 375 มันเลยซ้อนทับกันจนอ่านไม่ออก - ดึงกลับเข้า flow แล้วเรียงเป็นตาราง
   */
  .box-status-account, .box-status-charall,
  .box-status-guildall, .box-status-player {
    position: relative !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    display: inline-block !important;
    width: 46% !important;
    max-width: 46% !important;
    height: auto !important;
    min-height: 96px !important;
    margin: 2% !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    vertical-align: top;
  }
  /* ภาพตัวละครใหญ่ด้านข้าง ไม่มีที่ให้วางบนมือถือ */
  .img_left, .img_right { display: none !important; }

  /* ---- ของประดับที่กินที่บนจอเล็ก ---- */
  .alice_box, #particles-js, .sky_wave { display: none !important; }
  .page_footer, .page_main_footer, .footer_container { width: 100% !important; }

  /* ---- ช่องค้นหา ---- */
  input.form-control { font-size: 16px !important; }   /* < 16px = iOS ซูมเอง */
}

@media (max-width: 480px) {
  .main-header span { font-size: 17px !important; }
  .header_logo { transform: translate(-50%, -50%) scale(0.27) !important; }
}