/* ═══════════════ หน้าเข้าเกม / สร้างตัวละคร — ผังใหม่ 27 ก.ย. (ภาพต้นแบบของผู้ใช้) ═══════════════
   การ์ดครีมใหญ่กลางจอบนฉากเมืองซันด์พอร์ตเบลอ · ตัวละครซ้ายเป็นพระเอก · ฟอร์มขวา · ปุ่มหลักสีฟ้า
   ⚠️ หน้านี้มีกฎเก่าซ้อนอยู่ 6 ไฟล์ (style/kit/polish/mobile/skin/land) บางกฎ specificity (1,3,2)
      ไฟล์นี้ขึ้นต้นทุกกฎด้วย #login#login (id ซ้ำสองครั้ง = (2,x,x)) ให้ชนะหมดโดยไม่ต้องไล่แก้ไฟล์เก่า
   ⚠️ ไม่มี "ขั้นที่ 2 เลือกโลกเริ่มต้น" ตามภาพต้นแบบ — เกมไม่มีขั้นนั้นจริง (กฎ: หน้าจอต้องตรงกับที่เกมมี) */
#login#login {
  --lg-cream: #fffaf0; --lg-card: #fdf8ee; --lg-line: #eadcc0; --lg-ink: #5b3a1a; --lg-sub: #8a7454;
  --lg-blue: #3f7fe0; --lg-blue-d: #2c62c4; --lg-blue-l: #eaf2ff; --lg-gold: #e8b64a; --lg-leaf: #86c55e;
  background: #bfe0ef; overflow: auto;
  /* กฎเก่าจัดการ์ดกลางจอด้วย flex — การ์ดสูงกว่าจอ (มือถือ) ล้นขึ้นด้านบน โลโก้โดนตัดและเลื่อนกลับไปไม่ได้
     grid + margin auto: พอดีจอ = อยู่กลาง · สูงกว่าจอ = เริ่มจากบนสุดแล้วเลื่อนลงได้ */
  display: grid; place-items: start center; align-content: start; padding: 0 0 12px;
}
#login#login[hidden] { display: none; }
/* ฉากหลัง: ภาพเมืองซันด์พอร์ต (เมืองหลวงในเกมจริง) เบลอ + แสงอุ่นตรงกลาง ให้ตัวหนังสือบนการ์ดอ่านง่าย */
#login#login::before {
  content: ''; position: fixed; inset: -24px; z-index: 0; pointer-events: none;
  background: url('assets/ui/login-bg.jpg') center 40% / cover no-repeat;
  filter: blur(7px) saturate(1.08) brightness(1.04);
}
#login#login::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 48%, #fff8e833, #fff3d400 70%), linear-gradient(#ffffff10, #3a2a1418);
}
#login#login > .login-card {
  position: relative; z-index: 1;
  background: var(--lg-card); border: 1px solid #f3e7cf; border-radius: 28px;
  box-shadow: 0 24px 60px #5a3a1433, 0 4px 14px #5a3a141f, inset 0 1px 0 #fff;
  padding: 34px 36px 22px; margin: 96px auto 40px;
  overflow: visible;                    /* มือถือกฎเก่าตั้ง hidden — โลโก้ที่ลอยเหนือขอบการ์ดโดนตัด */
  max-height: none;
}
/* การ์ดกว้างขึ้นเฉพาะตอนสร้างตัวละคร — ขั้นอื่น (ล็อกอิน/เลือกตัว) คงขนาดเดิม */
#login#login > .login-card:has(#l-create:not([hidden])) { width: min(1120px, 94vw); max-width: none; }

/* ── โลโก้ลอยทับขอบบนการ์ด + ใบไม้สองข้าง ── */
/* 27 ก.ย.: เดิม top -62px โลโก้ครึ่งล่างจมลงในการ์ด ครึ่งบนอยู่บนฟ้า ไม่มีอะไรรองพื้น — ผู้ใช้ว่าโลโก้แปลก
   → ลอยเหนือการ์ดเต็มตัว ฐานตัวอักษรแตะขอบบนการ์ดพอดี (ภาพ 1024×309 · ขอบโปร่งล่าง ~15/309) */
