/* ═══ ป้ายลอยทั้งเกม: หน้าตาเดียวกัน · เปิดแบบค่อย ๆ ขยาย · ปิดแบบค่อย ๆ จาง ═══════════
   ต้นแบบคือแถบเล็งสกิล (พื้นกระจกเข้ม ขอบทอง ไอคอนกลมซ้าย) ที่ผู้เล่นชมว่าสวย
   ป้ายเป้าหมายเดิมเป็นกรอบไม้หนาสามบรรทัด บนมือถือแนวนอนมันลอยอยู่กลางจอทับตัวละคร
   (top:104px ของจอสูง 390) และแถบเล็งสกิลไปนั่งทับปุ่มกลม ☰ ทางซ้าย

   จังหวะ (ใช้ร่วมกันทุกป้าย):
     เปิด  200ms  ขยายจาก 92% + จางเข้า · เส้นโค้งเกินเป้านิดเดียวให้รู้สึก "เด้ง" ไม่ใช่ "โผล่"
     ปิด   140–160ms  หดเหลือ 96% + จางออก — ปิดต้องเร็วกว่าเปิด ไม่งั้นรู้สึกว่าเกมหน่วง
     ป้ายกลางจอ  เข้า 180ms · ค้าง · จางออกช้า 450ms (ข้อความแจ้งเตือนควรค่อย ๆ หาย)
   ใช้คุณสมบัติ scale / translate แยก ไม่ใช่ transform — ป้ายที่จัดกลางด้วย
   transform:translateX(-50%) จะได้ไม่เด้งหลุดตำแหน่งระหว่างเล่นอนิเมชัน */
:root{
  --pop-bg:#15202ee6; --pop-ring:#e8b64a; --pop-ink:#fff; --pop-soft:#c9d4e2;
  --pop-in:cubic-bezier(.18,.9,.3,1.15);
}
@keyframes popIn{from{opacity:0;scale:.92;translate:0 -6px}to{opacity:1;scale:1;translate:0 0}}
@keyframes popOut{to{opacity:0;scale:.96;translate:0 -4px}}
@keyframes popSwap{0%{scale:.97}55%{scale:1.03}100%{scale:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── ป้ายเป้าหมาย ─────────────────────────────────────────────────────── */
html body #hud #target{
  box-sizing:border-box; border:0; border-image:none; border-radius:14px;
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; align-items:center;
  padding:6px 12px 7px 7px; min-width:0; width:max-content; max-width:min(380px,calc(100vw - 16px));
  top:calc(10px + env(safe-area-inset-top)); bottom:auto; left:0; right:0; margin-inline:auto; transform:none;
  background:var(--pop-bg); color:var(--pop-ink); text-align:left; font-size:12px; line-height:1.3;
  box-shadow:0 4px 16px #0006, inset 0 0 0 1.5px var(--pop-ring);
  animation:popIn .2s var(--pop-in);
}
html body #hud #target[hidden]{display:none}
html body #hud #target.swap{animation:popSwap .22s var(--pop-in)}
html body #hud #target.out{animation:popOut .16s ease-in forwards; pointer-events:none}
#t-ic{
  width:44px; height:44px; border-radius:50%; position:relative; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 38%,#43566c,#1c2634 72%);
  box-shadow:0 0 0 2px var(--ring,#e8b64a), 0 2px 6px #0006;
}
#t-ic img{width:44px; height:44px; border-radius:50%; object-fit:cover; display:block}
#t-ic img[hidden]{display:none}
/* ป้ายธาตุมุมรูป: ไอคอนธาตุกลม (assets/ui/elements/*.png) — ระดับธาตุอยู่ในชิปบรรทัดข้อมูล */
#t-ic .elb{
  position:absolute; right:-6px; bottom:-5px; width:22px; height:22px; border-radius:50%;
  background:var(--ring,#9a9a9a) center/cover no-repeat; font-style:normal;
  box-shadow:0 0 0 1.5px #15202e, 0 1px 3px #0008;
}
#t-ic .elb[hidden]{display:none}
#target .t-body{display:grid; gap:2px; min-width:0}
#target #t-name{color:#ffd97a; font:600 14px/1.2 var(--font-head)}
#target #t-lv{color:#e6eef8; font-size:12px; margin-left:3px}
#target #t-lv b{font-weight:600}
#target #t-info{color:var(--pop-soft); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
#target #t-info .el{color:#fff; border-radius:6px; padding:0 6px; font-weight:600; margin-right:2px}
#target #t-info .btn{font:600 12px var(--font-head); padding:4px 10px; border-radius:8px; border:0; background:#e8b64a; color:#3a2a0c}
html body #hud #target .rbar.hp{
  height:7px; --bh:7px; margin-top:3px; border:0; border-image:none; border-radius:99px;
  background:#ffffff24; box-shadow:none; overflow:hidden;
}
html body #hud #target .rbar.hp i{background:linear-gradient(#ff8a78,#d8402e); border-radius:99px; transition:width .25s ease-out}

