/*
  โหลดต่อท้าย cbr-con.css เฉพาะหน้า /call-of-nevareth (ห้ามแก้ cbr-con.css ตัวดีไซน์)

  ปัญหา: klaro.min.css (โหลดจาก _LayoutCampaign) ตั้ง #klaro-cookie-notice เป็น
  position: fixed; z-index: 999 และ .klaro-recall-btn เป็น z-index: 9999
  ส่วน modal ของดีไซน์อยู่แค่ z-index 100-200 แถบคุกกี้จึงลอยทับปุ่มที่อยู่ท้าย modal
  (เช่นปุ่ม "สร้างกิลด์ของคุณ") ทำให้คลิกไม่โดนปุ่มและ event submit ไม่เกิดขึ้นเลย

  แก้โดยยก layer ของ modal ทุกตัวขึ้นเหนือ klaro โดยคงลำดับการซ้อนเดิม (บวก 9900)
  ตัว picker เลือกรูปกิลด์เป็นลูกของ .guild-create-modal / .guild-edit-modal
  จึงได้ stacking context ใหม่ตามแม่อยู่แล้ว ไม่ต้องระบุเพิ่ม
*/

.guild-create-modal,
.guild-detail-modal {
  z-index: 10000;
}

.guild-edit-modal,
.guild-members-modal {
  z-index: 10010;
}

.guild-save-success-modal,
.guild-create-success-modal,
.guild-join-confirm-modal {
  z-index: 10020;
}

.guild-join-reconfirm-modal {
  z-index: 10030;
}

.guild-join-success-modal {
  z-index: 10040;
}

.login-required-modal,
.preregister-required-modal,
.red-commander-modal,
.red-reuse-phone-modal {
  z-index: 10050;
}

.reward-tier-detail-modal {
  z-index: 10100;
}

/*
  ลิงก์คอมมูนิตี้ของกิลด์เป็นค่าที่ผู้ใช้กรอกเอง ยาวเท่าไรก็ได้ ส่วน .guild-detail-modal__discord-text
  ของดีไซน์ตั้ง white-space: nowrap ไว้ และคอลัมน์ aside เป็น flex-shrink: 0 ที่กว้างตามลูกที่ยาวที่สุด
  ลิงก์ยาวจึงดัน layout ของ popup จนล้น แก้โดยล็อกความกว้าง aside ไว้เท่ารูปกิลด์ (227px ตามดีไซน์)
  แล้วให้ข้อความตัดด้วย ellipsis (ตัว title บนลิงก์ทำให้ hover เห็น url เต็มได้)
*/

.guild-detail-modal__aside {
  max-width: 227px;
}

/*
  popup แบบ join/contact ห่อลิงก์คอมมูนิตี้ไว้ใน .guild-detail-modal__aside-top อีกชั้น ซึ่งไม่ได้ถูกจำกัดความกว้าง
  ต่างจาก popup กิลด์ตัวเอง/สมาชิกที่ลิงก์อยู่ใน aside ตรง ๆ ตัวห่อจึงขยายตามความยาว url (วัดได้ 1774px)
  ทะลุ aside 227px ออกไปนอกกรอบ popup ต้องจำกัดให้ไม่เกิน aside และให้ย่อได้เช่นกัน
*/

.guild-detail-modal__aside-top {
  min-width: 0;
  max-width: 100%;
}

.guild-detail-modal__discord {
  max-width: 100%;
  min-width: 0;
}

.guild-detail-modal__discord-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
  ปุ่มเลื่อนหน้าของ guild-list ถูก JS ปิดด้วย disabled เมื่ออยู่หน้าแรก/หน้าสุดท้าย
  ดีไซน์ไม่มีสไตล์สำหรับสถานะนี้ ถ้าไม่ใส่จะดูเหมือนกดได้ทั้งที่กดไม่ได้
*/

.guild-list__page-nav[disabled] {
  cursor: default;
  opacity: 0.35;
}

/*
  ดีไซน์ตั้ง .guild-list__grid (lg+) เป็น flex + justify-content: space-between + column-gap: 0
  ซึ่งสวยเฉพาะตอนการ์ดเต็มแถว (4 ใบ) ถ้าแถวมีการ์ดไม่ครบ ช่องว่างที่เหลือจะถูกเกลี่ยไปคั่นกลาง
  ทำให้การ์ดกระจายห่างกัน จำนวนการ์ดจริงต่อหน้าไม่คงที่ จึงเรียงจากซ้ายและกำหนดระยะห่างคงที่
  เท่ากับ row-gap ของดีไซน์แทน (278px x 4 + 22px x 3 = 1178px ยังพอดีกับความกว้าง 1180px)
*/