#login#login .brand { position: absolute; left: 50%; top: -82px; translate: -50% 0; margin: 0; width: max-content; }
#login#login .brand img { width: 330px; height: auto; display: block; filter: drop-shadow(0 6px 10px #5a3a1433); }
#login#login .brand::before, #login#login .brand::after {
  content: ''; position: absolute; top: 34px; width: 46px; height: 38px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 38'%3E%3Cpath d='M4 34C6 14 22 4 42 4 40 22 28 34 4 34z' fill='%2386c55e'/%3E%3Cpath d='M4 34C14 24 24 16 36 10' stroke='%235f9e3c' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
#login#login .brand::before { left: -40px; transform: scaleX(-1) rotate(-8deg); }
#login#login .brand::after { right: -40px; transform: rotate(-8deg); }
#login#login .sub { margin: 4px 0 8px; font-size: 15px; color: var(--lg-sub); text-align: center; }
#login#login .l-online { margin: 0 auto 16px; padding: 7px 18px; border-radius: 999px; background: #f4ead6; border: 1px solid #ecdcbc; color: #7a5a2a; font-size: 13px; }

/* ── สองคอลัมน์: ตัวละคร 46% · ฟอร์ม ── */
#login#login #l-create .cc {
  display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 30px; align-items: stretch;
  padding: 18px; border-radius: 22px; background: var(--lg-cream); border: 1px solid #f0e4cb;
}
#login#login #l-create .cprev {
  position: relative; overflow: hidden; height: auto; min-height: 460px; border-radius: 20px; border: 0;
  background: #cfe6f1; box-shadow: inset 0 0 0 1px #ffffff80;
}
/* ฉากในกรอบตัวละคร: เมืองซันด์พอร์ตเบลอน้อยกว่าฉากหลัง + ท้องฟ้าสว่างด้านบน */
#login#login #l-create .cprev::before {
  content: ''; position: absolute; inset: -10px; z-index: 0;
  background: linear-gradient(#bfe2f5 0%, #d9eef6cc 38%, #fff5e000 60%), url('assets/ui/login-bg.jpg') 18% 70% / cover no-repeat;
  filter: blur(3px) saturate(1.05);
}
#login#login #l-create .cprev canvas { position: relative; z-index: 1; }
/* ลานหินใต้เท้า (แทนเงาแบนเดิม) */
#login#login #l-create .cprev-floor {
  z-index: 0; left: 50%; right: auto; bottom: 7%; width: 64%; height: 15%; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, #e8e0cc 0 46%, #cfc4aa 47% 62%, #b9ad90 63% 70%, #0000 71%);
  box-shadow: 0 10px 18px #5a3a1426;
}
#login#login #l-create #l-preview-msg { position: relative; z-index: 2; }
#login#login #l-create .cprev-tip { display: none; }                     /* มีปุ่มหมุนแล้ว */
#login#login #l-create .cprev-turn {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 44px; height: 44px; padding: 10px;
  border-radius: 50%; border: 1px solid #ffffffc0; background: #ffffffa8; color: #6b5030; cursor: pointer;
  box-shadow: 0 3px 10px #3a2a1426; backdrop-filter: blur(2px);
}
#login#login #l-create .cprev-turn:hover { background: #fff; }
#login#login #l-create .cprev-turn svg { width: 100%; height: 100%; display: block; }
#login#login #l-create .cprev-turn.l { left: 12px; }
#login#login #l-create .cprev-turn.r { right: 12px; }
#login#login #l-create .cprev-pose {
  position: absolute; left: 50%; bottom: 16px; translate: -50% 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  border: 1px solid #ecdcbc; background: #fffaf0e8; color: #6b5030; font: 600 15px var(--font-head, inherit); cursor: pointer;
  box-shadow: 0 3px 10px #3a2a1426;
}
#login#login #l-create .cprev-pose svg { width: 20px; height: 20px; }

