/* assets/css/auth/base.css
   โทนสี · พื้นหลัง · กล่องกระจก · ฟอร์มล็อกอิน  (โหลดก่อนทุกตัว — ตัวแปรสีอยู่ที่นี่)

   ⚠ แยกออกมาจาก assets/css/auth.css ที่ยาว 593 บรรทัด (17 ส.ค. 2569)
      เพิ่มสไตล์ใหม่ให้ใส่ไฟล์ที่ตรงเรื่องที่สุด ห้ามกองท้ายไฟล์เดียว
      ⚠ เพิ่มไฟล์ใหม่ในโฟลเดอร์นี้ต้องเพิ่ม <link> ใน index.php ด้วย
*/
/* ═══════════════════════════════════════════════════════════════════════════
   auth.css — สไตล์หน้าล็อกอิน/สมัคร/สร้างตัวละคร (index.php · character_create.php)
   แยกออกจาก game.css เพราะหน้าเหล่านี้ไม่มี HUD ไม่มีจอยสติ๊ก โหลด game.css มาก็เปลืองเปล่า

   ⚠️ กฎสำหรับผู้พัฒนาต่อ (รวมถึง AI):
     1. ห้ามเขียน <style> ในไฟล์ .php อีก — สไตล์ของหน้าพวกนี้อยู่ที่ไฟล์นี้ไฟล์เดียว
     2. ห้ามใส่ overflow:hidden ให้ body เด็ดขาด (ดูเหตุผลที่ .auth-body)
     3. หน่วยขนาดใช้ rem เสมอ ห้ามใช้ px ตายตัวกับกล่อง/ตัวอักษร
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── โทนสี "โรงหลอมเหล็ก" ────────────────────────────────────────────────
   ⚠️ ห้ามกลับไปใช้โทนฟ้า-ดำ (#66fcf1 บน #0b0c10) เด็ดขาด
      โทนนั้นเป็นสายไซไฟ/อวกาศ ไม่ใช่แนวเด็กช่าง
      ธีมของเกมคือโรงงาน งานเชื่อม เหล็กหลอม → ต้องดุดัน ร้อนแรง
   สีหลักมาจากของจริงในโรงงาน: เหล็กเผาไฟ · ประกายไฟเชื่อม · เขม่าดำ */
:root {
    --bg-dark: #14100d;          /* ดำเขม่า อมน้ำตาล ไม่ใช่ดำอวกาศสีน้ำเงิน */
    --primary: #ff6a13;          /* ส้มเหล็กหลอม — สีหลักของระบบ */
    --primary-hot: #ffa023;      /* ประกายไฟ ใช้ตอน hover */
    --primary-dim: #a33c0d;      /* ส้มเข้ม ใช้กับขอบ/เงา */
    --ember: #e0341c;            /* แดงถ่านไฟ ใช้เน้นจุดสำคัญ */
    --steel: #6b6259;            /* เทาเหล็ก */
    --surface: rgba(24, 18, 14, 0.88);
    --surface-border: rgba(255, 106, 19, 0.34);
    --text-main: #cfc3b6;
    --text-light: #fff3e6;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Kanit', sans-serif; }

/* ⚠️ ห้ามใส่ overflow:hidden ให้ body หน้านี้
   มือถือแนวนอนเหลือความสูงจริงราว 330px หลังหักแถบเบราว์เซอร์
   ถ้าล็อก overflow ไว้ กล่องฟอร์มจะโดนตัดหัวและเลื่อนดูไม่ได้เลย
   (เคยพังมาแล้ว: เห็นแค่ช่องรหัสผ่านกับปุ่ม ช่องชื่อผู้ใช้หายไปเหนือจอ) */
.auth-body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    /* ⚠️ **ต้องเป็น svh ไม่ใช่ dvh** สำหรับการจัดกึ่งกลาง
       dvh = ความสูงตอนแถบเบราว์เซอร์ "ซ่อน" ซึ่งสูงกว่าที่เห็นจริงตอนแถบโผล่อยู่
       กล่องที่จัดกึ่งกลางด้วย dvh จึงไปตกต่ำกว่ากลางจอจริงเสมอบนมือถือ
       svh = ความสูงตอนแถบโผล่ = เล็กที่สุดที่เป็นไปได้ กึ่งกลางจึงถูกทุกจังหวะ
       (ยอมเสียที่ว่างนิดหน่อยตอนแถบซ่อน ดีกว่าวางผิดที่ตลอดเวลา)
       สองบรรทัดแรกไว้ให้เบราว์เซอร์เก่าที่ยังไม่รู้จักหน่วยพวกนี้ */
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    -webkit-text-size-adjust: 100%;
}