/* ── แถบเล็งสกิล: นั่งใต้ป้ายเป้าหมายเสมอ (--aim-top มาจาก ui.js placeAim) ──── */
#aim-bar{top:var(--aim-top,120px); animation:popIn .2s var(--pop-in)}
#aim-bar.out{animation:popOut .14s ease-in forwards; pointer-events:none}

/* ── จอสัมผัสแนวตั้ง: คอลัมน์ใต้แผงตัวละคร เว้นคอลัมน์ขวาไว้ให้ปาร์ตี้ ─────── */
html.touch-ui body #hud #target { width:auto; max-width:360px;
}
html.touch-ui #hud #aim-bar.touch{top:var(--aim-top,calc(80px + env(safe-area-inset-top)))}
html.touch-ui #hud #aim-bar.touch.out{animation:popOut .14s ease-in forwards}

/* ── จอสัมผัสแนวนอน: แถวบนสุด ระหว่างแผงตัวละคร (ซ้าย) กับมินิแมพ (ขวา) ──────
   เดิมป้ายเป้าหมายอยู่ top:104 = กลางจอพอดีบนจอสูง 390 ทับตัวละครกับมอนที่กำลังตี
   และแถบเล็งชิดซ้ายไปทับปุ่ม ☰ — ตอนนี้ทั้งสองป้ายอยู่คอลัมน์เดียวกันกลางบน */
html.touch-ui.land body #hud #target,
html.touch-ui.land #hud #aim-bar.touch{
  left:calc(216px + env(safe-area-inset-left)); right:calc(104px + env(safe-area-inset-right));
  margin-inline:auto; width:auto; max-width:380px;
}

html.touch-ui.land #hud #aim-bar.touch{top:var(--aim-top,calc(6px + env(safe-area-inset-top)))}

/* ── ป้ายกลางจอ (เลเวลอัป ได้ของ ฯลฯ): เด้งเข้าไว จางออกช้า ─────────────── */
#toast{
  translate:0 8px; scale:.96;
  transition:opacity .45s ease, translate .45s ease, scale .45s ease;
}
#toast.show{
  opacity:1; translate:0 0; scale:1;
  transition:opacity .18s ease-out, translate .22s var(--pop-in), scale .22s var(--pop-in);
}

/* ── หน้าต่าง (จอคอม): ขยายนุ่มขึ้น ช้าลงนิด — เดิม 130ms จากขนาด 96% เร็วจนเหมือนโผล่วับ ──
   ปิด 140ms ต้องตรงกับ OUT_MS ใน ui-skin.js */
html[data-skin="wood"]:not(.touch-ui) body .win:not([hidden]){animation:popIn .2s var(--pop-in)}
html[data-skin="wood"]:not(.touch-ui) body .win.closing,
html[data-skin="wood"]:not(.touch-ui) body .win.closing[hidden]{animation:popOut .14s ease-in forwards}

/* ── ป้ายเล็กอื่น ๆ ที่เคยโผล่วับ ───────────────────────────────────────── */
.ctx:not([hidden]),#chat-ch:not([hidden]){animation:popIn .16s var(--pop-in)}
#death:not([hidden]){animation:fadeIn .35s ease-out}
#death:not([hidden]) .dlg{animation:popIn .26s var(--pop-in) .08s both}

/* ── หน้าจอหมดสติ: ภาพประกอบแทนกล่องข้อความเปล่า ─────────────────────────
   ภาพโหลดแบบ lazy (อยู่ในกล่องที่ซ่อนอยู่) จึงไม่ถ่วงการโหลดครั้งแรก */
#death .dth{width:min(92vw,540px)}
#death .dth .body{padding:0;text-align:center;overflow:hidden}
.dth-art{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 46%}
.dth-txt{display:grid;justify-items:center;gap:1px;padding:10px 12px 12px}
.dth-txt b{font:600 16px var(--font-head);color:var(--ink)}
.dth-txt small{color:var(--ink-soft);font-size:12px}
.dth-txt .rbtn{margin-top:9px;min-width:160px;min-height:36px;font-size:14px}
/* แนวนอนบนมือถือ: จอสูงไม่ถึง 400px วางซ้อนกันแล้วปุ่มตกขอบ — ต้องวางข้างกัน */
html.touch-ui.land #death .dth{width:min(94vw,600px)}
html.touch-ui.land #death .dth .body{display:grid;grid-template-columns:1.3fr 1fr;align-items:center}
html.touch-ui.land .dth-art{height:100%;aspect-ratio:auto;min-height:130px}
html.touch-ui.land .dth-txt{padding:8px 10px}
html.touch-ui.land .dth-txt .rbtn{margin-top:6px;min-width:120px}
#bigmap:not([hidden]){animation:fadeIn .16s ease-out}
#bigmap:not([hidden]) #bigmap-cv{animation:popIn .22s var(--pop-in)}