/* ── ฟอร์มขวา ── */
#login#login #l-create .cc-opt { display: flex; flex-direction: column; gap: 16px; justify-content: center; padding: 8px 6px 4px; }
/* ของในฟอร์มห้ามหด — จอเตี้ยคอลัมน์ถูกจำกัดความสูง แล้วแถวสีผมหดจนปุ่มหลักทับ (667×375) · ยาวกว่าจอก็เลื่อนลงแทน */
#login#login #l-create .cc-opt > * { flex-shrink: 0; }
#login#login #l-create .cc-title { display: grid; justify-items: center; gap: 6px; margin: 0 0 4px; text-align: center; }
#login#login #l-create .cc-title::before, #login#login #l-create .cc-title::after { content: none; }   /* เส้นคั่นเดิม */
#login#login #l-create .cc-title span { font: 700 34px/1.15 var(--font-head, inherit); color: var(--lg-ink); background: none; padding: 0; }
#login#login #l-create .cc-title span::before, #login#login #l-create .cc-title span::after { content: '✦'; color: var(--lg-gold); font-size: 22px; margin: 0 10px; vertical-align: 6px; text-shadow: 0 1px 0 #fff; }
#login#login #l-create .cc-title small { font-size: 15px; color: var(--lg-sub); }
#login#login #l-create .cc-field { display: grid; gap: 8px; margin: 0; }
#login#login #l-create .cc-lab { display: inline-flex; align-items: center; gap: 8px; font: 700 17px var(--font-head, inherit); color: var(--lg-ink); }
#login#login #l-create .cc-lab svg { width: 20px; height: 20px; color: #7a5230; }
#login#login #l-create .name-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 10px; }
#login#login #l-create #l-name {
  width: 100%; min-width: 0; height: 60px; padding: 0 20px; border-radius: 16px; border: 1.5px solid #e3d3ae; background: #fffbef;
  font: 600 20px var(--font-head, inherit); color: var(--lg-ink); box-shadow: inset 0 2px 4px #5a3a140d;
}
#login#login #l-create #l-name:focus { outline: none; border-color: var(--lg-blue); box-shadow: 0 0 0 4px #3f7fe026; }
#login#login #l-create #l-dice {
  width: 64px; height: 60px; padding: 4px 0 2px; border-radius: 16px; border: 1.5px solid #e3d3ae; background: #fff;
  display: grid; place-items: center; align-content: center; gap: 0; cursor: pointer; box-shadow: 0 3px 0 #e8dcc2;
}
#login#login #l-create #l-dice:active { translate: 0 2px; box-shadow: 0 1px 0 #e8dcc2; }
#login#login #l-create #l-dice b { font-size: 26px; line-height: 1; }
#login#login #l-create #l-dice small { font: 700 11px var(--font-head, inherit); color: var(--lg-blue-d); }
/* กฎเก่าวางป้ายแบบ absolute แล้วดันแถวด้วย padding-left 74px (ป้ายอยู่ข้าง) — ผังใหม่ป้ายอยู่บน */
#login#login #l-create .row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; min-height: 0; }
#login#login #l-create .row > span { position: static; width: auto; }
#login#login #l-create .cc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#login#login #l-create .cc-seg .chip {
  height: 56px; margin: 0; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 19px var(--font-head, inherit); color: #6b5a44; background: #fff; border: 1.5px solid #e3dccd; box-shadow: 0 3px 0 #e6ddcb;
}
#login#login #l-create .cc-seg .chip svg { width: 24px; height: 24px; margin: 0; vertical-align: 0; }
#login#login #l-create .cc-seg .chip.on { color: #fff; background: linear-gradient(#5a93ec, var(--lg-blue-d)); border-color: #2a5bb8; box-shadow: 0 3px 0 #1f4a9a; }
#login#login #l-create .cc-style { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#login#login #l-create .cc-style .cc-lab { width: 100%; }
#login#login #l-create .swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 4px; justify-content: space-between; }
#login#login #l-create .swatches button {
  width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px #d8ccb2, 0 2px 4px #5a3a141f;
  display: grid; place-items: center; cursor: pointer; flex: 0 0 auto;
}
#login#login #l-create .swatches button.on { outline: none; box-shadow: 0 0 0 3.5px var(--lg-blue), 0 3px 8px #2c62c440; }
#login#login #l-create .swatches button.on::after { content: '✓'; color: #fff; font-size: 19px; font-weight: 800; text-shadow: 0 1px 3px #0009; }