/* พื้นหลัง 3D ต้อง fixed ไม่ใช่ absolute — ไม่งั้นตอนเลื่อนหน้าจอบนมือถือฉากจะเลื่อนตามไปด้วย */
#bg-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(20, 16, 13, 0.86) 100%);
    z-index: 1;
    pointer-events: none;
}

.container {
    width: 100%;
    max-width: 26rem;
    padding: 1.5rem;
    /* เผื่อพื้นที่ปลอดภัย (รอยบาก/แถบ home) ให้ฟอร์มไม่โดนบัง */
    padding-top: calc(1.5rem + env(safe-area-inset-top));
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    position: relative;
    z-index: 2;
}

.glass-panel {
    background: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--surface-border);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
}

.header { text-align: center; margin-bottom: 1.6rem; }
.header h1 {
    color: var(--primary);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
    text-shadow: 0 0 14px rgba(255, 106, 19, 0.55);
}
.header p { font-size: 0.88rem; opacity: 0.8; }

.form-group { margin-bottom: 1rem; }
/* สองช่องต่อแถว (ชื่อ-นามสกุล / ชั้นเรียน-เลขประจำตัว) — จอแคบจะพับลงมาเอง */
.form-row { display: flex; gap: 0.7rem; }
.form-row .form-group { flex: 1 1 0; min-width: 0; }
.opt { opacity: 0.5; font-size: 0.9em; }
@media (max-width: 420px) { .form-row { flex-direction: column; gap: 0; } }
.form-group label {
    display: block;
    font-size: 0.84rem;
    margin-bottom: 0.35rem;
    color: var(--text-light);
}
.form-control {
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--surface-border);
    color: var(--text-light);
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    /* ⚠️ ห้ามต่ำกว่า 1rem (16px) — iOS Safari จะซูมหน้าเข้าเองอัตโนมัติตอนแตะช่องกรอก */
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(255, 106, 19, 0.25);
}

.btn {
    width: 100%;
    padding: 0.8rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    margin-top: 0.9rem;
    touch-action: manipulation;   /* กันเบราว์เซอร์หน่วง 300ms และดับเบิลแท็บซูม */
}
.btn-primary {
    background: linear-gradient(180deg, var(--primary-hot), var(--primary) 55%, var(--primary-dim));
    color: var(--bg-dark);
    box-shadow: 0 0 18px rgba(255, 106, 19, 0.45);
}
.btn-primary:hover { background: var(--primary-hot); box-shadow: 0 0 26px rgba(255, 160, 35, 0.7); }
.btn-primary:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: default; }

.toggle-text { text-align: center; margin-top: 1.2rem; font-size: 0.88rem; }
.toggle-text a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}
.toggle-text a:hover { color: #fff; text-decoration: underline; }

.error-box {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #fca5a5;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.9rem;
    font-size: 0.88rem;
    display: none;
}
.error-box.show { display: block; }

/* สลับแผงล็อกอิน/สมัคร */
#login-panel, #register-panel { display: none; }
#login-panel.active, #register-panel.active {
    display: block;
    animation: auth-fade-in 0.35s ease forwards;
}
@keyframes auth-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}