@media (min-width: 1024px) {
  .guild-list__grid {
    justify-content: flex-start;
    -moz-column-gap: 22px;
         column-gap: 22px;
  }
}

/*
  ชื่อหัวหน้ากิลด์ของจริงเป็น nickname/account id ที่ยาวได้หลายสิบตัว (ดีไซน์ mock ไว้แค่ "Nickname")
  ดีไซน์ตั้ง .guild-card__leader-name เป็น white-space: nowrap และแถวไม่มี min-width: 0
  ชื่อยาวจึงย่อไม่ได้แล้วดันความกว้างจนล้นการ์ดตอนจอแคบ แก้ให้แถวย่อได้และตัดชื่อด้วย ellipsis
  โดยคงป้าย "หัวหน้ากิลด์" ไว้เต็ม (JS ใส่ title ให้ hover เห็นชื่อเต็ม)
*/

.guild-card__leader {
  min-width: 0;
  max-width: 100%;
}

.guild-card__leader-label {
  flex-shrink: 0;
}

.guild-card__leader-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
  ดีไซน์ตั้ง display ของ notice / ลิงก์ discord / ปุ่ม chip / กล่องลิงก์เชิญ ไว้ตรง ๆ (flex, inline-flex)
  ซึ่งชนะ [hidden] { display: none } ของเบราว์เซอร์ JS สั่ง hidden = true แล้วจึงไม่หาย
  (กิลด์ที่ไม่ได้กรอกลิงก์คอมมูนิตี้เคยเห็นเป็นกล่องลิงก์ว่าง) ต้องใช้ selector ที่ specificity สูงกว่า
*/

.guild-detail-modal__notice[hidden],
.guild-detail-modal__discord[hidden],
.guild-detail-modal__chips[hidden],
.guild-detail-modal__chip[hidden],
.guild-detail-modal__hint[hidden],
.guild-detail-modal__invite[hidden],
.guild-list__pagination[hidden] {
  display: none;
}

/*
  กล่อง "ข้อมูลกิลด์ของคุณ" (#your-guild) สลับสถานะด้วย JS (หัวหน้า/สมาชิก/ยังไม่มีกิลด์) ซึ่งซ่อนส่วนต่าง ๆ ด้วย hidden
  แต่ดีไซน์ตั้ง display ของ body / มาสคอต / notice / ปุ่ม chip / กล่องลิงก์เชิญ / ลิงก์คอมมูนิตี้ไว้ตรง ๆ จึงชนะ [hidden]
  ของเบราว์เซอร์ ต้องใช้ selector ที่ specificity สูงกว่า (ชนะ .your-guild--empty .your-guild__mascot ด้วย)
*/

.your-guild .your-guild__body[hidden],
.your-guild .your-guild__mascot[hidden],
.your-guild .your-guild__notice[hidden],
.your-guild .your-guild__chip[hidden],
.your-guild .your-guild__invite[hidden],
.your-guild .your-guild__discord[hidden],
.your-guild .your-guild__hint[hidden] {
  display: none;
}

/*
  ข้อความ "กิลด์ Private เข้าร่วมผ่านลิงก์เชิญ..." ใช้ hint ของ popup มาแทนกล่องลิงก์เชิญ ซึ่งอยู่ใน grid ของ body
  ต้องกินทั้งแถวและอยู่แถวเดียวกับกล่องลิงก์เชิญ (แถว 9 บนมือถือ) ไม่งั้นตกไปอยู่ในคอลัมน์แคบของ grid
*/

.your-guild__hint {
  grid-column: 1 / -1;
  grid-row-start: 9;
}

@media (min-width: 1024px) {
  .your-guild__hint {
    grid-row: auto;
  }
}

/*
  ลิงก์คอมมูนิตี้และชื่อหัวหน้ากิลด์ในกล่องนี้เป็นค่าจริงที่ยาวได้ ส่วนดีไซน์ตั้ง white-space: nowrap ไว้
  ค่ายาวจึงดันความกว้างจนล้นกรอบ ให้ย่อได้และตัดด้วย ellipsis เหมือนใน popup รายละเอียดกิลด์
*/