/* ── ปุ่มหลัก: ฟ้า มีไอคอนจอยซ้าย ลูกศรขวา (วาดด้วย CSS เพราะ main.js เขียนข้อความทับ) ── */
#login#login #l-create #l-go {
  position: relative; width: 100%; height: 70px; margin: 6px 0 0; border-radius: 999px; border: 0;
  background: linear-gradient(#5f9af0, var(--lg-blue) 55%, var(--lg-blue-d)); color: #fff;
  font: 700 26px var(--font-head, inherit); letter-spacing: .01em; text-shadow: 0 2px 0 #1f4a9a66;
  box-shadow: 0 5px 0 #1f4a9a, 0 12px 22px #2c62c440, inset 0 2px 0 #ffffff55; cursor: pointer;
}
#login#login #l-create #l-go:hover { filter: brightness(1.05); }
#login#login #l-create #l-go:active { translate: 0 3px; box-shadow: 0 2px 0 #1f4a9a, 0 6px 14px #2c62c440; }
#login#login #l-create #l-go::before {
  content: ''; position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 50px; height: 50px; border-radius: 50%;
  background: #fffaf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 10h14a6 6 0 0 1 6 6v2a5 5 0 0 1-9 3l-1-1h-6l-1 1a5 5 0 0 1-9-3v-2a6 6 0 0 1 6-6z' fill='%233f7fe0'/%3E%3Cpath d='M10 14v5M7.5 16.5h5' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='21' cy='15' r='1.5' fill='%23fff'/%3E%3Ccircle cx='24' cy='18' r='1.5' fill='%23fff'/%3E%3C/svg%3E") center/30px no-repeat;
  box-shadow: 0 2px 4px #1f4a9a55;
}
#login#login #l-create #l-go::after { content: '›'; position: absolute; right: 28px; top: 50%; translate: 0 -54%; font-size: 40px; line-height: 1; }
#login#login #l-create .alt { margin: 0; text-align: center; }

/* ── บรรทัดท้าย: กุญแจ + ข้อความเงียบ ๆ ── */
#login#login #l-hint { margin: 16px 0 0; color: #9a8a70; font-size: 13.5px; text-align: center; }
#login#login > .login-card:has(#l-create:not([hidden])) #l-hint::before {
  content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; opacity: .75;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.5' y='7' width='11' height='8' rx='2' fill='%239a8a70'/%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' stroke='%239a8a70' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
#login#login #l-err:not(:empty) { margin-top: 12px; }
#login#login #l-err:empty { display: none; }