/* ── ตัวอย่างแชทบนมือถือ: บรรทัดเก่าค่อย ๆ จางหายเอง ────────────────────────
   เดิมสามบรรทัดล่าสุดค้างบนจอตลอด แม้ไม่มีใครคุยมาสิบนาที — ข้อความใหม่เข้ามา
   ก็เห็นชัดทันที (บรรทัดใหม่เริ่มนับเวลาใหม่) ส่วนของเก่าหลบไปให้เห็นสนาม
   เปิดแชทเต็ม (💬) แล้วทุกบรรทัดกลับมาครบ */
@keyframes lnFade{0%,78%{opacity:1}100%{opacity:0}}
html.touch-ui:not(.chat-open) body #hud #chat #chat-log .ln{animation:lnFade 14s ease-in forwards}
html.touch-ui.chat-open body #hud #chat #chat-log .ln{animation:none; opacity:1}

@media (prefers-reduced-motion:reduce){
  html body #hud #target,html body #hud #target.swap,#aim-bar,.ctx,#chat-ch,#death .dlg,#bigmap,#bigmap-cv,
  html[data-skin="wood"]:not(.touch-ui) body .win:not([hidden]){animation:none}
  #toast,#toast.show{transition:opacity .2s linear; translate:none; scale:none}
}

/* ไอคอนภาพในเมนู (ui-skin.js menuArt — สลับเมื่อภาพครบชุด) */
#menu button img.mi{width:26px; height:26px; display:block; pointer-events:none}
html.touch-ui #menu button img.mi{width:30px; height:30px}
#fabs button img.mi{width:100%; height:100%; border-radius:50%; pointer-events:none}

/* ── มินิแมพ ─────────────────────────────────────────────────────────── */
/* วาดตามขนาดจริง × DPR แล้ว — ไม่ต้อง pixelated ทั้งผืน (ตัววาดปิด smoothing เฉพาะพื้นแมพเอง) */
#minimap,#bigmap-cv{image-rendering:auto}
/* ชื่อโซน: ป้ายอ่านออกที่ขอบล่างของแผนที่ (เดิมบนมือถือซ่อนชื่อโซนไปเลย ส่วนตัวหนังสือในแผนที่เหลือ ~5px) */
#zone-name{
  position:absolute; left:50%; bottom:calc(var(--fr,0px)*0 + 3px); translate:-50% 0; max-width:calc(100% - 8px);
  padding:1px 8px; border-radius:99px; background:rgba(18,26,38,.72); color:#ffe9a8;
  font:500 11px/1.5 var(--font-head); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none;
}
#zone-name:empty{display:none}
html:not(.touch-ui) #zone-name{display:none}      /* จอคอมมีชื่อโซน+พิกัดบนหัวกรอบอยู่แล้ว */
html:not(.touch-ui) #mapbox > header span{font-size:12px}
/* ปุ่มซูม/ขยาย (จอคอม): โผล่เมื่อเอาเมาส์มาที่แผนที่ — ไม่บังแผนที่ตอนไม่ได้ใช้ */
html:not(.touch-ui) .map-btns{opacity:0; transition:opacity .15s; left:auto; right:4px; bottom:auto; top:calc(var(--fr,0px)*0 + 4px)}
html:not(.touch-ui) #mapbox:hover .map-btns,html:not(.touch-ui) .map-btns:focus-within{opacity:1}
/* จอสัมผัส: ไม่มีปุ่มบนแผนที่เลย — แตะแผนที่ = กางเต็มจอ (ปุ่ม ⤢ เคยบังหนึ่งในสี่ของแผนที่) */
html.touch-ui body #hud .map-btns{display:none}
html.touch-ui #minimap{cursor:pointer}

/* คำอธิบายสัญลักษณ์ใต้แผนที่เต็มจอ */
.bm-legend{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px; margin-top:8px; color:#e6eef8; font-size:12px}
.bm-legend span{display:inline-flex; align-items:center; gap:5px}
.bm-legend i{width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 1px #0008; display:inline-block}
.bm-legend i.dm{border-radius:1px; rotate:45deg}
.bm-legend i.ar{width:0; height:0; border-radius:0; box-shadow:none; border-left:9px solid #c9a6ff; border-top:5px solid transparent; border-bottom:5px solid transparent}
html.touch-ui.land body .bm-legend{grid-column:2; justify-content:flex-start; max-width:24ch}
/* ประเภทมอน (28 ก.ย.) — ชิปสีอ่อนหน้าธาตุ · สีบอกประเภท ไม่ใช่ความอันตราย */
#target #t-info .t-role{border-radius:6px; padding:0 6px; font-weight:600; margin-right:2px; color:#3a2a14; background:#efe3c4}
#target #t-info .t-role.r-tank{background:#e6d6b4}
#target #t-info .t-role.r-caster{background:#e4d8f4; color:#4a2e78}
#target #t-info .t-role.r-skirmisher{background:#d8efe0; color:#1f5a3a}
#target #t-info .t-role.r-sniper{background:#f6dcc8; color:#7a3a14}