/* PocketTH — สไตล์รวมของเว็บผู้เล่น
   เขียนเองทั้งหมด ไม่มี bootstrap/jquery-ui/font-awesome เหมือนของเดิม
   ฟอนต์ใช้ของเครื่อง ไม่โหลดจากภายนอก ⇒ ไม่มีคำขอข้ามเว็บเลยสักอัน

   รื้อหน้าตาใหม่ 25 ส.ค. 2026 ตามที่เจ้าของสั่ง ("สไตล์ ios")
   🔑 ชื่อคลาสเดิม **ทุกตัว** ยังอยู่ครบ — หน้า login/register/account/history/
      forgot/reset/bindmail ใช้ชุดเดิมอยู่ ถ้าเปลี่ยนชื่อคลาสจะพังเงียบ ๆ ทั้งเว็บ */

:root {
  --bg:    #0b0d12;   /* พื้นล่างสุด */
  --bg2:   #161a22;   /* การ์ด/ผิวที่ยกขึ้นมา */
  --bg3:   #1e232d;   /* ตอนชี้/กด */
  --line:  rgba(255, 255, 255, .09);   /* เส้นคั่นแบบ iOS = โปร่งแสง ไม่ใช่สีตาย */
  --fg:    #f2f3f6;
  --dim:   #8d95a5;   /* ตัวหนังสือรอง — 6.5:1 บนพื้นหน้า */
  /* 🔴 สีจาง "ระดับสาม" ที่ยังอ่านออก — 5.2:1 บนพื้นหน้า / 4.6:1 บนการ์ด
     ของเดิมใช้ #5d6572 กับ #6c7484 ซึ่งได้แค่ 3.3:1 และ 3.7:1 = ตกเกณฑ์ AA
     ใช้กับคำอธิบายใต้ช่องกรอก, ท้ายเว็บ, ตัวอย่างในช่องกรอก */
  --dim2:  #79808f;

  --red:   #d33;      /* พื้นปุ่ม — ตัวหนังสือขาวบนสีนี้ได้ 4.8:1 ผ่าน AA */
  --red-d: #a52222;   /* ปุ่มตอนกด */
  /* 🔴 สีตัวหนังสือแดงต้องคนละค่ากับพื้นปุ่ม
     #d33 เป็น "ตัวหนังสือ" บนพื้น #0b0d12 ได้แค่ 4.0:1 ⇒ ตกเกณฑ์ AA
     ตัวนี้ 6.2:1 ใช้กับลิงก์/ข้อความเน้นบนพื้นเข้มเท่านั้น */
  --red-t: #ff6b62;

  --blue:  #4a8cff;   /* วงโฟกัสคีย์บอร์ด */
  --ok:    #37b866;
  --warn:  #d8a33a;

  --r-s: 10px;   /* มุมเล็ก  — แท็ก/ข้อความแจ้ง */
  --r-m: 12px;   /* มุมกลาง — ปุ่ม/ช่องกรอก */
  --r-l: 18px;   /* มุมใหญ่ — การ์ด/กล่องเปิดหน้า */

  /* iOS ใช้เส้นโค้งแบบสปริง ไม่ใช่ ease ธรรมดา */
  --ease: cubic-bezier(.32, .72, 0, 1);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* iOS: ห้ามให้แถบบนแบบ sticky เด้งทับตอนกดลิงก์ในหน้า */
  scroll-padding-top: 70px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  /* -apple-system มาก่อน ⇒ บน iOS ได้ SF Pro + ฟอนต์ไทยของระบบ = หน้าตาเนทีฟจริง
     เครื่องอื่นไม่รู้จักชื่อนี้ก็ไหลไปใช้ Noto Sans Thai ตามเดิม */
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans Thai",
               "IBM Plex Sans Thai", "Sarabun", "Leelawadee UI",
               system-ui, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  /* iOS ไม่มี hover — กรอบเทาที่เด้งตอนแตะทำให้ดูไม่เนียน ใช้ :active แทน */
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }

/* 🔴 ห้ามลบวงโฟกัสทิ้งเฉย ๆ — คนที่ใช้คีย์บอร์ดจะหาไม่เจอว่าอยู่ตรงไหน
   :focus-visible โผล่เฉพาะตอนใช้คีย์บอร์ด ไม่รบกวนคนใช้เมาส์/นิ้ว */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
  /* env(safe-area-*) = เว้นให้พ้นมุมโค้ง/รอยบากของ iPhone ตอนหมุนจอ */
  padding: 0 calc(16px + env(safe-area-inset-left, 0px))
           0 calc(16px + env(safe-area-inset-right, 0px));
}