/* ── จอแคบ / มือถือ: เรียงลงมา ตัวละครบน ฟอร์มล่าง ── */
@media (max-width: 860px) {
  #login#login > .login-card { padding: 26px 14px 18px; margin: 76px auto 24px; border-radius: 24px; }
  #login#login > .login-card:has(#l-create:not([hidden])) { width: min(560px, calc(100vw - 20px)); }
  #login#login .brand { top: -62px; }
  #login#login .brand img { width: 250px; }
  #login#login .brand::before, #login#login .brand::after { top: 26px; width: 34px; height: 28px; }
  #login#login .brand::before { left: -30px; } #login#login .brand::after { right: -30px; }
  #login#login #l-create .cc { grid-template-columns: 1fr; gap: 16px; padding: 12px; }
  #login#login #l-create .cprev { min-height: 0; height: 330px; }
  #login#login #l-create .cc-title span { font-size: 27px; }
  #login#login #l-create .cc-title small { font-size: 14px; }
  #login#login #l-create .swatches { gap: 8px; justify-content: space-between; }
  #login#login #l-create .swatches button { width: 34px; height: 34px; border-width: 2px; }
  #login#login #l-create #l-go { height: 62px; font-size: 22px; }
  #login#login #l-create #l-go::before { width: 42px; height: 42px; background-size: 26px; }
  /* มือถือ: การ์ดยาวกว่าจอ ปุ่มหลักตกขอบล่าง (390×844 ปุ่มอยู่ที่ y≈1031) — เกาะขอบล่างจอขณะเลื่อน */
  #login#login #l-create #l-go { position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 3; }
  /* ปุ่มเกาะขอบล่างลอยทับปุ่มเพศ/สีผมตอนเปิดหน้า (ดูเหมือนซ้อนกันพัง) — แถบจางสีการ์ดเหนือปุ่ม ของที่เลื่อนผ่านใต้ปุ่มจางหายนุ่ม ๆ */
  #login#login #l-create #l-go { box-shadow: 0 5px 0 #1f4a9a, 0 10px 18px #2c62c440, 0 24px 0 14px var(--lg-card), 0 -20px 18px 10px var(--lg-card), inset 0 2px 0 #ffffff55; }
}
/* มือถือแนวนอน (จอเตี้ย): ตัวละครซ้าย ฟอร์มขวา เหมือนคอม แต่ย่อทุกอย่าง */
@media (pointer: coarse) and (max-height: 520px) and (min-width: 600px) {
  #login#login > .login-card { padding: 16px 12px 12px; margin: 50px auto 12px; }
  #login#login > .login-card:has(#l-create:not([hidden])) { width: min(900px, calc(100vw - 16px)); }
  #login#login .brand img { width: 170px; } #login#login .brand { top: -48px; }
  #login#login .brand::before, #login#login .brand::after { display: none; }
  #login#login .sub, #login#login .l-online, #login#login #l-create .cc-title { display: none; }   /* จอเตี้ย: ปุ่มหลักต้องเห็นโดยไม่ต้องเลื่อนมาก */
  #login#login #l-create .cc { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 14px; padding: 10px; }
  #login#login #l-create .cprev { height: 100%; min-height: 250px; }
  #login#login #l-create .cc-opt { gap: 8px; }
  #login#login #l-create .cc-title span { font-size: 22px; }
  #login#login #l-create .cc-title small { display: none; }
  #login#login #l-create #l-name, #login#login #l-create #l-dice { height: 46px; }
  #login#login #l-create .cc-seg .chip { height: 44px; font-size: 16px; }
  /* 667×375: เก้าสีตกสองแถว แล้วปุ่มหลักทับแถวล่าง — บังคับแถวเดียว วงเล็กลง */
  #login#login #l-create .swatches { flex-wrap: nowrap; gap: 4px; height: auto; max-height: none; justify-content: space-between; }
  #login#login #l-create .swatches button { width: 28px; height: 28px; border-width: 2px; }
  /* 667×375: ฟอร์มยาวกว่าคอลัมน์ ปุ่มหลัก (sticky) ลอยทับแถวสีผม → ย่อทุกแถวให้พอดีจอ ปุ่มอยู่ตำแหน่งจริงของมัน */
  #login#login #l-create .cc-opt { gap: 6px; padding: 2px 4px; justify-content: flex-start; }
  #login#login #l-create .cc-field { gap: 4px; }
  #login#login #l-create .cc-lab { font-size: 15px; }
  #login#login #l-create #l-name, #login#login #l-create #l-dice { height: 42px; }
  #login#login #l-create .cc-seg .chip { height: 42px; }
  #login#login #l-create .swatches { padding: 2px; }
  #login#login #l-create .swatches button { width: 26px; height: 26px; }
  #login#login #l-create #l-go { height: 48px; font-size: 20px; margin-top: 4px; }
  #login#login #l-create #l-go::before { width: 34px; height: 34px; background-size: 21px; left: 8px; }
  #login#login #l-create #l-go { position: sticky; bottom: max(6px, env(safe-area-inset-bottom)); z-index: 3; }   /* จอเตี้ย: เดิมโดนตัดครึ่งที่ขอบล่าง */
}