.your-guild__discord {
  min-width: 0;
  max-width: 100%;
}

.your-guild__discord-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.your-guild__leader {
  min-width: 0;
}

.your-guild__leader-label {
  flex-shrink: 0;
}

.your-guild__leader-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guild-create-modal__input--readonly:disabled {
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}

.guild-edit-modal__input--readonly:disabled {
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}

/*
  Account ID จริงจาก GenPlay ยาวได้ถึง ~18 ตัว (เช่น Gen14620794020910) ส่วนดีไซน์ตั้ง
  .site-nav__actions (lg+) เป็น width: 290px ตายตัว และ .site-nav__account-logout ไม่มี
  white-space: nowrap ตอนพื้นที่ไม่พอปุ่ม "Log out" จึงตัดบรรทัดเป็น 2 บรรทัดและทับเมนูก่อนหน้า
  แก้ให้กล่อง actions ขยายได้เกิน 290px เมื่อ id ยาว (คง 290px ไว้เป็นค่าต่ำสุดตามดีไซน์เดิม)
  และล็อกไม่ให้ pill กับปุ่ม logout หด/ตัดบรรทัด
*/

.site-nav__account-pill {
  flex-shrink: 0;
}

.site-nav__account-logout {
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .site-nav__actions {
    width: auto;
    min-width: 290px;
  }
}

/*
  เมนู 5 อันของดีไซน์ (gap: 80px) ถูกวัดไว้พอดีกับความกว้าง >= 1536px เท่านั้น
  ที่จอ laptop ทั่วไป 1024-1535px (เช่น 1366px, 1440px) เมนูกับ account pill ที่ id ยาว
  รวมกันกว้างกว่าพื้นที่ที่มี ทำให้เมนูรายการสุดท้ายถูก pill ทับ ลด gap เฉพาะช่วงนี้ให้พอดี
*/

@media (min-width: 1024px) and (max-width: 1535px) {
  .site-nav__menu {
    gap: 20px;
  }
}

/*
  ดีไซน์ตั้ง .site-nav__account-id เป็น text-transform: capitalize ซึ่งบังคับให้อักษรแรกของ
  "user :" ที่ guild-leader-name.js เติมให้กลายเป็น "User :" ทั้งที่ค่าจริงตั้งใจให้เป็นตัวเล็ก
  ปิดการแปลงตัวพิมพ์เฉพาะจุดนี้แทน
*/

.site-nav__account-id {
  text-transform: none;
}

/*
  recruitmentmessage เป็นข้อความไทยที่ผู้ใช้กรอกเอง ยาวเท่าไรก็ได้และไม่มีช่องว่างระหว่างคำ
  ดีไซน์ไม่ได้ตั้ง overflow-wrap ไว้ให้ .your-guild__bio-text / .guild-detail-modal__bio-text
  เบราว์เซอร์จึงหาจุดตัดบรรทัดไม่ได้ ข้อความยาวดันล้นกรอบกล่อง bio ออกไป
*/

.your-guild__bio-text,
.guild-detail-modal__bio-text {
  overflow-wrap: break-word;
}

/*
  please-login-modal เป็น modal ใหม่แยกจาก login-required-modal เดิม (ใช้เป็น alert กลางของหน้านี้)
  ใช้ class login-required-modal ร่วมกันเพื่อได้สไตล์กรอบ/backdrop จากดีไซน์ทันที (ห้ามแก้ cbr-con.css)
  .login-required-modal__body เดิมไม่มี gap ระหว่างหัวข้อกับปุ่ม ใช้ค่าเท่า .preregister-required-modal__body
  ของดีไซน์เดิมที่เป็น popup แจ้งเตือน+ปุ่มแบบเดียวกัน (login-required-modal เดิมมีแค่หัวข้อ ไม่มีลูกที่สอง
  จึงไม่ได้รับผลจาก gap นี้)
*/

.login-required-modal__body {
  gap: 1.25rem;
}

.login-required-modal__cta {
  height: 50px;
  width: 100%;
  max-width: 354.5px;
  font-size: 1rem;
  line-height: 1.5rem;
  text-decoration-line: none;
}

@media (min-width: 768px) {
  .login-required-modal__cta {
    height: 60px;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}