/* MYTHAVON — server and character entry flow */
.entryGate{
  --entry-accent:#7fdfff;
  position:fixed;
  inset:0;
  z-index:72;
  display:none;
  overflow:auto;
  color:#f7f6ff;
  font-family:'Leelawadee UI','Segoe UI',Tahoma,sans-serif;
  background:#080d1c;
  isolation:isolate;
}
.entryGate.isOpen{display:block}
/* ก่อนเข้าเกม ซ่อน HUD และป้ายรางวัลที่อยู่คนละชั้นกับหน้าเลือกตัวละคร */
body:has(.entryGate.isOpen) :is(#hud,#chatBox,#chatFab,#tutBox,#tuSpot){visibility:hidden!important;pointer-events:none!important}
.entryGate #asShowcase{display:none!important}
.entryGate::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-3;
  background-position:center;
  background-size:cover;
  filter:saturate(.94) brightness(.62);
  transform:scale(1.015);
}
#serverSelect::before{background-image:url('assets/ui/loading/aether-city-v1.webp')}
#characterSelect::before{background-image:url('assets/ui/hall-of-heroes-v1.webp')}
.entryGate::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,9,22,.92),rgba(7,11,25,.54) 48%,rgba(5,8,19,.82)),
    linear-gradient(180deg,rgba(5,9,22,.4),rgba(4,7,17,.88));
}
.entryShell{
  width:min(1180px,100%);
  min-height:100svh;
  margin:auto;
  padding:clamp(24px,4vh,46px) clamp(18px,4vw,54px) 30px;
  display:flex;
  flex-direction:column;
}
.entryTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:clamp(20px,4vh,38px);
}
.entryLogo{display:block;width:clamp(225px,25vw,300px);height:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
.entryAccount{
  margin-top:7px;
  padding:8px 12px;
  border:1px solid rgba(227,234,255,.16);
  border-radius:11px;
  color:#c4c7d8;
  font-size:12.5px;
  background:rgba(7,10,23,.58);
  backdrop-filter:blur(10px);
}
.entryHeading{max-width:760px;margin-bottom:22px}
.entryKicker{color:#8ce7ff;font-size:12.5px;font-weight:950;letter-spacing:1.6px;text-transform:uppercase}
.entryHeading h1{margin:5px 0 7px;color:#fff;font-size:clamp(31px,4.2vw,52px);line-height:1.08;letter-spacing:-.6px;text-shadow:0 5px 25px #000}
.entryHeading p{color:#cbd0e2;font-size:14px;line-height:1.6}
.entryServerGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.entryServerCard{
  position:relative;
  min-height:194px;
  padding:17px;
  overflow:hidden;
  border:1px solid rgba(228,235,255,.18);
  border-radius:20px;
  color:#f8f8ff;
  text-align:left;
  font:inherit;
  background:linear-gradient(155deg,rgba(17,23,48,.92),rgba(7,11,26,.86));
  box-shadow:0 22px 58px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(15px);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
button.entryServerCard{cursor:pointer}
button.entryServerCard:hover{transform:translateY(-4px);border-color:#8be3ff;box-shadow:0 24px 64px rgba(0,0,0,.38),0 0 32px rgba(104,213,255,.14)}
.entryServerTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
.entryServerNo{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.17);border-radius:14px;color:#fff3b3;font-size:22px;background:linear-gradient(145deg,rgba(255,220,112,.2),rgba(88,129,255,.2))}
.entryServerCard h2{margin:0 0 7px;font-size:21px;line-height:1.25}
.entryServerCard p{min-height:38px;color:#b9bdd0;font-size:12.5px;line-height:1.5}
.entryServerMeta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.09);color:#d8d9e5;font-size:12.5px}
.entryFootNote{margin-top:auto;padding-top:22px;color:#aeb2c5;font-size:12.5px;line-height:1.55}

.entryBack{
  min-height:38px;
  padding:7px 12px;
  border:1px solid rgba(227,234,255,.18);
  border-radius:11px;
  color:#e2e4ee;
  font:800 12px inherit;
  cursor:pointer;
  background:rgba(7,10,23,.64);
  backdrop-filter:blur(10px);
}
.entryBack:hover{border-color:#8be3ff}

/* 🎬 แถวหมายเหตุ + ปุ่มดูตัวอย่างเอนด์เกม — เจ้าของสั่ง 10-11 ก.ย.2569
   ─────────────────────────────────────────────────────────────────────────
   🔴 ตรวจจริงก่อนปล่อยเจอ 2 ชั้น:
     ① ใส่เป็น <div>/<button> แยกเป็น sibling ใหม่ต่อจาก entryFootNote — #characterSelect
        .entryShell ล็อก grid-template-rows ไว้ตายตัว 4 แถว sibling ใหม่เลยกลายเป็นแถวที่ 5
        ที่กริดไม่ได้กันที่ไว้ให้ ดันเนื้อหาลงนอกจอทั้งยวง (วัดจริง top ~787px บนจอสูง 450px)
        → ย้ายมาไว้ "ในแถวเดิมของ entryFootNote" แทน ไม่สร้าง sibling ใหม่
     ② ต่อให้ยัดเข้าแถวเดิม ปุ่มก็ยังมีความสูงของมันเอง (min-height/padding) ทำให้แถวนั้นสูงขึ้น
        ~10px วัดจริงแล้วหน้านี้ "ล้นจออยู่แล้วก่อนผมแตะ" ที่จอ 720px สูง (เนื้อหาต้องการ 719px
        มีที่ให้แค่ 682px — ขาดอยู่ ~37px ก่อนผมเข้ามาด้วยซ้ำ) และ body{overflow:hidden} ทำให้
        ส่วนที่ล้นนั้น "เลื่อนดูไม่ได้เลย" ไม่ใช่แค่ต้องสกอลล์ — เพิ่มอะไรที่มีความสูงแม้นิดเดียว
        ก็ทำให้ปัญหาเดิมแย่ลงอีก
   ✅ แก้ ① ด้วยการยัดเข้าแถวเดิม (เสร็จแล้ว) + แก้ ② ด้วยการดึงปุ่มออกจากการไหลเนื้อหา
      (position:absolute) ให้ "ไม่กินความสูงเพิ่มเลยแม้แต่พิกเซลเดียว" ลอยอยู่มุมขวาของแถวเดิม
      แทนที่จะไหลต่อจากข้อความ — ปัญหาการล้นจอ ~37px ที่มีอยู่ก่อนแล้วจึงไม่แย่ลงจากงานนี้
      ⚠️ ปัญหาล้นจอเดิม (ไม่เกี่ยวกับปุ่มนี้) ยังไม่ได้แก้ — เป็นบั๊กที่มีอยู่ก่อนงานนี้ นอกขอบเขตที่สั่ง */
.entryFootRow{position:relative;padding-right:150px}
.entryDemoBtn{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  padding:5px 13px;
  border:1.5px solid rgba(255,213,74,.55);
  border-radius:9px;
  color:#ffe6ae;
  font:800 12px inherit;
  cursor:pointer;
  background:rgba(60,46,12,.55);
  backdrop-filter:blur(10px);
  white-space:nowrap;
}
.entryDemoBtn:hover{border-color:#ffd54a;color:#fff0c8;background:rgba(80,60,14,.65)}
@media (max-width:640px){
  .entryFootRow{position:static;padding-right:0;text-align:center}
  .entryDemoBtn{position:static;transform:none;display:block;margin:10px auto 0}
}
.entryRealmPill{display:inline-flex;align-items:center;gap:8px;margin-top:8px;color:#96e9ff;font-size:12.5px;font-weight:900}
.entryRealmPill::before{content:'';width:7px;height:7px;border-radius:50%;background:#75e5a2;box-shadow:0 0 12px #75e5a2}
.entryCharacterGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.entryCharCard{
  min-height:176px;
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  align-items:center;
  gap:15px;
  padding:17px;
  border:1px solid rgba(228,235,255,.17);
  border-radius:20px;
  background:linear-gradient(155deg,rgba(17,22,45,.92),rgba(7,10,24,.86));
  box-shadow:0 18px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(15px);
}
.entryCharCard.hasChar{border-color:color-mix(in srgb,var(--char-accent,#7fdfff) 48%,rgba(255,255,255,.15))}
.entryCharPortrait{position:relative;display:grid;place-items:center;width:78px;height:78px;border:1px solid rgba(255,255,255,.15);border-radius:19px;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.13),rgba(5,8,20,.72));overflow:hidden}
.entryCharPortrait img{width:100%;height:100%;object-fit:cover}
.entryCharPortrait.empty{color:#dcecff;font-size:31px}
.entrySlotNo{position:absolute;left:5px;top:5px;min-width:21px;height:21px;display:grid;place-items:center;border-radius:7px;color:#07101b;font-size:12.5px;font-weight:950;background:#ffe493}
.entryCharInfo{min-width:0}
.entryCharInfo h2{margin:0 0 3px;overflow:hidden;color:#fff;font-size:18px;text-overflow:ellipsis;white-space:nowrap}
.entryClassName{color:var(--char-accent,#8fe5ff);font-size:12.5px;font-weight:900}
.entryCharMeta{margin:9px 0 5px;color:#c3c6d6;font-size:12.5px;line-height:1.5}
.entryConcurrency{min-height:18px;margin:0 0 9px;font-size:12.5px;font-weight:800;line-height:1.35}
.entryConcurrency.multi{color:#75e5a2}
.entryConcurrency.switch{color:#d8bd7d}
.entryPlay,.entryCreate{
  min-height:37px;
  padding:7px 12px;
  border:1px solid color-mix(in srgb,var(--char-accent,#8fe5ff) 58%,white);
  border-radius:10px;
  color:#07111b;
  font:950 12px inherit;
  cursor:pointer;
  background:linear-gradient(135deg,color-mix(in srgb,var(--char-accent,#8fe5ff) 74%,white),#ffe28d);
}
.entryCreate{border-color:rgba(255,227,150,.58);background:linear-gradient(135deg,#fff1b5,#e5b957)}

@media(max-width:880px){
  .entryServerGrid,.entryCharacterGrid{grid-template-columns:1fr 1fr}
  .entryShell{padding:22px 15px 24px}
  .entryTop{margin-bottom:23px}
  .entryHeading{text-align:center;margin-inline:auto}
}
@media(max-width:580px){
  .entryTop{align-items:center}
  .entryLogo{width:210px}
  .entryAccount{display:none}
  .entryHeading{margin-bottom:17px}
  .entryHeading h1{font-size:31px}
  .entryHeading p{font-size:12.5px}
  .entryServerGrid,.entryCharacterGrid{grid-template-columns:1fr}
  .entryServerCard{min-height:186px;padding:17px}
  .entryServerTop{margin-bottom:18px}
  .entryCharCard{min-height:150px}
  .entryFootNote{text-align:center}
}
@media(prefers-reduced-motion:reduce){button.entryServerCard{transition:none}}

html.lowSpec .entryGate::before{transform:none;filter:saturate(.86) brightness(.6)}
html.lowSpec .entryServerCard,html.lowSpec .entryCharCard,html.lowSpec .entryAccount,
html.lowSpec .entryBack{backdrop-filter:none;box-shadow:0 10px 28px rgba(0,0,0,.25)}
@media(max-width:580px){
  .entryGate::before{transform:none}
  .entryServerCard,.entryCharCard,.entryAccount,.entryBack{backdrop-filter:none}
}

/* ═══ 🔐 หน้าสมัครสมาชิก / เข้าสู่ระบบ ═══
   ใช้โทนเดียวกับหน้าเลือกเซิร์ฟเวอร์ ไม่สร้างภาษาใหม่ให้ผู้เล่นต้องเรียนรู้ */
.agBox{
  width:min(430px,100%);
  margin:6px auto 0;
  background:rgba(9,13,28,.72);
  border:1px solid rgba(227,234,255,.14);
  border-radius:18px;
  padding:18px 20px 16px;
  backdrop-filter:blur(8px);
}
.agTabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.agTab{
  flex:1 1 auto; min-height:38px; padding:8px 10px;
  border:1px solid rgba(227,234,255,.16); border-radius:11px;
  background:rgba(7,10,23,.6); color:#b9c2dc;
  font:800 12.5px inherit; cursor:pointer; white-space:nowrap;
}
.agTab:hover{border-color:var(--entry-accent);color:#eaf2ff}
.agTab.on{background:var(--entry-accent);border-color:var(--entry-accent);color:#07101f}
.agPane.hide{display:none}
.agPane label{
  display:block; margin:10px 0 4px;
  font:700 12px inherit; color:#9fb0d0;
}
.agPane label em{font-style:normal;color:#6f7f9d;font-weight:600}
.agPane input{
  width:100%; box-sizing:border-box; min-height:42px;
  padding:9px 12px;
  background:rgba(6,9,20,.85);
  border:1.5px solid rgba(227,234,255,.18);
  border-radius:11px; color:#f2f5ff;
  font:700 14px inherit;
}
.agPane input:focus{outline:none;border-color:var(--entry-accent);
  box-shadow:0 0 0 3px rgba(127,223,255,.18)}
/* 👁 ปุ่มดู/ซ่อนรหัสผ่าน — วางทับขอบขวาในช่อง ไม่ดันเลย์เอาต์
   (มาแทนวิธีเดิมที่ปิดบังด้วย CSS แล้วทำให้ตัวจำรหัสผ่านใช้ไม่ได้) */
.agPwWrap{position:relative}
.agPwWrap input{padding-right:46px}
.agEye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; padding:0; line-height:1;
  border:none; border-radius:9px; cursor:pointer;
  background:rgba(227,234,255,.10); color:#cfe0ff; font-size:16px;
}
.agEye:hover{background:rgba(227,234,255,.20)}
.agGo{
  width:100%; min-height:46px; margin-top:14px;
  border:none; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg,#7fdfff,#5aa8ff);
  color:#06101f; font:900 14.5px inherit;
}
.agGo:hover{filter:brightness(1.08)}
.agGo:disabled{opacity:.5;cursor:wait}
.agWarn{margin-top:10px;font:600 11.5px inherit;color:#ffc48a;line-height:1.65}
/* ข้อความผลลัพธ์ — ต้องเห็นชัดว่าสำเร็จหรือพลาด ไม่ใช่ข้อความเทาๆ กลืนพื้น */
.agMsg{display:none;margin-top:12px;padding:10px 12px;border-radius:11px;
  font:700 12.5px inherit;line-height:1.7;white-space:pre-line}
.agMsg.ok{display:block;background:rgba(110,225,150,.14);border:1px solid rgba(110,225,150,.5);color:#8ef0b4}
.agMsg.no{display:block;background:rgba(255,120,120,.13);border:1px solid rgba(255,120,120,.5);color:#ff9d9d}
.agSkip{margin-top:16px;padding-top:13px;border-top:1px solid rgba(227,234,255,.12);text-align:center}
.agHint{margin-top:6px;font:600 11px inherit;color:#7c8aa8}
.agSrv{margin-top:12px;font:600 11px inherit;color:#7c8aa8;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.agSrv input{flex:1 1 150px;min-width:130px;min-height:30px;padding:4px 8px;
  background:rgba(6,9,20,.8);border:1px solid rgba(227,234,255,.14);
  border-radius:8px;color:#9fb0d0;font:600 11px inherit}
@media(max-width:480px){.agBox{padding:15px 14px 13px}.agTab{font-size:11.5px;padding:7px 6px}}

/* ═══════════════════════════════════════════════════════════════════════════
   🎨 หน้าล็อกอิน — ทำให้ "ดูเป็นเกม" ไม่ใช่ "ฟอร์มเว็บ"
   ─────────────────────────────────────────────────────────────────────────
   เจ้าของเทียบกับเกมอื่น: "เห็นไหมคนอื่นเค้าทำ ทำไมดูน่าเล่นจัง"
   สิ่งที่ต่างที่สุดหลังเทียบภาพต่อภาพ:
     ① เขามีภาพฉากในเกมเป็นพื้นหลัง → เห็นทันทีว่าเกมหน้าตายังไงก่อนสมัคร
        ของเรา #authGate ไม่เคยตั้ง background-image เลย (มีแต่หน้าเลือกเซิร์ฟ/ตัวละคร)
        เลยเป็นจอดำล้วน = ไม่รู้ว่าเกมอะไร น่าเล่นไหม
     ② กล่องเขานูนมีเงา ปุ่มมีมิติ ของเราแบนหมด
     ③ เขาโชว์ "ออนไลน์ 81 คน · ตัวละคร 4,215 ตัว" = มีคนเล่นอยู่จริง กล้าสมัคร
   ⚠️ ใช้ภาพที่มีอยู่แล้วในโปรเจกต์ ไม่เพิ่มไฟล์ใหม่ ไม่กินเน็ตเพิ่ม
   ═══════════════════════════════════════════════════════════════════════════ */
#authGate::before{
  background-image:url('assets/ui/loading/aether-frontier-v1.webp');
  filter:saturate(1.02) brightness(.52);
}
/* ม่านไล่เฉดจากล่าง — ให้ตัวหนังสืออ่านออกโดยไม่ต้องทับภาพจนมืดทั้งจอ */
#authGate::after{
  background:radial-gradient(ellipse 120% 85% at 50% 42%,rgba(8,13,28,.20) 0%,rgba(8,13,28,.72) 62%,rgba(8,13,28,.94) 100%);
}
/* กล่องฟอร์ม — นูนขึ้น มีขอบเรืองบางๆ เหมือนแผ่นป้ายในเกม */
#authGate .agBox{
  background:linear-gradient(168deg,rgba(26,22,44,.90),rgba(12,15,32,.93));
  border:1.5px solid rgba(255,212,121,.30);
  border-radius:20px;
  box-shadow:0 20px 54px rgba(0,0,0,.62),0 0 0 1px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.09);
  padding:20px 22px 18px;
}
/* ปุ่มหลัก — ไล่เฉด + ขอบล่างเข้ม = ดูนูนกดได้ ไม่ใช่แผ่นแบน */
#authGate .agGo{
  border-radius:13px;
  box-shadow:0 4px 0 rgba(0,0,0,.34),0 8px 18px rgba(0,0,0,.34);
  transition:transform .08s,box-shadow .08s;
}
#authGate .agGo:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.34)}
/* แท็บ — โค้งขึ้น มีเงาตอนเลือกอยู่ */
#authGate .agTab{border-radius:12px;min-height:40px}
#authGate .agTab.on{box-shadow:0 3px 12px rgba(127,223,255,.30)}
/* ช่องกรอก — เข้มลงให้ตัดกับกล่อง อ่านง่ายขึ้นบนพื้นหลังภาพ */
#authGate .agPane input{
  background:rgba(6,9,20,.72);
  border-radius:11px;
  border:1.5px solid rgba(227,234,255,.16);
}
#authGate .agPane input:focus{
  border-color:rgba(255,212,121,.55);
  box-shadow:0 0 0 3px rgba(255,212,121,.13);
  outline:none;
}
#authGate .agPane label{color:#c3cee6;font-size:12.5px}
/* 🟢 ป้ายสถานะเซิร์ฟเวอร์ล่างสุด — บอกว่ามีคนเล่นอยู่จริง */
.agStat{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:13px;
}
.agStat span{
  background:rgba(8,12,26,.78);border:1px solid rgba(227,234,255,.16);
  border-radius:999px;padding:5px 13px;font:700 12px inherit;color:#b9c2dc;
  display:inline-flex;align-items:center;gap:6px;
}
.agStat b{color:#ffd479;font-weight:800}
.agStat .dot{width:8px;height:8px;border-radius:50%;background:#7ee06a;
  box-shadow:0 0 8px #7ee06a}
.agStat .dot.off{background:#ff7a7a;box-shadow:0 0 8px #ff7a7a}
@media (max-width:520px){
  #authGate .agBox{padding:16px 15px 14px;border-radius:17px}
  .agStat span{font-size:11.5px;padding:4px 10px}
}

/* ═══ Entry flow refresh — one calm layout, one clear action per screen ═══ */
.entryGate{padding:clamp(16px,3vw,38px);overflow:auto;overscroll-behavior:contain}
.entryGate::after{background:linear-gradient(90deg,rgba(5,9,20,.92) 0%,rgba(5,9,20,.70) 45%,rgba(5,9,20,.30) 100%),linear-gradient(0deg,rgba(5,8,18,.90),transparent 48%)}
.entryShell{width:min(1180px,100%);min-height:min(680px,calc(100svh - 76px));margin:auto;padding:0;display:grid;grid-template-columns:minmax(300px,.78fr) minmax(420px,1fr);grid-template-rows:auto 1fr auto;column-gap:clamp(32px,6vw,90px);align-items:center}
.entryTop{grid-column:1/-1;align-self:start;padding:2px 0 20px;border-bottom:1px solid rgba(255,255,255,.12)}
.entryLogo{width:clamp(170px,20vw,250px)}
.entryAccount{max-width:430px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#c6d1e8;background:rgba(7,11,24,.62);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 13px}
.entryHeading{align-self:center;text-align:left;max-width:470px;margin:0}
.entryHeading h1{font-size:clamp(38px,5vw,68px);line-height:.98;letter-spacing:-2px;margin:10px 0 16px;text-wrap:balance}
.entryHeading p{font-size:15px;line-height:1.75;max-width:430px;color:#b6c2dc}
.entryKicker{display:inline-flex;align-items:center;gap:8px;color:#ffd780;letter-spacing:.18em}
.entryKicker::before{content:'';width:24px;height:1px;background:currentColor}
.entryFootNote{grid-column:1/-1;margin:18px 0 0;text-align:left;color:#8795b2;border-top:1px solid rgba(255,255,255,.09);padding-top:14px}

#authGate .agBox{grid-column:2;grid-row:2;justify-self:end;width:min(100%,460px);max-height:calc(100svh - 150px);overflow:auto;scrollbar-width:thin;padding:18px 20px 16px}
#authGate .entryHeading{grid-column:1;grid-row:2}
#authGate .entryTop{grid-row:1}
#authGate .agSrv{display:none}
html.uiDebug #authGate .agSrv{display:flex}
#authGate .agGoogle{min-height:44px}
#authGate .agTabs{margin-top:12px}
#authGate .agPane label{margin-top:8px}
#authGate .agPane input{min-height:40px}
#authGate .agGo{min-height:43px;margin-top:11px}
#authGate .agSkip{margin-top:12px;padding-top:10px}
#authGate .agHint{line-height:1.45}
#authGate .agStat{margin-top:10px}

#serverSelect .entryHeading,#characterSelect .entryHeading{grid-column:1;grid-row:2}
.entryServerGrid,.entryCharacterGrid{grid-column:2;grid-row:2;width:100%;align-self:center}
.entryServerGrid{display:block}
.entryServerCard{position:relative;width:100%;min-height:310px;padding:28px;text-align:left;border-radius:26px;background:linear-gradient(145deg,rgba(24,34,58,.94),rgba(9,14,29,.94));border:1px solid rgba(255,255,255,.16);box-shadow:0 26px 70px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08);overflow:hidden}
.entryServerCard::before{content:'';position:absolute;inset:-35% -20% auto 35%;height:260px;background:radial-gradient(circle,rgba(98,201,255,.22),transparent 68%);pointer-events:none}
.entryServerCard:hover{transform:translateY(-4px);border-color:rgba(127,223,255,.6);box-shadow:0 32px 80px rgba(0,0,0,.5),0 0 0 1px rgba(127,223,255,.15)}
.entryServerTop{display:flex;align-items:center;justify-content:space-between}
.entryServerNo{font-size:50px;font-weight:950;line-height:1;color:rgba(255,255,255,.12);letter-spacing:-3px}
.entryRecommended{font-size:11px;font-weight:900;letter-spacing:.08em;color:#102315;background:#82e39a;padding:6px 10px;border-radius:999px}
.entryServerBody{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:50px}
.entryServerEyebrow{color:#83ddff;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.entryServerCard h2{font-size:36px;margin:5px 0 8px;color:#fff}
.entryServerCard p{max-width:390px;margin:0;color:#aebbd4;font-size:14px;line-height:1.6}
.entryServerState{flex:0 0 auto;display:flex;align-items:center;gap:8px;color:#91e9a6;font-weight:800;font-size:13px}.entryServerState i{width:9px;height:9px;border-radius:50%;background:#7fe49a;box-shadow:0 0 12px #7fe49a}
.entryServerMeta{margin-top:28px;padding-top:17px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;color:#8795b0;font-size:12px}
.entryServerMeta strong{color:#eaf7ff;font-size:14px}.entryServerMeta strong b{color:#80dcff;font-size:18px;margin-left:8px}

.entryCharacterGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:520px;overflow:auto;padding:3px;scrollbar-width:thin}
.entryCharCard{min-height:168px;padding:15px;display:grid;grid-template-columns:76px 1fr;gap:14px;border-radius:20px;background:linear-gradient(145deg,rgba(22,29,49,.94),rgba(9,14,27,.94));border:1px solid rgba(255,255,255,.13);box-shadow:0 14px 34px rgba(0,0,0,.26)}
.entryCharCard.hasChar{border-color:color-mix(in srgb,var(--char-accent) 35%,rgba(255,255,255,.12))}
.entryCharPortrait{width:76px;height:76px;border-radius:18px;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--char-accent) 34%,transparent),rgba(5,8,18,.75));border:1px solid color-mix(in srgb,var(--char-accent) 48%,transparent)}
.entryCharPortrait img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 7px 12px rgba(0,0,0,.45))}
.entrySlotNo{top:7px;left:8px;background:rgba(4,7,15,.78)}
.entryCharInfo h2{font-size:19px;margin:1px 0 2px;color:#fff}.entryClassName{font-size:12px;color:var(--char-accent)}.entryCharMeta{font-size:11px;color:#8997b3;margin-top:4px}.entryConcurrency{display:none}
.entryPlay,.entryCreate{min-height:38px;margin-top:12px;border-radius:11px;font-size:12.5px}

@media(max-width:820px){
 .entryGate{padding:14px}.entryShell{display:block;min-height:0}.entryTop{padding-bottom:12px}.entryAccount{font-size:10.5px;max-width:48vw}.entryHeading{text-align:center;margin:24px auto 16px}.entryHeading h1{font-size:34px;letter-spacing:-1px;margin:8px 0}.entryHeading p{font-size:12.5px;line-height:1.55;margin:auto}.entryKicker::before{display:none}
 #authGate .agBox{width:min(100%,480px);max-height:none;margin:0 auto}.entryServerGrid,.entryCharacterGrid{width:min(100%,600px);margin:0 auto}.entryServerCard{min-height:240px;padding:20px}.entryServerBody{margin-top:28px}.entryServerCard h2{font-size:30px}.entryFootNote{text-align:center;margin-top:14px}
 .entryCharacterGrid{grid-template-columns:1fr;max-height:none}.entryCharCard{min-height:142px}.entryLogo{width:165px}
}
@media(max-width:480px){.entryHeading{margin:18px auto 12px}.entryHeading h1{font-size:29px}.entryHeading p{display:none}.entryServerCard{min-height:220px}.entryServerBody{align-items:flex-start;flex-direction:column}.entryServerState{position:absolute;right:20px;top:74px}.entryServerMeta span{display:none}.entryServerMeta{justify-content:flex-end}.entryCharCard{grid-template-columns:64px 1fr}.entryCharPortrait{width:64px;height:64px}.entryCharPortrait img{width:50px;height:50px}}

/* ═══ 2026 entry royal refresh — readable, cute fantasy UI without extra images ═══ */
#authGate::before{filter:saturate(1.08) brightness(.46) contrast(1.04)}
#authGate::after{background:radial-gradient(ellipse 80% 70% at 72% 42%,rgba(79,135,255,.13),transparent 61%),linear-gradient(90deg,rgba(4,8,18,.94),rgba(5,9,22,.68) 48%,rgba(6,9,20,.38)),linear-gradient(0deg,rgba(5,7,18,.92),transparent 55%)}
.entryHeading h1{background:linear-gradient(180deg,#fffdf4 12%,#ffe3a0 66%,#d69b46);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 16px rgba(0,0,0,.64))}
.entryPromise{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.entryPromise span{padding:6px 10px;border:1px solid rgba(255,221,143,.25);border-radius:999px;background:rgba(14,18,38,.58);color:#e8e4f5;font-size:11.5px;font-weight:800;box-shadow:inset 0 1px rgba(255,255,255,.06)}
.entryClassRibbon{display:flex;align-items:center;gap:5px;margin-top:23px}.entryClassRibbon img{width:34px;height:34px;padding:2px;border:1px solid rgba(255,255,255,.15);border-radius:11px;background:rgba(9,12,29,.57);box-shadow:0 5px 12px rgba(0,0,0,.24);transition:transform .16s ease,border-color .16s ease}.entryClassRibbon img:hover{transform:translateY(-5px) scale(1.08);border-color:#ffe19b}
#authGate .agBox{position:relative;border-color:rgba(255,215,138,.42);background:linear-gradient(150deg,rgba(35,29,57,.96),rgba(11,15,35,.97));box-shadow:0 24px 70px rgba(0,0,0,.60),0 0 40px rgba(86,151,255,.09),inset 0 1px rgba(255,255,255,.11)}
#authGate .agBox::before{content:'✦  บัญชีเดียว เล่นต่อได้ทุกเครื่อง  ✦';display:block;margin:-2px 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1);text-align:center;color:#ffd98b;font-size:11px;font-weight:900;letter-spacing:.07em}
#authGate .agTab{border-color:rgba(255,255,255,.11);background:rgba(5,8,20,.60);transition:transform .14s,border-color .14s,background .14s}#authGate .agTab:hover{transform:translateY(-2px);border-color:#ffd98b}#authGate .agTab.on{background:linear-gradient(135deg,#f5c96c,#f0a74d);border-color:#ffe6aa;color:#20140a;box-shadow:0 4px 13px rgba(255,180,70,.25)}
#authGate .agPane label{position:relative;padding-left:10px;color:#d8d2e8}#authGate .agPane label::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:999px;background:#ffd372}
#authGate .agPane input{border-color:rgba(162,177,219,.24);box-shadow:inset 0 1px 8px rgba(0,0,0,.20)}#authGate .agPane input::placeholder{color:#707b98}#authGate .agGo{background:linear-gradient(135deg,#ffe5a0,#eaa043);border:1px solid #ffe9b9;color:#25180b;text-shadow:0 1px rgba(255,255,255,.4)}#authGate .agGo:hover{filter:brightness(1.06) saturate(1.05)}
#authGate .entryHeading{max-width:445px}
#authGate .entryKicker{min-height:25px;padding:0 10px;border:1px solid rgba(143,220,255,.24);border-radius:999px;background:rgba(9,27,48,.52);color:#9cdef7;font-size:10.5px;letter-spacing:.14em}
#authGate .entryKicker::before{display:none}
#authGate .entryHeading h1{max-width:420px;margin:13px 0 13px;font-size:clamp(38px,4.6vw,60px);line-height:1.02;letter-spacing:-1.45px;background:none;color:#fff9e9;-webkit-text-fill-color:#fff9e9;filter:drop-shadow(0 5px 13px rgba(0,0,0,.58))}
#authGate .entryHeading h1 span{color:#f5c873;-webkit-text-fill-color:#f5c873}
#authGate .entryLead{max-width:390px;margin:0;color:#c5cde0;font-size:14px;line-height:1.65}
#authGate .entryPromise{gap:6px;margin-top:17px}
#authGate .entryPromise span{padding:6px 10px;border-color:rgba(145,205,246,.22);background:rgba(7,18,36,.62);color:#dce9f7;font-size:11px;font-weight:800;box-shadow:none}
#authGate .entryClassLabel{margin-top:22px;color:#95a8c5;font-size:10.5px;font-weight:800;letter-spacing:.055em}
#authGate .entryClassRibbon{gap:6px;margin-top:8px}
#authGate .entryClassRibbon img{width:32px;height:32px;border-color:rgba(154,199,234,.18);border-radius:10px;background:rgba(6,14,30,.68);box-shadow:0 4px 10px rgba(0,0,0,.24)}
@media(max-width:820px){#authGate .entryLead{margin-inline:auto}#authGate .entryClassLabel{text-align:center}#authGate .entryHeading h1{font-size:clamp(35px,9vw,48px)}}
#characterSelect::after{background:linear-gradient(90deg,rgba(4,8,20,.96),rgba(7,11,27,.76) 45%,rgba(7,11,24,.32)),linear-gradient(0deg,rgba(5,7,18,.91),transparent 58%)}
#characterSelect .entryHeading h1{font-size:clamp(40px,5vw,64px)}.entryRealmPill{margin-top:12px;padding:7px 11px;border:1px solid rgba(125,226,175,.23);border-radius:999px;background:rgba(9,22,29,.55);box-shadow:inset 0 1px rgba(255,255,255,.06)}
.entryCharacterGrid{gap:14px;padding:7px;max-height:560px}.entryCharCard{position:relative;overflow:hidden;min-height:195px;padding:18px;grid-template-columns:88px 1fr;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(28,34,58,.96),rgba(9,13,29,.97));box-shadow:0 18px 42px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.08);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.entryCharCard::before{content:'';position:absolute;width:150px;height:150px;right:-55px;top:-65px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--char-accent) 28%,transparent),transparent 68%);pointer-events:none}.entryCharCard.hasChar:hover{transform:translateY(-4px);border-color:var(--char-accent);box-shadow:0 24px 52px rgba(0,0,0,.43),0 0 24px color-mix(in srgb,var(--char-accent) 20%,transparent)}
.entryCharPortrait{width:88px;height:88px;border-radius:24px;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--char-accent) 40%,#fff 6%),rgba(7,10,25,.90) 68%);border:1px solid color-mix(in srgb,var(--char-accent) 72%,white);box-shadow:0 10px 20px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.25)}.entryCharPortrait img{width:67px;height:67px;filter:drop-shadow(0 7px 10px rgba(0,0,0,.46))}.entrySlotNo{z-index:2;left:7px;top:7px;min-width:23px;height:23px;border:1px solid rgba(255,255,255,.22);background:#10172a;color:#f9dd91}.entryLvBadge{position:absolute;right:-5px;bottom:-6px;padding:4px 8px;border:1px solid color-mix(in srgb,var(--char-accent) 60%,white);border-radius:9px;background:#11182b;color:#fff;font-size:10px;box-shadow:0 4px 10px rgba(0,0,0,.45)}.entryPlus{color:#ffe29a;font-size:38px;filter:drop-shadow(0 3px 7px rgba(0,0,0,.38))}
.entryCharHead{display:flex;align-items:center;gap:7px}.entryCharInfo h2{font-size:20px;line-height:1.15;margin:0;color:#fff}.entryOnlineMark{margin-left:auto;padding:3px 7px;border:1px solid rgba(126,228,157,.35);border-radius:999px;background:rgba(51,150,83,.14);color:#91e9a7;font-size:10px;font-weight:900}.entryClassName{display:flex;align-items:center;gap:5px;margin-top:5px;color:var(--char-accent);font-size:13px;letter-spacing:.02em}.entryClassName img{width:16px;height:16px}.entryRoleLine{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;color:#aeb8d0;font-size:11px;font-weight:700}.entryRoleLine i{font-style:normal;color:var(--char-accent);opacity:.75}.entryLevelTrack{height:5px;overflow:hidden;margin-top:10px;border-radius:999px;background:rgba(255,255,255,.10);box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}.entryLevelTrack i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--char-accent),#fff0b0);box-shadow:0 0 9px var(--char-accent)}.entryCharMeta{margin-top:5px}.entryCharActions{display:flex;gap:8px;margin-top:13px}.entryPlay,.entryCreate{flex:1;min-height:39px;margin:0;border:1px solid color-mix(in srgb,var(--char-accent) 70%,white);border-radius:11px;background:linear-gradient(135deg,color-mix(in srgb,var(--char-accent) 85%,white),#ffe19a);box-shadow:0 4px 0 rgba(0,0,0,.26);transition:transform .1s,box-shadow .1s}.entryPlay:hover,.entryCreate:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.28)}.entryPlay:active,.entryCreate:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.26)}.entryPlay b,.entryCreate b{font-size:16px;margin-left:5px}.entryDel{flex:0 0 39px!important;width:39px!important;margin:0!important;padding:0!important;border:1px solid rgba(255,133,153,.35)!important;border-radius:11px!important;background:rgba(66,20,37,.35)!important;color:#ffadba!important;transition:background .14s,border-color .14s}.entryDel:hover{background:rgba(122,30,53,.55)!important;border-color:#ff8fa4!important}
@media(max-width:820px){.entryPromise,.entryClassRibbon{justify-content:center}.entryCharCard{min-height:172px;grid-template-columns:78px 1fr}.entryCharPortrait{width:78px;height:78px;border-radius:21px}.entryCharPortrait img{width:59px;height:59px}}@media(max-width:480px){.entryPromise{gap:5px}.entryPromise span{font-size:10.5px;padding:5px 7px}.entryClassRibbon{margin-top:17px;gap:3px}.entryClassRibbon img{width:28px;height:28px;border-radius:9px}.entryCharCard{grid-template-columns:66px 1fr;padding:14px;gap:11px}.entryCharPortrait{width:66px;height:66px;border-radius:18px}.entryCharPortrait img{width:50px;height:50px}.entryCharInfo h2{font-size:17px}.entryRoleLine{font-size:10px}.entryOnlineMark{display:none}.entryLevelTrack{margin-top:8px}}

/* ═══ 👥/🏰 แท็บปาร์ตี้ · กิลด์ — แยกสองระบบออกจากกันตามที่เจ้าของสั่ง ═══ */
.gpTabs{display:flex;gap:7px;margin:0 0 12px}
.gpTab{
  flex:1;min-height:42px;padding:8px 10px;cursor:pointer;
  border:1.5px solid #3d3550;border-radius:12px;
  background:rgba(255,255,255,.035);color:#a99fc0;
  font:800 14px 'Leelawadee UI','Segoe UI',Tahoma,sans-serif;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:border-color .12s,background .12s;
}
.gpTab:hover{border-color:#ff6a9a;color:#eae4f5}
.gpTab.on{background:rgba(255,106,154,.16);border-color:#ff6a9a;color:#ffd479}
.gpTab .n{font-size:12px;font-weight:700;opacity:.82;
  background:rgba(0,0,0,.32);border-radius:999px;padding:2px 9px}
@media (pointer:coarse){.gpTab{min-height:48px;font-size:14.5px}}

/* ═══════════════════════════════════════════════════════════════════════════
   ✨ ขัดหน้าเข้าสู่ระบบให้ "น่าเล่น" (เจ้าของสั่ง 22 ส.ค. 2569)
   ─────────────────────────────────────────────────────────────────────────
   วางไว้ท้ายไฟล์เพื่อชนะ cascade — ไฟล์นี้มีกฎซ้อนทับกันหลายชั้นจากการแก้หลายรอบ
   แก้ที่ต้นทางเสี่ยงพังของเดิม การทับท้ายไฟล์คุมผลลัพธ์ได้แน่นอนกว่า
   ยึดโทนเดิมของเกม: ทองอุ่นบนกรมท่าลึก (ตาม AGENTS.md) — ไม่เปลี่ยนสีแบรนด์
   ═══════════════════════════════════════════════════════════════════════════ */
.entryGate{--gold:#ffd780;--gold-2:#f0b45c;--ink:#070b18;--line:rgba(255,215,128,.22)}

/* ── แสงอุ่นหลังหัวเรื่อง — ให้ตากลับมาที่ชื่อเกมก่อน ── */
.entryHeading{position:relative}
.entryHeading::before{
  content:'';position:absolute;left:-8%;top:-14%;width:70%;height:62%;
  background:radial-gradient(60% 60% at 30% 40%,rgba(255,196,102,.22),transparent 70%);
  filter:blur(26px);pointer-events:none;z-index:-1}
.entryHeading h1{filter:drop-shadow(0 2px 10px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(255,190,96,.20))}
.entryLead{color:#d9d3e8;font-size:15px;line-height:1.62;max-width:36ch}

/* ── ป้ายจุดขาย 3 อัน — ให้ดูเป็น "ของที่ได้" ไม่ใช่แท็ก ── */
.entryPromise span{
  padding:7px 13px;font-size:12px;letter-spacing:.2px;
  border-color:var(--line);
  background:linear-gradient(180deg,rgba(38,30,18,.66),rgba(12,15,32,.66));
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 6px 16px -10px #000}

/* ── 🎭 การ์ดอาชีพ — พระเอกของหน้านี้ ── */
.entryClassLabel{
  margin-top:22px;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#a9a2c2}
.entryClassRibbon{
  display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;margin-top:11px;max-width:430px}
.ecTile{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px 8px;border-radius:14px;text-align:center;cursor:default;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(20,24,46,.78),rgba(9,12,26,.86));
  box-shadow:0 8px 18px -12px #000,inset 0 1px rgba(255,255,255,.06);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.ecTile img{
  width:34px;height:34px;padding:0;border:0;background:none;box-shadow:none;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.5))}
.ecTile b{font-size:11.5px;font-weight:800;color:#f2ecff;line-height:1.15;letter-spacing:.1px}
.ecTile i{font-size:10px;font-style:normal;color:#9990b4;line-height:1.1}
.ecTile:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--c) 62%,transparent);
  box-shadow:0 14px 26px -14px #000,0 0 22px -8px var(--c),inset 0 1px rgba(255,255,255,.10)}
.ecTile:hover b{color:var(--c)}

/* ── 🗝️ การ์ดเข้าสู่ระบบ — เพิ่มมิติ ไม่ให้แบนเหมือนกล่องเปล่า ── */
.agBox{
  width:min(452px,100%);
  border-color:var(--line);
  background:linear-gradient(180deg,rgba(23,20,38,.86),rgba(8,11,24,.92));
  box-shadow:0 30px 70px -34px #000,0 0 0 1px rgba(0,0,0,.5),
             inset 0 1px rgba(255,255,255,.07);
  backdrop-filter:blur(14px);overflow:hidden;position:relative}
.agBox::before{
  content:'';position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.75}

/* ── แท็บ — ตัวที่เลือกต้องเด่นชัดว่าอยู่ตรงไหน ── */
.agTab{
  min-height:40px;border-radius:12px;font-weight:800;
  border-color:rgba(255,255,255,.10);
  background:rgba(8,11,24,.62);color:#a9a2c2}
.agTab:hover{border-color:var(--line);color:#f2ecff;background:rgba(30,26,46,.7)}
.agTab.on{
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  border-color:var(--gold);color:#2a1c06;
  box-shadow:0 8px 18px -10px rgba(255,190,96,.65),inset 0 1px rgba(255,255,255,.5)}

/* ── ช่องกรอก — ขอบโฟกัสเป็นทอง ไม่ใช่ฟ้าจัดที่ตัดกับธีม ── */
.agBox label{font-size:12.5px;font-weight:800;color:#c3bcd8;letter-spacing:.2px}
.agBox input{
  min-height:44px;border-radius:12px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(6,9,20,.72);color:#f4f0ff;font-size:14px;
  transition:border-color .15s ease,box-shadow .15s ease}
.agBox input::placeholder{color:#6f6889}
.agBox input:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,215,128,.16)}

/* ── ปุ่มหลัก — ทองเรืองแสง เป็นจุดที่ตาไปหยุด ── */
.agGo{
  min-height:48px;border-radius:13px;font-size:15px;
  background:linear-gradient(180deg,#ffe6ae,var(--gold-2));
  color:#2a1c06;
  box-shadow:0 12px 26px -12px rgba(255,190,96,.6),inset 0 1px rgba(255,255,255,.55);
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
.agGo:hover{transform:translateY(-1px);filter:brightness(1.04);
  box-shadow:0 16px 30px -12px rgba(255,190,96,.7),inset 0 1px rgba(255,255,255,.6)}
.agGo:active{transform:translateY(0)}

/* ── แถบสถานะท้ายการ์ด — จัดให้เป็นแถวเดียวเรียบๆ ไม่ลอยเคว้ง ── */
.agStat{
  display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
  margin-top:14px;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.08)}
.agStat>span{
  padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:700;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(9,12,26,.7);color:#b7b0cc}
.agStat>span:first-child{color:#8fe6a8;border-color:rgba(143,230,168,.28)}

/* ── จอแคบ: การ์ดอาชีพเหลือ 4 คอลัมน์เท่าเดิมแต่บีบลง ── */
@media (max-width:900px){
  .entryClassRibbon{max-width:none}
  .agBox{width:100%}
}
@media (max-width:420px){
  .ecTile{padding:7px 3px 6px}
  .ecTile img{width:28px;height:28px}
  .ecTile i{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ecTile,.agGo{transition:none}
  .ecTile:hover,.agGo:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   🏛️ หน้าเลือกตัวละคร — จัดเป็น "แถวเดียว 5 แท่น" แบบเกมต้นแบบ (เจ้าของสั่ง 22 ส.ค. 2569)
   ─────────────────────────────────────────────────────────────────────────
   ของเดิมเป็นกริด 2 คอลัมน์ในกล่องที่เลื่อนได้ → การ์ดล่างโดนตัดครึ่ง มีสกรอลบาร์
   ชื่อยาวโดนตัดเป็น "บทใหม่กำลังรอ..." และบรรทัด "เปิดพร้อมกันได้" ซ้ำ 5 รอบ
   เกมต้นแบบโชว์ตัวละครเรียงเป็นแถวเดียวให้เห็นครบในตาเดียว — ทำแบบนั้น
   ═══════════════════════════════════════════════════════════════════════════ */
#characterSelect .entryCharacterGrid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;padding:2px;max-height:none;overflow:visible;align-items:stretch}
#characterSelect .entryConcurrency.spanRow{
  grid-column:1/-1;margin:0 0 2px;justify-self:center;
  padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;
  border:1px solid rgba(255,215,128,.24);background:rgba(12,15,32,.7);color:#cfc6e4}

/* ── แท่นตัวละคร ── */
#characterSelect .entryCharCard{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:6px;min-height:0;padding:16px 12px 14px;grid-template-columns:none;
  border-radius:18px;text-align:center;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg,rgba(28,34,58,.94),rgba(8,12,26,.97));
  box-shadow:0 18px 40px -22px #000,inset 0 1px rgba(255,255,255,.07)}
#characterSelect .entryCharCard::before{
  content:'';position:absolute;left:50%;top:-38px;width:150px;height:150px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--char-accent) 26%,transparent),transparent 68%)}
#characterSelect .entryCharCard.hasChar:hover{
  transform:translateY(-5px);border-color:var(--char-accent);
  box-shadow:0 26px 52px -22px #000,0 0 26px -8px var(--char-accent)}
#characterSelect .entryCharCard.isEmpty{
  border-style:dashed;border-color:rgba(245,215,120,.28);
  background:linear-gradient(180deg,rgba(20,22,40,.7),rgba(8,11,24,.9))}
#characterSelect .entryCharCard.isEmpty:hover{border-color:#f5d778}

/* เลขช่อง — มุมบนซ้าย เหมือนหมายเลขแท่นของเกมต้นแบบ */
#characterSelect .entrySlotNo{
  position:absolute;left:10px;top:9px;
  min-width:22px;height:22px;display:grid;place-items:center;
  border-radius:8px;font-size:11.5px;font-weight:900;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14);color:#d8d0ee}

/* เหรียญตราอาชีพ */
#characterSelect .entryCharPortrait{
  position:relative;width:74px;height:74px;margin-top:6px;
  display:grid;place-items:center;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--char-accent) 55%,transparent);
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.10),rgba(6,9,20,.9));
  box-shadow:0 8px 20px -10px #000,inset 0 0 18px -6px var(--char-accent)}
#characterSelect .entryCharPortrait img{width:44px;height:44px;filter:drop-shadow(0 3px 7px rgba(0,0,0,.55))}
#characterSelect .entryCharPortrait.empty{border-style:dashed}
#characterSelect .entryPlus{font-size:30px;color:#f5d778;line-height:1;opacity:.85}
#characterSelect .entryLvBadge{
  position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  padding:2px 9px;border-radius:999px;font-size:11px;font-weight:900;white-space:nowrap;
  background:linear-gradient(180deg,#ffe6ae,#f0b45c);color:#2a1c06;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.7)}

/* ชื่อ / อาชีพ / บทบาท */
#characterSelect .entryCharCard h2{
  margin:10px 0 0;font-size:15px;font-weight:900;color:#f6f1ff;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#characterSelect .entryClassName{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;
  color:var(--char-accent)}
#characterSelect .entryClassName img{width:15px;height:15px}
#characterSelect .entryRoleLine{display:flex;gap:5px;font-size:11px;color:#9a92b4}
#characterSelect .entryCharMeta{font-size:11.5px;color:#9a92b4;line-height:1.5;margin-top:2px}
#characterSelect .entryLevelTrack{
  width:100%;height:5px;margin-top:7px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.09)}
#characterSelect .entryLevelTrack i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--char-accent),#ffe6ae)}

/* ปุ่ม */
#characterSelect .entryCharActions{display:flex;gap:6px;width:100%;margin-top:auto;padding-top:11px}
#characterSelect .entryPlay{
  flex:1;min-height:40px;border:none;border-radius:11px;cursor:pointer;
  font:900 13px inherit;color:#2a1c06;
  background:linear-gradient(180deg,#ffe6ae,#f0b45c);
  box-shadow:0 10px 20px -12px rgba(255,190,96,.75),inset 0 1px rgba(255,255,255,.5)}
#characterSelect .entryPlay:hover{filter:brightness(1.05)}
#characterSelect .entryDel{
  width:40px;min-height:40px;border-radius:11px;cursor:pointer;
  border:1px solid rgba(255,255,255,.13);background:rgba(9,12,26,.75);color:#b9b0d0}
#characterSelect .entryDel:hover{border-color:#ff7b7b;color:#ff9d9d}
#characterSelect .entryCreate{
  width:100%;min-height:40px;margin-top:auto;border-radius:11px;cursor:pointer;
  border:1px solid rgba(245,215,120,.4);background:rgba(245,215,120,.10);
  color:#f5d778;font:900 12.5px inherit}
#characterSelect .entryCreate:hover{background:rgba(245,215,120,.2)}

/* จอแคบ — 5 แท่นเรียงเดียวไม่ไหว ค่อยลดคอลัมน์ */
@media(max-width:1080px){#characterSelect .entryCharacterGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){#characterSelect .entryCharacterGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){#characterSelect .entryCharacterGrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#characterSelect .entryCharCard.hasChar:hover{transform:none}}

/* ── หน้าเลือกตัวละครใช้คอลัมน์เดียวเต็มความกว้าง ──
   .entryShell เดิมเป็น 2 คอลัมน์ (หัวเรื่อง | เนื้อหา) ซึ่งเหมาะกับหน้าล็อกอิน
   แต่หน้านี้ต้องวางตัวละคร 5 แท่นเรียงกันแบบเกมต้นแบบ — บีบอยู่ครึ่งจอแล้วการ์ดแคบเหลือ 114px
   จึงสั่งให้หน้านี้หน้าเดียวเป็นคอลัมน์เดียว: หัวเรื่องบน แถวตัวละครกลาง หมายเหตุล่าง */
#characterSelect .entryShell{
  /* ⚠️ ต้องใช้ !important — ไฟล์นี้มีกฎ .entryShell ซ้อนกันหลายชั้นจากการแก้หลายรอบ
     วัดจริงแล้วกฎ 2 คอลัมน์ยังชนะแม้ selector นี้จะเจาะจงกว่า */
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto 1fr auto !important;
  align-content:start;
  row-gap:clamp(10px,2.2vh,22px);
  padding:0 clamp(14px,3vw,34px)}
#characterSelect .entryHeading{text-align:center;max-width:none}
#characterSelect .entryHeading p{margin-left:auto;margin-right:auto;max-width:52ch}
#characterSelect .entryKicker{justify-content:center}
#characterSelect .entryRealmPill{margin-left:auto;margin-right:auto}
#characterSelect .entryCharacterGrid{
  width:min(1080px,100%);margin:0 auto;align-self:center}

/* ── 🗑 ปุ่มลบตัวละคร — เล็ก จาง และอยู่ไกลจากปุ่มเล่น (เจ้าของสั่ง 22 ส.ค. 2569)
   เดิมอยู่ติดปุ่ม "ผจญภัยต่อ" ขนาดพอๆ กัน = นิ้วพลาดทีเดียวลบตัวละครทิ้ง
   ตอนนี้ย้ายไปมุมขวาบน เล็กลง จางไว้ก่อน แล้วค่อยเด่นตอนชี้ + ต้องพิมพ์รหัส 6 หลักยืนยันอีกชั้น */
#characterSelect .entryDel{
  position:absolute;right:8px;top:8px;
  width:24px;height:24px;min-height:0;padding:0;
  display:grid;place-items:center;border-radius:8px;cursor:pointer;
  font-size:11.5px;line-height:1;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.34);color:#7d7594;
  opacity:.45;transition:opacity .16s ease,color .16s ease,border-color .16s ease}
#characterSelect .entryCharCard:hover .entryDel{opacity:.9}
#characterSelect .entryDel:hover{
  opacity:1;color:#ff9d9d;border-color:rgba(255,123,123,.55);background:rgba(60,12,16,.6)}
#characterSelect .entryDel:focus-visible{opacity:1;outline:2px solid #ff9d9d;outline-offset:2px}
/* ปุ่มเล่นกินเต็มแถวแล้ว (ไม่มีปุ่มลบมาแย่งที่) */
#characterSelect .entryCharActions .entryPlay{flex:1 1 100%}

/* ⚠️ กันคอลัมน์ผี: .entryTop เดิมถูกวางไว้ให้กินคอลัมน์ที่ 2 ของเลย์เอาต์ 2 คอลัมน์
   พอหน้านี้เหลือคอลัมน์เดียว มันเลยไปสร้าง "คอลัมน์โดยปริยาย" กว้าง 52px ขึ้นมาข้างๆ
   บังคับให้ลูกทุกตัวอยู่คอลัมน์เดียวกันหมด */
#characterSelect .entryShell>*{grid-column:1/-1 !important}

/* ═════════════════════════════════════════════════
   🩹 หน้าเลือกตัวละคร — หัวเรื่องซ้อนทับแถวการ์ด (แก้ 23 ส.ค. 2569)
   ─────────────────────────────────────────────────
   วัดจากหน้าจริง: .entryHeading อยู่ที่ y 262-439 · .entryCharacterGrid อยู่ที่ y 206-496
   ทั้งคู่ถูกสั่ง grid-row:2 เหมือนกัน (มาจากกฎบรรทัด ~328 ที่เขียนไว้สมัยเลย์เอาต์ 2 คอลัมน์)
   → ตัวหนังสือหัวเรื่องโผล่ออกมาตามช่องว่าง 12px ระหว่างการ์ด เห็นเป็นเศษอักษรลอยๆ
   แก้: ให้หน้านี้ไหลเป็นแถวตามลำดับปกติ ไม่ต้องล็อกแถว
   ═════════════════════════════════════════════════ */
#characterSelect .entryShell{
  grid-template-rows:auto auto auto auto !important;
  align-content:start;
  row-gap:18px !important}
#characterSelect .entryHeading{
  grid-row:auto !important;
  grid-column:1/-1 !important;
  padding-bottom:2px}
#characterSelect .entryCharacterGrid{
  grid-row:auto !important;
  grid-column:1/-1 !important}

/* ═════════════════════════════════════════════════
   🧍 แท่นตัวละคร 3D — หน้าเลือกตัวละคร (23 ส.ค. 2569)
   เกมต้นแบบโชว์ "ตัวจริง" ยืนบนแท่น เราปั้นตัวละครด้วยโค้ดอยู่แล้ว จึงเอาตัวเดียวกัน
   กับที่วิ่งอยู่ในเกมมายืนได้เลย — ภาพจึงตรงกับของจริง 100%
   ═════════════════════════════════════════════════ */
#characterSelect .entryCharStage{
  position:relative;width:100%;height:168px;margin-top:2px;
  display:grid;place-items:end center;
  border-radius:14px;overflow:visible;
  background:
    radial-gradient(60% 34% at 50% 96%, color-mix(in srgb,var(--char-accent) 34%,transparent), transparent 72%),
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.055), transparent 62%)}
#characterSelect .entryCharStage::after{        /* วงแสงใต้เท้า ให้รู้สึกว่า "ยืน" อยู่จริง */
  content:'';position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:96px;height:16px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--char-accent) 52%,transparent),transparent 70%);
  filter:blur(1px);opacity:.75}
#characterSelect .entryCharCanvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1}
#characterSelect .entryCharStageFallback{       /* สำรอง: ถ้า WebGL ใช้ไม่ได้ ใช้ตราอาชีพเหมือนเดิม */
  width:74px;height:74px;object-fit:contain;align-self:center;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
#characterSelect .entryCharStage .entryLvBadge{ /* ป้ายเลเวลลอยเหนือแท่น */
  bottom:auto;top:4px;z-index:2}
#characterSelect .entryCharCard{padding:12px 10px 13px;gap:4px}
#characterSelect .entryCharCard h2{margin:8px 0 0;font-size:14.5px}

/* หัวเรื่องเตี้ยลง — ให้แท่นตัวละครเป็นพระเอกของหน้า และทุกอย่างพอดีจอเดียว */
#characterSelect .entryHeading h1{font-size:clamp(26px,2.6vw,34px) !important;margin:6px 0 8px !important}
#characterSelect .entryHeading p{display:none}
#characterSelect .entryRealmPill{margin-top:6px}

/* ── ปุ่มลบ + ป้ายเลเวล ต้องอยู่เหนือ canvas 3D ──────────────────
   canvas ถูกวางทับเต็มแท่น (inset:0) ปุ่มลบเลยหายไปอยู่ข้างหลัง
   canvas ตั้ง pointer-events:none อยู่แล้ว จึงแค่ยกชั้นปุ่มขึ้นมาก็พอ */
#characterSelect .entryCharCard .entryDel{
  z-index:6; position:absolute; right:9px; top:9px;
  width:24px; height:24px; display:grid; place-items:center;
  font-size:12px; line-height:1; border-radius:8px; cursor:pointer;
  background:rgba(10,12,24,.72); color:#9a92b4;
  border:1px solid rgba(255,255,255,.14)}
#characterSelect .entryCharCard .entryDel:hover{
  background:rgba(176,58,50,.9); color:#fff; border-color:#e0645b}
#characterSelect .entrySlotNo{z-index:6}
/* ป้ายเลเวลลอยเหนือหัว แต่ไม่ทับปุ่มลบ/เลขช่อง */
#characterSelect .entryCharStage .entryLvBadge{
  top:6px; left:50%; transform:translateX(-50%); z-index:5;
  padding:2px 10px; font-size:11px}

/* ── การ์ดที่ถูกเลือก (กดที่ตัวละครแบบเกมต้นแบบ) ── */
#characterSelect .entryCharCard{cursor:pointer; transition:border-color .16s, box-shadow .16s, transform .16s}
#characterSelect .entryCharCard.isPicked{
  border-color:var(--char-accent);
  box-shadow:0 22px 46px -20px #000, 0 0 0 1px var(--char-accent), 0 0 30px -10px var(--char-accent);
  transform:translateY(-3px)}
#characterSelect .entryCharCard.isPicked .entryCharStage::after{opacity:1;width:112px}
#characterSelect .entryCharCard:not(.isPicked) .entryPlay{opacity:.55}
#characterSelect .entryCharCard.isPicked .entryPlay{opacity:1}