/* ปุ่มภาษาบนหน้าเข้าเกม (client/i18n.js) — มุมขวาบนของการ์ด ไม่แย่งที่ปุ่ม Google/Apple */
.login-card { position: relative; }
.login-card .l-lang { position: absolute; top: 12px; right: 12px; min-width: 44px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #a4ccc0; background: #f3f8f4; color: #2e5c4f; font: 600 13px/1 inherit; letter-spacing: .04em; cursor: pointer; }
.login-card .l-lang:hover { background: #ddf0e9; }

/* ── ชื่อตัวละคร (4 ต.ค. · client/name-rules.js): สร้างใหม่ / เข้าตัวเดิม แยกแท็บ · เหตุผลใต้ช่องชื่อทันทีที่พิมพ์ ── */
#login#login #l-create .cc-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 18px; background: #f3e8d2; box-shadow: inset 0 1px 3px #5a3a1418; }
#login#login #l-create .cc-modes[hidden] { display: none; }
#login#login #l-create .cc-modes button { height: 46px; border: 0; border-radius: 14px; background: transparent; color: #7a6040; font: 700 17px var(--font-head, inherit); cursor: pointer; }
#login#login #l-create .cc-modes button.on { background: #fff; color: var(--lg-blue-d); box-shadow: 0 2px 0 #e3d3ae, 0 3px 8px #5a3a1420; }
/* แท็บ "เข้าตัวเดิม": ซ่อนฟอร์มสร้างตัว (ชื่อ เพศ ทรงผม สีผม ปุ่มสร้าง) */
#login#login #l-create .cc-opt.is-mine > :is(.cc-field, #l-go, .alt) { display: none; }
#login#login #l-create .name-msg { min-height: 1.3em; font-size: 14px; line-height: 1.3; color: var(--lg-sub); }
#login#login #l-create .name-msg.bad { color: #c0392b; font-weight: 600; }
#login#login #l-create .name-msg.good { color: #2e7d4f; font-weight: 600; }
#login#login #l-create .name-msg.bad::before { content: '✕ '; }
#login#login #l-create .name-msg.good::before { content: '✓ '; }
#login#login #l-create #l-name[aria-invalid="true"] { border-color: #e0a097; }
#login#login #l-create .name-mine { display: grid; gap: 12px; }
#login#login #l-create .name-mine[hidden] { display: none; }
#login#login #l-create .nm-sec { display: grid; gap: 6px; padding: 12px; border-radius: 16px; background: #fffbef; border: 1.5px solid #eadcc0; }
#login#login #l-create .nm-sec > b { font: 700 16px var(--font-head, inherit); color: var(--lg-ink); }
#login#login #l-create .nm-sec > small, #login#login #l-create .nm-none { color: var(--lg-sub); font-size: 13px; }
#login#login #l-create .nm-list { display: grid; gap: 6px; max-height: 180px; overflow: auto; }
#login#login #l-create .nm-char { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1.5px solid #c9dbf7; background: var(--lg-blue-l); color: var(--lg-ink); cursor: pointer; font: 700 18px var(--font-head, inherit); }
#login#login #l-create .nm-char span { color: var(--lg-blue-d); font-size: 15px; }
#login#login #l-create .nm-char:active { translate: 0 1px; }
#login#login #l-create .nm-rc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; }
#login#login #l-create .nm-rc input { min-width: 0; height: 46px; padding: 0 12px; border-radius: 12px; border: 1.5px solid #e3d3ae; background: #fff; font: 600 16px var(--font-head, inherit); color: var(--lg-ink); }
#login#login #l-create .nm-rc button { height: 46px; padding: 0 16px; border-radius: 12px; }
#login#login #l-create .name-gg { margin: 0; padding: 12px; border: 1.5px solid #eadcc0; border-radius: 16px; background: #fffbef; }
@media (max-width: 560px) { #login#login #l-create .nm-rc { grid-template-columns: 1fr 1fr; } #login#login #l-create .nm-rc button { grid-column: 1 / -1; } }
@media (pointer: coarse) and (max-height: 520px) and (min-width: 600px) {
  #login#login #l-create .cc-modes { padding: 3px; border-radius: 14px; }
  #login#login #l-create .cc-modes button { height: 32px; font-size: 14px; border-radius: 11px; }
  /* แท็บเพิ่มมาหนึ่งแถว — ป้าย "ชื่อตัวละคร" ซ้ำกับ placeholder ในช่อง ตัดออกให้แถวสีผมยังพ้นปุ่มหลัก (844×390) */
  #login#login #l-create .cc-opt:has(#l-modes:not([hidden])) :is(label.cc-field, .cc-gender) > .cc-lab { display: none; }   /* ปุ่ม ♂ ♀ บอกตัวเองอยู่แล้ว */
  #login#login #l-create .name-msg { font-size: 12.5px; min-height: 0; }
  #login#login #l-create .nm-rc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; }
  #login#login #l-create .nm-rc input { font-size: 14px; padding: 0 8px; }
  #login#login #l-create .name-mine { gap: 6px; }
  #login#login #l-create .nm-sec { padding: 8px; gap: 4px; }
  #login#login #l-create .nm-char { min-height: 40px; font-size: 16px; }
  #login#login #l-create .nm-list { max-height: 96px; }
  #login#login #l-create .nm-rc input, #login#login #l-create .nm-rc button { height: 40px; }
}