/* ---------------------------------------------------------------- แถบบน */
.top {
  position: sticky; top: 0; z-index: 20;
  /* กระจกฝ้าแบบแถบบนของ iOS — พื้นต้องกึ่งโปร่งถึงจะเห็นผลของ blur */
  background: rgba(11, 13, 18, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
/* เบราว์เซอร์ที่ทำ blur ไม่ได้ ต้องได้พื้นทึบ ไม่งั้นตัวหนังสือทับกันอ่านไม่ออก */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top { background: #0b0d12; }
}
.top-in { display: flex; align-items: center; gap: 14px; height: 56px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: .2px; font-size: 16px;
  flex-shrink: 0;
}
.brand img {
  display: block;
  /* 22.5% ของด้าน = อัตราส่วนมุมโค้งของไอคอนแอป iOS */
  border-radius: 22.5%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 7px 12px; border-radius: var(--r-s); font-size: 14.5px;
  color: var(--dim); white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover { color: var(--fg); background: var(--bg2); }
.nav a.on { color: #fff; background: var(--bg3); }
.who { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.uname {
  font-size: 14px; color: var(--dim); max-width: 110px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------------- ปุ่ม */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--red); color: #fff; border: 1px solid transparent;
  border-radius: var(--r-m); padding: 12px 20px; font: inherit; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  /* 🔑 44px คือขนาดเป้าแตะขั้นต่ำตามแนวทางของ Apple เล็กกว่านี้กดพลาด */
  min-height: 44px;
  transition: background .18s var(--ease), transform .12s var(--ease);
}
.btn:hover { background: var(--red-d); }
/* iOS ไม่มี hover — ความรู้สึกว่า "กดติด" มาจากปุ่มยุบลงเล็กน้อยตอนกด */
.btn:active { transform: scale(.97); }
/* 🔴 ปุ่มเล็กบนแถบบนก็ต้องได้ 44px เหมือนกัน — ของเดิมตั้ง 36px ทับค่าฐาน
   ลดแค่ตัวอักษรกับระยะซ้ายขวา ส่วนความสูงคงไว้ (align-items:center จัดกลางให้เอง)
   แถบบนสูง 56px ⇒ ปุ่ม 44px ยังเหลือขอบบนล่างข้างละ 6px พอดี */
.btn.sm { padding: 0 14px; font-size: 14px; min-height: 44px; }
.btn.ghost { background: var(--bg2); border-color: var(--line); color: var(--fg); }
.btn.ghost:hover { background: var(--bg3); }
.btn.wide { width: 100%; }
.btn[disabled], .btn.off { opacity: .4; pointer-events: none; }

/* ---------------------------------------------------------------- หน้า */
.page { padding: 24px 16px 60px; }
h1 { font-size: 26px; line-height: 1.3; margin: 0 0 6px; letter-spacing: -.3px; }
h2 { font-size: 17px; margin: 0; letter-spacing: -.2px; }
.lead { color: var(--dim); margin: 0 0 22px; }

.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 30px 0 12px; }
.sec-head .more { font-size: 13.5px; color: var(--red-t); }

.card {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: 20px;
}
.card + .card { margin-top: 12px; }
.grid { display: grid; gap: 12px; }
@media (min-width: 680px) { .grid.two { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- หน้าแรก */
.hero {
  text-align: center;
  padding: 44px 24px 40px;
  /* ไม่ใส่กรอบ/พื้นการ์ด — ปล่อยให้ไอคอนแอปเป็นตัวเอก
     แสงนวลจาง ๆ จากด้านบนพอให้หน้าไม่แบน */
  background: radial-gradient(72% 58% at 50% 0%, rgba(211, 51, 51, .13) 0%, transparent 72%);
}
/* ไอคอนแอปทรงสี่เหลี่ยมมน = ภาษาภาพของ iOS
   แสดง 112px จากไฟล์ 192px ⇒ คมบนจอ 2x โดยไม่ต้องโหลดรูปใหญ่ */
.hero .mark {
  width: 112px; height: 112px;
  border-radius: 22.5%;
  display: block; margin: 0 auto 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55),
              0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.hero h1 { font-size: 32px; letter-spacing: -.6px; }
.hero .lead { margin-bottom: 26px; font-size: 16.5px; }
/* เรียงปุ่มลงล่างเต็มความกว้างแบบแผงปุ่มของ iOS ไม่ใช่วางเรียงข้างกัน */
.hero .row { display: grid; gap: 10px; max-width: 320px; margin: 0 auto; }
.hero .alt { margin-top: 20px; }

/* ---------------------------------------------------------------- ฟอร์ม */
.form { max-width: 420px; margin: 0 auto; }
label { display: block; font-size: 13.5px; color: var(--dim); margin: 16px 0 6px; }
input[type=text], input[type=password], input[type=email], input[type=tel], select {
  width: 100%; background: var(--bg2); border: 1px solid var(--line); color: var(--fg);
  border-radius: var(--r-m); padding: 12px 14px; font: inherit;
  min-height: 44px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
/* 🔴 ห้ามให้ช่องกรอกเล็กกว่า 16px บน iOS — Safari จะซูมหน้าเข้าเองตอนโฟกัส */
input, select, textarea { font-size: 16px; }
input:focus, select:focus {
  outline: none; border-color: var(--blue); background: var(--bg3);
}
input::placeholder { color: var(--dim2); }
.hint { font-size: 12.5px; color: var(--dim2); margin-top: 5px; }
.form .btn { margin-top: 24px; }
.alt { text-align: center; margin-top: 16px; font-size: 14px; color: var(--dim); }
.alt a { color: var(--red-t); }
/* 🔴 ปุ่มที่อยู่ในย่อหน้า .alt ต้องไม่โดน .alt a ทับสี
   `.alt a` มีน้ำหนัก 0-1-1 ชนะ `.btn` ที่ 0-1-0 ⇒ ได้ตัวหนังสือแดงบนพื้นแดง = มองไม่เห็น
   (เจอจริงที่ปุ่ม "ขอลิงก์ใหม่" ในหน้า reset.php) */
.alt a.btn { color: #fff; }
.alt a.btn.ghost { color: var(--fg); }

.cap { display: flex; gap: 10px; align-items: center; }
.cap input { flex: 1; }
.cap img {
  height: 46px; border-radius: var(--r-s); border: 1px solid var(--line);
  cursor: pointer; display: block;
}

/* ---------------------------------------------------------------- ข้อความแจ้ง */
.msg { border-radius: var(--r-m); padding: 12px 15px; margin-bottom: 18px; font-size: 14.5px; }
.msg.ok   { background: #102c1c; border: 1px solid #2b6f45; color: #93e0b1; }
.msg.bad  { background: #331518; border: 1px solid #82363c; color: #f0a3a7; }
.msg.warn { background: #302713; border: 1px solid #7a6a2c; color: #e2cf8d; }

/* ---------------------------------------------------------------- ตาราง */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-l); }
table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--bg2); }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { background: #1a1f29; color: var(--dim); font-weight: 600; font-size: 12.5px; }
tr:last-child td { border-bottom: 0; }
/* ตัวเลขที่เรียงเป็นคอลัมน์ต้องกว้างเท่ากันทุกตัว ไม่งั้นหลักไม่ตรงกัน */
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; }
.tag.ok  { background: #14331f; color: #7fd6a0; }
.tag.wait{ background: #2f2814; color: #d9c179; }
.tag.no  { background: #331819; color: #e09a9e; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 14.5px; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; word-break: break-all; }

.empty { text-align: center; color: var(--dim); padding: 34px 10px; }

/* ---------------------------------------------------------------- ท้ายเว็บ */
.foot {
  border-top: 1px solid var(--line);
  padding: 22px 0 calc(34px + env(safe-area-inset-bottom, 0px));
  margin-top: 40px;
}
.foot .links { display: flex; gap: 18px; justify-content: center; font-size: 14px; margin-bottom: 8px; }
.foot .links a { color: var(--dim); transition: color .18s var(--ease); }
.foot .links a:hover { color: var(--fg); }
.fine { text-align: center; color: var(--dim2); font-size: 12.5px; margin: 0; }

/* ---------------------------------------------------------------- จอเล็ก
   🔴 เส้นแบ่งต้องต่ำกว่า 375 — iPhone SE/13 mini กว้าง 375 พอดี
      ถ้าตั้งไว้ 380 เครื่องกลุ่มที่คนใช้เยอะที่สุดจะได้ไอคอนย่อไปโดยไม่จำเป็น
      ตรงนี้ไว้รับเครื่องแคบจริง ๆ (320-359) เท่านั้น */
@media (max-width: 359px) {
  .hero { padding: 34px 16px 32px; }
  .hero .mark { width: 96px; height: 96px; }
  .hero h1 { font-size: 28px; }
}

/* คนที่ตั้งเครื่องให้ลดการเคลื่อนไหว (iOS: ตั้งค่า ▸ การช่วยการเข้าถึง ▸ การเคลื่อนไหว) */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn:active { transform: none; }
}