:root{
  --bg:#0b0f14; --fg:#eaf2ff; --muted:#9fb3c6;
  --chip-bg:rgba(12,16,22,.6); --chip-bd:#2a3a4f;
  --card-bg:rgba(16,21,28,.80); --card-bd:#2b3a4c;
  --brand:#28a0ff; --brand-2:#1176d6; --btn-text:#06121f;
}
*{box-sizing:border-box} html,body{height:100%;margin:0}
body{
  color:var(--fg);
  background:var(--bg) center/cover no-repeat url("/assets/img/bgindex.webp");
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans Thai',sans-serif;
  line-height:1.5;
}
/* ---- Topbar (index) ---- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(10,14,20,.55);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #1b2837}
.topbar__in{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{height:32px;width:auto}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  min-height:44px;min-width:44px;display:inline-flex;align-items:center;gap:8px;
  padding:.5rem .8rem;border-radius:999px;border:1px solid var(--chip-bd);
  background:var(--chip-bg);text-decoration:none;color:var(--fg);cursor:pointer;
}
.chip img{width:20px;height:20px;display:block}
.chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* ---- Page / Hero ---- */
.page{min-height:calc(100svh - 56px);display:grid;place-items:center;padding:24px}
.page::before{content:"";position:fixed;inset:0;backdrop-filter:none;z-index:-1}
.hero{width:100%;display:grid;place-items:center}
.card{
  width:min(66.6667vw,680px);
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:22px;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  padding:24px 18px;
  text-align:center;
}
text-shadow:0 2px 6px rgba(0,0,0,.35)
.cta-row{margin:10px 0 12px}
.btn{
  min-height:48px;min-width:48px;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;padding:.65rem 1.1rem;border-radius:999px;border:0;cursor:pointer;
}
.btn-primary{
  color:var(--btn-text);font-weight:700;
  background:linear-gradient(180deg,#4ec0ff 0%,#28a0ff 55%,#1176d6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 14px rgba(0,0,0,.35);
}
.btn-primary:focus-visible{outline:2px solid #8ad2ff;outline-offset:2px}
.btn .ico{width:28px;height:28px;display:block}
.store-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.store-row img{height:54px;width:auto;display:block}
/* ---- Overlay loader ---- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:60}
.overlay.show{display:flex}
.spinner{width:58px;height:58px;border-radius:50%;border:4px solid rgba(231,242,255,.25);border-top-color:var(--brand);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---- Orientation guard (portrait only) ---- */
.orientation-guard{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:70;
  background:rgba(10,14,20,.72);backdrop-filter:blur(10px);
  color:#fff;text-align:center;padding:24px;
}
.orientation-guard__panel{
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2);border-radius:18px;
  padding:18px 22px;max-width:520px
}
@media (orientation:portrait){
  .orientation-guard{display:flex}
}
/* ---- A11y & RWD ---- */
a{color:inherit}
img{max-width:100%}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:#fff;color:#000;padding:.5rem .75rem;border-radius:.5rem}
@media (max-width:1024px){.topbar__in{padding:10px 12px}}
@media (max-width:768px){.brand__logo{height:28px}}
@media (max-height:360px) and (orientation:landscape){.page{padding:12px}.card{padding:16px}}
/* ---- CTA image button (same height as store badges) ---- */
.cta-row a.cta-img-link{display:inline-block; line-height:0}
.cta-img{height:54px; width:auto; display:block}
/* ---- Orientation-guard text styles (แทน inline) ---- */
.og-title{margin:0 0 6px;font-size:clamp(18px,3.4vw,22px);font-weight:700;color:#eaf2ff}
.og-text{margin:0;color:#eaf2ff}
.footer{ text-align:center; padding:16px 0; color:#9fb3c6 }
/* icon-only chips (sound / sfx) */
.chip-icon{padding:10px 12px; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center}
.chip-icon span{display:none}
.chip-icon img{width:22px; height:22px; display:block}
/* ===== login page ===== */
.login-card{max-width:720px;margin:6vh auto;padding:28px 24px;border-radius:18px;
  background:rgba(16,21,28,.86);border:3px solid #2b3a4c;box-shadow:0 6px 28px rgba(0,0,0,.35)}
.login-card .h1{margin:0 0 6px;font-size:28px;line-height:1.2;text-align:center;color:#f2f6ff}
.login-card .subtle{margin:0 0 18px;text-align:center;color:#93a4b9}
.login-buttons{display:flex;flex-direction:column;gap:12px}
.btn-login{display:flex;align-items:center;gap:12px;justify-content:center;
  min-height:52px;border-radius:12px;font-weight:700;text-decoration:none;
  color:#0b1220;background:#e7edf6;border:1px solid transparent;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.btn-login .logo{width:22px;height:22px;display:block}
/* color variants */
.btn-idgame   {background:#ff9800;color:#10151c}
.btn-line     {background:#10c64b;color:#07230f}
.btn-facebook {background:#1877f2;color:#f7fbff}
.btn-google   {background:#ffffff;color:#0b1220;border-color:#d6dee8}
/* hover/focus */
.btn-login:focus-visible{outline:3px solid #7cc4ff;outline-offset:2px}
.btn-login:hover{filter:brightness(1.04)}
.btn-google:hover{background:#f9fbff}
/* small screens */
@media (max-width:480px){
  .login-card{margin:4vh 12px;padding:20px}
  .btn-login{min-height:48px}
}
/* login background override (A18) */
body.page--login{ background:var(--bg) center/cover no-repeat url("/assets/img/bglogin.webp"); }
/* === OAuth notice modal (A18) === */
.modal__panel{background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.22);border-radius:16px;
  padding:18px 20px;max-width:420px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.modal__title{margin:0 0 6px;font-size:20px;font-weight:800;color:#eaf2ff}
.modal__text{margin:0 0 12px;color:#cfe1ff}
.modal__actions{display:flex;justify-content:center}
/* Bring login card fully above the fold on phones / short screens */
@media (max-width:480px),(max-height:680px){
  .login-card{margin:3vh 12px}
}
/* === A18 short-screen adjustments: keep login card above the fold === */
@media (max-height:720px){
  .page{padding:16px}
  .login-card{margin:12px 16px}
}
@media (max-height:640px){
  .page{padding:10px}
  .login-card{margin:8px 12px; padding:18px}
  .login-card .h1{font-size:24px}
  .login-card .subtle{font-size:14px}
}
@media (max-height:420px) and (orientation:landscape){
  .page{padding:8px}
  .login-card{margin:6px 10px; padding:14px}
  .login-card .subtle{display:none}
}
/* === A18 MOBILE LIFT (login) === */
@media (max-height:560px){
  .topbar__in{padding:6px 10px}
  .brand__logo{height:24px}
  body.page--login .page{place-items:start center; padding-top:6px}
  body.page--login .login-card{margin:6px 12px; padding:16px}
  .login-buttons{gap:10px}
  .btn-login{min-height:44px}
  .login-card .subtle{display:none}
}
@media (max-height:420px) and (orientation:landscape){
  .topbar__in{padding:4px 8px}
  .brand__logo{height:22px}
  body.page--login .page{padding-top:4px}
  body.page--login .login-card{margin:4px 10px; padding:12px}
}
/* === A18 SPACING v2: give more gap from topbar on short phones === */
@media (max-height:560px){
  body.page--login .page{ padding-top:12px !important; }
  body.page--login .login-card{ margin-top:14px !important; }
}
@media (max-height:420px) and (orientation:landscape){
  body.page--login .page{ padding-top:8px !important; }
  body.page--login .login-card{ margin-top:12px !important; }
}
/* === A18 STEP1: Login Modal form styles (UI only) === */
.form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:14px;color:#cfe1ff}
.input{
  height:40px;border-radius:10px;border:1px solid #2b3a4c;background:rgba(12,16,22,.6);
  color:#eaf2ff;padding:8px 10px;outline:none
}
.input:focus{border-color:#28a0ff;box-shadow:0 0 0 3px rgba(40,160,255,.22)}
.field-error{min-height:16px;font-size:12px;color:#ffb3b3}
.form-foot{margin-top:4px;text-align:center;color:#9fb3c6}
.form-foot .muted{color:#9fb3c6;text-decoration:none}
.form-foot .dot{padding:0 6px;color:#9fb3c6}
/* === A18 STEP1.1: Modal sizing for mobile (login modal) === */
.overlay .modal__panel{
  position:relative;
  width:min(92vw,560px);
  max-width:420px;
  padding:18px 16px;
  border-radius:16px;
}
.modal__title{margin:0 0 6px;font-size:22px;font-weight:800;color:#f2f6ff;text-align:center}
.modal__text{margin:0 0 10px;color:#cfe1ff;text-align:center;font-size:14px}
.modal__actions{margin-top:8px;display:flex;justify-content:center}
.modal__close{
  position:absolute; top:10px; right:10px;
  min-width:36px; min-height:36px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
}
/* Phones / narrow screens */
@media (max-width:480px){
  .overlay .modal__panel{ width:92vw; max-width:360px; padding:14px 12px; border-radius:16px }
  .modal__title{ font-size:20px }
  .modal__text{ font-size:13px }
  .form{ gap:10px }
  .input{ height:38px }
  .modal__actions .btn{ min-height:44px }
}
/* Very short landscape phones */
@media (max-height:420px) and (orientation:landscape){
  .overlay .modal__panel{ padding:10px 12px }
  .form{ gap:8px }
}
/* === A18 STEP1.2: Login Modal – mobile tuning (smaller, tighter) === */
.overlay .modal__panel{
  width:min(680px,92vw);
  max-height:calc(100svh - 36px);
  overflow:auto;
}
@media (max-width:480px){
  .overlay .modal__panel{ width:92vw; max-width:420px; padding:14px 16px; border-radius:14px }
  .modal__title{ font-size:20px }
  .form{ gap:10px }
  .input{ height:38px }
}
@media (max-height:420px) and (orientation:landscape){
  .overlay .modal__panel{ max-height:calc(100svh - 20px); padding:12px 14px; margin:6px auto }
  .modal__title{ font-size:18px }
  .form{ gap:8px }
}
/* === A18 STEP1.3: Login Modal — narrower on mobile (override) === */
@media (max-width:480px){
  .overlay .modal__panel{
    width:74vw !important;      /* ~3/4 screen width */
    max-width:360px !important;  /* cap for small phones */
    padding:14px 16px;           /* keep comfy padding */
    border-radius:14px;
  }
  .modal__title{ font-size:20px }
}
@media (max-height:420px) and (orientation:landscape){
  .overlay .modal__panel{
    width:70vw !important;       /* tighter in short landscape */
    max-width:340px !important;
    padding:12px 14px;
  }
  .modal__title{ font-size:18px }
}
/* === A18 STEP3: Register Modal (reuses .form/.input styles) === */
#modal-register .modal__title{ margin-bottom:6px }
#modal-register .form{ margin-top:6px }
/* A18 REGISTER HIDE EXTRA */
.hidden{display:none !important}
/* A19-HIDE-RED-REGISTER (scoped, 2025-09-22)
   ซ่อนข้อความ helper สีแดงในโมดัลสมัครสมาชิกเท่านั้น */
#modal-register .field-error,
#modal-register .text-red,
#modal-register .rule-hints .text-red {
  display: none !important;
}
/* A19-HIDE-RED-REGISTER (scoped, safe override)
   ซ่อนข้อความ helper/เตือนสีแดงเฉพาะภายใน #modal-register */
#modal-register .field-error,
#modal-register .field-note,
#modal-register .rule-hints,
#modal-register .text-red,
#modal-register p.text-red,
#modal-register .label + .text-red,
#modal-register .helper.text-red {
  display: none !important;
}
/* A19-REG-FOOT-BELOW-BTN */
#modal-register .modal__actions{ margin-bottom: 6px; }
#modal-register .form-foot{
  display:block;
  text-align:center;
  margin-top: 10px;
}
#modal-register .form-foot a{
  display:inline-block;
  text-decoration: underline;
}
/* A19-HIDE-OPEN-LOGIN: remove login link from register modal */
#modal-register #link-open-login,
#modal-register .form-foot{ display:none !important; }
/* [CHAT20-ADDENDUM 20250924-201800] no-inline support */
.row-2col{display:flex;gap:10px}
/* [CHAT20-ADDENDUM 20250924-201800] no-inline support */
.row-2col>.col{flex:1}
/* [CHAT20] Topbar Lobby: credit chip */
.chip-credit{display:inline-flex;align-items:center;gap:8px;padding:0 12px}
.chip-credit .credit-val{font-weight:700;min-width:2ch;text-align:right}
@media (max-width:480px){.chip-credit #credit-amt{min-width:0}}
/* === [CHAT20] Lobby background === */
body[data-page="lobby"]{
  /* ใส่ overlay บางๆ เพื่อให้อ่านตัวอักษรง่ายขึ้น */
  background:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
    url("/assets/img/bglobby.webp?v=20250925-1") center center / cover no-repeat;
  min-height: 100vh;
}
@media (max-width: 480px){
  /* mobile บางรุ่นไม่ชอบ background-attachment:fixed → ไม่ใช้ */
  body[data-page="lobby"]{ background-position: center top; }
}
/* ===== [CHAT20] Player Mini Panel ===== */
:root{ --topbar-h:56px; }
.player-mini{
  position:fixed;
  top:calc(var(--topbar-h,56px) + 8px);
  left: var(--pm-left, 8px);
  z-index:60; /* ต่ำกว่า topbar (ควรสูงกว่าเนื้อหา) */
  display:grid;
  grid-template-columns:56px 1fr;
  gap:10px;
  align-items:center;
  max-width:min(92vw, 420px);
  padding:10px 12px;
  border-radius:12px;
  color:#fff;
  background:rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  pointer-events:auto;
}
.pm-avatar{
  width:56px;height:56px;object-fit:cover;border-radius:50%;
  border:2px solid rgba(255,255,255,.7);
  box-shadow:0 1px 6px rgba(0,0,0,.25) inset;
}
.pm-body{ min-width:0; }
.pm-row{ display:flex; align-items:baseline; gap:8px; }
.pm-name{ font-weight:700; font-size:16px; line-height:1.2; max-width:16ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-id{ font-size:12px; opacity:.85; }
.pm-badges{ display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.pm-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.12); font-size:12px; line-height:1; }
.pm-badge > img{ width:16px;height:16px; display:block; }
.pm-lvbar{ position:relative; flex:1 1 auto; height:8px; min-width:80px; background:rgba(255,255,255,.22); border-radius:999px; overflow:hidden; }
.pm-lvbar > #pm-lvbar{ display:block; width:0%; height:100%; background:linear-gradient(90deg,#22c55e,#4ade80); }
.pm-progtext{ font-variant-numeric:tabular-nums; opacity:.9; }
@media (max-width: 480px){
  .player-mini{ grid-template-columns:44px 1fr; padding:8px 10px; gap:8px; }
  .pm-avatar{ width:44px;height:44px; }
  .pm-name{ font-size:15px; max-width:14ch; }
  .pm-id{ display:none; } /* ย่อบนจอเล็ก */
  .pm-lvbar{ min-width:64px; }
}
/* ===== [CHAT20] /Player Mini Panel ===== */
/* [CHAT20] MP spacing tune */
.player-mini{ margin-top:12px; }
@media (min-width:1024px){ .player-mini{ margin-top:16px; } }
/* ===== [CHAT20] hide lobby hero card ===== */
body[data-page="lobby"] .hero{ display:none !important; }
/* ===== [CHAT20] /hide lobby hero card ===== */
/* ===== [CHAT20] Mini Panel – remove progress bar (numbers only) ===== */
.player-mini .pm-prog{ display:none !important; }
.player-mini .pm-badge .pm-cap{ margin-left: var(--pm-left, 8px); min-width:auto; }
.player-mini .pm-badge.lv .lv-num{ margin-right:4px; }
/* mobile tweaks */
@media (max-width:640px){
  .player-mini{ padding:8px 10px; gap:8px; }
  .player-mini .pm-name{ font-size:14px; }
  .player-mini .pm-meta{ font-size:12px; }
  .player-mini .pm-badge{ gap:6px; }
}
/* ===== [CHAT20] /Mini Panel – remove progress bar ===== */
/* ===== [CHAT20] Mini Panel – progress: desktop ON / mobile OFF ===== */
/* Desktop ≥641px: force show (override any previous global hide) */
@media (min-width:641px){
  .player-mini .pm-prog,
  .player-mini .pm-progress,
  .player-mini .pm-bar{ display:inline-flex !important; }
}
/* Mobile ≤640px: hide bar, keep 0/20 number compact */
@media (max-width:640px){
  .player-mini .pm-prog,
  .player-mini .pm-progress,
  .player-mini .pm-bar{ display:none !important; }
  .player-mini .pm-cap{ margin-left: var(--pm-left, 8px); min-width:auto; }
  .player-mini .pm-badge{ gap:6px; }
  .player-mini .pm-name{ font-size:14px; }
  .player-mini .pm-meta{ font-size:12px; }
}
/* ===== [CHAT20] /Mini Panel – progress ===== */
/* ===== [CHAT20] Lobby: remove hero card & adjust ===== */
body[data-page="lobby"] .hero .card{ display:none !important; }
body[data-page="lobby"] .hero{ padding:0 !important; min-height:auto !important; }
/* ===== [CHAT20] Player Mini Panel – spacing ===== */
.player-mini{ margin-top:14px !important; }    /* desktop gap from topbar */
@media (max-width:640px){
  .player-mini{ margin-top:8px !important; }   /* mobile gap */
}
/* ===== [CHAT20] Player Mini Panel – progress off ===== */
.player-mini .pm-progbar{ display:none !important; }  /* hide bar everywhere */
@media (max-width:640px){
  .player-mini .pm-count{ display:none !important; }  /* hide 0/20 on mobile (เหลือ Lv/VIP เท่านั้น) */
}
/* ===== [CHAT20] INDEX fix: ensure hero card is visible on home ===== */
body[data-page="index"] .hero .card{ display:block !important; }
/* ===== [CHAT20] MP Progress — FINAL override (PC: bar on / Mobile: bar off) ===== */
.player-mini .pm-prog{ display:inline-flex !important; align-items:center; gap:8px; }
.player-mini .pm-bar{ display:inline-block !important; width:120px; height:8px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden; vertical-align:middle; }
.player-mini .pm-bar > .pm-fill{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#22c55e,#4ade80); }
.player-mini .pm-count{ font-variant-numeric:tabular-nums; opacity:.9; margin-left:6px; }
/* Mobile ≤640px : hide the bar, keep number compact */
@media (max-width:640px){
  .player-mini .pm-bar{ display:none !important; }
  .player-mini .pm-count{ margin-left:0; }
}
/* ===== [CHAT20] /MP Progress — FINAL override ===== */
/* ===== [CHAT20] Mini Panel – hide visual bar, keep numeric text (scoped to lobby) ===== */
body[data-page="lobby"] .player-mini .pm-lvbar{ display:none !important; }  /* hide the bar */
body[data-page="lobby"] #pm-lvtext{ display:inline !important; }            /* always show 0/20 */
/* ===== [CHAT20] FINAL: Mini Panel progress — desktop ON, mobile OFF (scoped to lobby) ===== */
/* Ensure the numeric text is always visible */
body[data-page="lobby"] #pm-lvtext{ display:inline !important; }
/* Desktop ≥641px: show visual bar */
@media (min-width:641px){
  body[data-page="lobby"] .player-mini .pm-lvbar,
  body[data-page="lobby"] .player-mini .pm-bar,
  body[data-page="lobby"] .player-mini .pm-progbar{ display:inline-flex !important; }
}
/* Mobile ≤640px: hide visual bar (keep numbers) */
@media (max-width:640px){
  body[data-page="lobby"] .player-mini .pm-lvbar,
  body[data-page="lobby"] .player-mini .pm-bar,
  body[data-page="lobby"] .player-mini .pm-progbar{ display:none !important; }
}
/* ===== [CHAT20] /FINAL ===== */
/* ===== [CHAT20] Announcement Bar ===== */
.announce{
  position:fixed;
  top:calc(var(--topbar-h,56px) + 6px);
  left:50%;
  transform:translateX(-50%);
  z-index:58;               /* ต่ำกว่า player-mini(60), สูงกว่าเนื้อหา */
  width:min(92vw,680px);
  pointer-events:none;      /* ไม่บังการคลิกพื้นหลัง */
}
.announce[hidden], .announce[data-hidden="1"]{ display:none !important; }
.announce__in{
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; color:#fff;
  background:rgba(0,0,0,.45);
  border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  pointer-events:auto;      /* เฉพาะแถบนี้/ปุ่ม คลิกได้ */
}
.announce__icon{ opacity:.9; display:inline-flex }
.announce__track{
  overflow:hidden; max-width:100%; white-space:nowrap; flex:1 1 auto;
}
.announce__close{
  appearance:none; border:0; background:transparent; color:#fff;
  font-size:18px; line-height:1; opacity:.8; cursor:pointer; padding:0 2px;
  pointer-events:auto;
}
.announce a{ color:#fff; text-decoration:underline; pointer-events:auto; }
/* marquee animation */
.announce:hover .announce__anim{ animation-play-state:paused }
@keyframes du-marquee{ 0%{ transform:translateX(0) } 100%{ transform:translateX(-50%) } }
/* mobile tighter */
@media (max-width:480px){
  .announce__in{ padding:6px 10px; gap:8px }
  .announce__msg{ margin-right:24px }
}
/* ===== [CHAT20] /Announcement Bar ===== */
/* ===== [CHAT20] ANNOUNCE LAYOUT FIX v20250926 ===== */
/* Fixed height hint for spacing with topbar */
:root{ --ann-h: 44px; }                 /* desktop */
@media (max-width:640px){ :root{ --ann-h: 38px; } } /* mobile */
/* Bar: centered under topbar, wider on desktop, compact on mobile */
.announce{
  top: calc(var(--topbar-h,56px) + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: min(96vw, 880px);              /* desktop feels roomy */
  z-index: 58;                           /* below player-mini(60) */
}
.announce .announce__in{ font-size:14px; }
@media (max-width:640px){
  .announce{ width: calc(100vw - 16px); } /* small side gutters on phones */
  .announce .announce__in{ font-size:13px; }
}
/* When the announcement is visible, push the Player Mini below it */
body[data-ann="on"] .player-mini{
  top: calc(var(--topbar-h,56px) + var(--ann-h,40px) + 10px) !important;
}
/* ===== [CHAT20] /ANNOUNCE LAYOUT FIX ===== */
/* ===== [CHAT20] ANNOUNCE — mobile layout (right-half), avoid overlap with Player Mini ===== */
@media (max-width:640px){
  /* Bar: ขวาบน ครึ่งจอ (ปรับ 52vw ได้), ไม่ center */
  .announce{
    left:auto; right:8px; transform:none;
    width:min(52vw,340px);
    top:calc(var(--topbar-h,56px) + 8px);
  }
  .announce__in{ padding:6px 10px; gap:8px; }

  /* Player Mini: ซ้ายบน และจำกัดความกว้าง เพื่อไม่ชนประกาศ */
  .player-mini{
    left: var(--pm-left, 8px); right:auto;
    max-width:min(44vw,380px);
    grid-template-columns:40px 1fr;
    padding:6px 10px;
  }
  .pm-avatar{ width:40px; height:40px; }
}
/* ===== [CHAT20] /ANNOUNCE — mobile layout ===== */
/* ===== [CHAT20] MOBILE: match heights of Announcement Bar & Player Mini ===== */
@media (max-width:640px){
  :root{ --du-bar-h-m: 40px; }               /* ปรับเลขนี้ถ้าอยากสูง/เตี้ยกว่านี้ */

  /* Announcement: ยึดความสูงร่วม + จัดกึ่งกลางแนวตั้ง */
  .announce__in{
    min-height: var(--du-bar-h-m) !important;
    padding: 0 10px !important;
    display:flex; align-items:center;
  }

  /* Player Mini: ให้สูงเท่ากัน + ย้ายเป็น 1 แถวพอดี */
  .player-mini{
    min-height: var(--du-bar-h-m) !important;
    padding: 0 10px !important;
    grid-template-columns: calc(var(--du-bar-h-m) - 4px) 1fr !important;
    gap: 8px !important;
  }
  .pm-avatar{ width: calc(var(--du-bar-h-m) - 4px) !important;
              height: calc(var(--du-bar-h-m) - 4px) !important; }
  .pm-badges{ margin-top:0 !important; gap:6px !important; flex-wrap:nowrap !important; }
  .pm-badge{ padding:2px 6px !important; font-size:12px !important; }
  .pm-name{ font-size:14px !important; line-height:1 !important; max-width:14ch !important; }
  .pm-id{ display:none !important; }   /* ย่อบนจอเล็กให้เหลือชื่อ + badge */
}
/* ===== [CHAT20] /MOBILE ===== */
/* ===== [CHAT20] ALIGN MINI WITH ANNOUNCE (position-only) ===== */
:root{
  /* แถบตำแหน่งร่วม = สูงจาก Topbar เท่ากับประกาศ */
  --du-band-top: calc(var(--topbar-h,56px) + 6px);
}
/* จับให้อยู่ระดับเดียวกัน */
.announce{ top: var(--du-band-top) !important; }
.player-mini{ top: var(--du-band-top) !important; }
/* คืนความสูง/เลย์เอาต์ Player Mini บนมือถือให้เหมือนก่อนหน้า (ไม่บังคับ min-height) */
@media (max-width:640px){
  .player-mini{
    min-height: initial !important;
    padding: 8px 10px !important;
    grid-template-columns: 44px 1fr !important;
    gap: 8px !important;
  }
  .pm-avatar{ width:44px !important; height:44px !important; }
}
/* ===== [CHAT20] /ALIGN ===== */
/* ===== [CHAT20][FINAL-ALIGN] Player Mini & Announcement share same Y ===== */
:root{
  /* ระยะห่างจาก Topbar ให้เท่ากัน (ใช้ค่าเดียว) */
  --du-band-top: calc(var(--topbar-h,56px) + 8px) !important;
}
/* จับให้ทั้งคู่ใช้ค่าเดียวกันเสมอ */
.announce{ top: var(--du-band-top) !important; }
.player-mini{ top: var(--du-band-top) !important; }
/* มือถือ: คืนความสูง/เลย์เอาต์เดิมของ Player Mini (อย่ายืดความสูง) */
@media (max-width:640px){
  .player-mini{
    min-height: initial !important;
    padding: 8px 10px !important;
    grid-template-columns: 44px 1fr !important;
    gap: 8px !important;
  }
  .pm-avatar{ width:44px !important; height:44px !important; }
}
/* ===== [/FINAL-ALIGN] ===== */
/* ===== [CHAT20][ANNOUNCE-MOBILE-RIGHT] pin to top-right, half width ===== */
@media (max-width:640px){
  .announce{
    left: auto !important;
    right: 8px !important;
    transform: none !important;
    width: min(50vw, 340px) !important; /* ~ครึ่งจอ, capped */
  }
}
/* ===== [/ANNOUNCE-MOBILE-RIGHT] ===== */
/* ===== [CHAT20][ALIGN-HARD-FIX] kill margin drift on Player Mini ===== */
:root{ --du-band-top: calc(var(--topbar-h,56px) + 8px) !important; }
.announce{ top: var(--du-band-top) !important; }
.player-mini{ top: var(--du-band-top) !important; }
/* ตัด margin-top ทุกตัวที่ถูกประกาศไว้ก่อนหน้า */
.player-mini,
body[data-page="lobby"] .player-mini{
  margin-top: 0 !important;
}
/* มือถือ: คงขนาดเดิม ไม่ยืดสูง */
@media (max-width:640px){
  .player-mini{ grid-template-columns:44px 1fr !important; padding:8px 10px !important; gap:8px !important; }
  .pm-avatar{ width:44px !important; height:44px !important; }
}
/* ===== [/ALIGN-HARD-FIX] ===== */
/* ===== [CHAT20][ALIGN-NO-DROP] keep same Y even when body[data-ann="on"] ===== */
:root{ --du-band-top: calc(var(--topbar-h,56px) + 8px) !important; } /* single source of truth */
.announce{    top: var(--du-band-top) !important; }
.player-mini{ top: var(--du-band-top) !important; }
/* ยกเลิกกฎที่เคย "ดันลง" เมื่อมีประกาศ */
body[data-ann="on"] .player-mini{ top: var(--du-band-top) !important; }
/* กัน margin เด้งจากกฎก่อนหน้า */
.player-mini,
body[data-page="lobby"] .player-mini{ margin-top:0 !important; }
/* มือถือ: แถบประกาศขวาบนครึ่งจอ, แผงผู้เล่นซ้ายบน — ระดับเดียวกัน */
@media (max-width:640px){
  .announce{
    left:auto !important; right:8px !important; transform:none !important;
  }
  .player-mini{ left:8px !important; }
}
/* ===== [/ALIGN-NO-DROP] ===== */
/* ===== [CHAT20][TOP-NUDGE-4PX] align both bars closer to topbar (v20250926) ===== */
/* ลดช่องว่างจาก topbar ให้ทั้ง announce และ player-mini ใช้ค่าเดียวกัน (+4px) */
.announce{    top: calc(var(--topbar-h,56px) + 4px) !important; }
.player-mini{ top: calc(var(--topbar-h,56px) + 4px) !important; }
/* ===== [/TOP-NUDGE-4PX] ===== */
/* ===== [CHAT20][MOBILE-ID-SPACING] show ID & add breathing space (≤640px) ===== */
@media (max-width:640px){
  /* ให้ ID แสดงถัดจากชื่อ และอ่านง่ายขึ้น */
  .player-mini .pm-id{ display:inline !important; margin-left:6px !important; opacity:.85 !important; }

  /* เพิ่มช่องไฟระหว่างชื่อกับแถว badge (Lv/VIP) */
  .player-mini .pm-badges{ margin-top:6px !important; }

  /* กันชื่อยาวไปกินพื้นที่ ID — ลด max-width ลงเล็กน้อย */
  .player-mini .pm-name{ max-width:12ch !important; }

  /* ช่องไฟในบรรทัดชื่อ+ID */
  .player-mini .pm-row{ gap:8px !important; }
}
/* ===== [/MOBILE-ID-SPACING] ===== */
/* ===== [CHAT20][ALIGN-NUDGE] v20250926-010330 ===== */
/* จับให้ประกาศกับ Player Mini อยู่ระดับเดียวกัน และชิด Topbar ขึ้นเล็กน้อย */
:root{
  --du-band-top: calc(var(--topbar-h,56px) + 6px) !important; /* 6px = ชิดขึ้นกว่าของเดิมนิดหน่อย */
  --du-mini-nudge: -2px;                                       /* ดัน Player Mini ขึ้นอีก 2px */
}
.announce{   top: var(--du-band-top) !important; }
.player-mini{
  top: calc(var(--du-band-top) + var(--du-mini-nudge)) !important;
  margin-top: 0 !important;  /* กันค่า margin เก่ามาดึงลง */
}
/* มือถือ: คืนเลย์เอาต์เดิม + โชว์ ID ข้างชื่อ และเพิ่มช่องไฟระหว่างชื่อ/แถว LV */
@media (max-width:640px){
  .player-mini{ padding:8px 10px !important; grid-template-columns:44px 1fr !important; gap:8px !important; }
  .pm-avatar{ width:44px !important; height:44px !important; }
  .pm-id{ display:inline !important; margin-left:6px !important; opacity:.9; font-size:12px !important; }
  .pm-badges{ margin-top:6px !important; } /* ให้เว้นจากชื่อมากขึ้น */
}
/* สไตล์ไอคอนประกาศ (ใช้ไฟล์ SVG) */
.announce__icon img{ width:18px; height:18px; display:block; opacity:.95 }
/* ===== [/ALIGN-NUDGE] ===== */
/* ===== [CHAT20][ANNOUNCE-ICON-FIX] keep icon size, let text take the squeeze ===== */
.announce__icon{ flex:0 0 auto !important; min-width:18px !important; }
.announce__icon img{ width:18px !important; height:18px !important; display:block; }
.announce__track{ flex:1 1 auto !important; min-width:0 !important; } /* ให้พื้นที่ข่าวยืด/หดได้ */
/* ===== [CHAT20][BRAND-LOGO-30] force brand logo size ===== */
.brand__logo,
img.brand_logo{               /* รองรับทั้ง class เดิมและกรณีสะกดแบบ single underscore */
  height:30px !important;
  width:auto !important;
  display:block;
}
/* ===== [/BRAND-LOGO-30] ===== */
/* ===== [CHAT20][BRAND-LOGO-42] force brand logo size ===== */
.brand__logo,
img.brand_logo{               /* รองรับทั้ง class ที่มี underscore เดียว/คู่ */
  height:42px !important;
  width:auto !important;
  display:block;
}
/* ===== [/BRAND-LOGO-42] ===== */
/* ===== [CHAT20][BRAND-LOGO-42-INDEX-LOGIN] force brand logo 42px on index/login ===== */
.brand__logo,
img.brand__logo,
img.brand_logo,
body[data-page="index"] .brand__logo,
body.page--login .brand__logo{
  height:42px !important;
  width:auto !important;
  display:block;
}
/* ===== [/BRAND-LOGO-42-INDEX-LOGIN] ===== */
/* ===== [CHAT20][ROOMS-SHELF] Rooms horizontal slider (lobby) ===== */
:root{
  --rooms-card-w: clamp(200px, 34vw, 260px);
  --rooms-card-h: clamp(240px, 52vw, 320px);
  --rooms-radius: 18px;
}
/* วางชิดใต้แถบประกาศ + topbar โดยอาศัยตัวแปรที่มีอยู่ */
body[data-page="lobby"] .rooms-shelf{
  position: relative;
  z-index: 10;
  margin: calc(var(--du-band-top, calc(var(--topbar-h,56px) + 8px)) + var(--ann-h,0px) + 14px) auto 18px;
  max-width: min(1200px, 96vw);
  padding: 0 8px;
}
.rooms__track{
  display:flex; gap:12px; align-items:stretch;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px;
  scrollbar-width: none;           /* Firefox */
}
.rooms__track::-webkit-scrollbar{ display:none }  /* WebKit */
.room-card{
  position:relative;
  flex: 0 0 var(--rooms-card-w);
  height: var(--rooms-card-h);
  border-radius: var(--rooms-radius);
  background: rgba(0,0,0,.25);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  scroll-snap-align:start;
  overflow:hidden;
  text-decoration:none; color:#fff;
  outline: 1px solid rgba(255,255,255,.12);
}
.room-card__img, .room-card__img > img{
  width:100%; height:100%; display:block; object-fit:cover;
  filter: saturate(1.04) contrast(1.02);
}
.room-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00) 45%, rgba(0,0,0,.45) 100%);
}
.room-card__head{
  position:absolute; top:10px; left:10px; right:10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  z-index:2;
}
.room-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:12px;
  background: rgba(0,0,0,.55);
  font-weight:800; font-size:13px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.room-badges{ display:inline-flex; align-items:center; gap:10px }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 8px; border-radius:999px;
  background: rgba(0,0,0,.55); font-size:12px; font-weight:700;
}
.badge > img{ width:16px; height:16px; display:block }
.room-card__foot{
  position:absolute; left:12px; right:12px; bottom:10px; z-index:2;
  font-weight:800; font-size:14px; text-shadow:0 2px 10px rgba(0,0,0,.6);
}
/* การ์ด "สร้างห้อง" โทนต่างออกไป */
.room-card.is-create{
  background: linear-gradient(180deg, rgba(255,211,67,.25), rgba(255,162,0,.25));
  outline: 2px dashed rgba(255,211,67,.6);
}
.room-card.is-create .room-pill{ background: rgba(0,0,0,.6) }
/* Desktop: การ์ดสูงขึ้นเล็กน้อย */
@media (min-width:1024px){
  :root{ --rooms-card-w: 260px; --rooms-card-h: 340px; }
  body[data-page="lobby"] .rooms-shelf{ margin-top: calc(var(--du-band-top, 64px) + var(--ann-h,0px) + 16px); }
}
/* Hover/focus */
.room-card:focus-visible{ outline:3px solid #8ad2ff; outline-offset:2px }
.room-card:hover img{ transform:scale(1.01); transition:transform .18s ease }
/* ===== [/ROOMS-SHELF] ===== */
/* ===== [CHAT20][ROOMS-MOBILE-FIT] keep shelf inside phone frame, closer to mini panel ===== */
@media (max-width:640px){
  /* ลด padding ของหน้า lobby ให้คอนเทนต์ขึ้นมาติด topbar/mini-panel มากขึ้น */
  body[data-page="lobby"] .page{ padding:6px 8px 10px !important; }

  /* ระยะชั้นวางการ์ด */
  .rooms{ margin:6px 8px 8px !important; }

  /* แทร็คแนวนอน ปรับช่องไฟให้กระชับพอดีจอมือถือ */
  .rooms__track{ gap:12px !important; padding:8px 0 10px !important; }

  /* ขนาดการ์ด: กว้าง ~42% ของจอ, สัดส่วน 3:4 ไม่ล้นแนวตั้ง */
  .room-card{ width:42vw !important; aspect-ratio:3/4; border-radius:16px; }
  .room-card .rc-thumb{ border-radius:14px; }
}
/* ===== [CHAT20][ROOMS-HIDE-BADGES] remove players/lock badges as requested ===== */
.rooms .room-badges,
.rooms .rb,
.rooms .rb-players,
.rooms .rb-lock{ display:none !important; }
/* ===== [/ROOMS] ===== */
/* ===== [CHAT20][ROOMS-MOBILE-FIT-v2] put content to the very top on lobby (no center grid) ===== */
@media (max-width:640px){
  /* เลิก center ด้วย grid ใน lobby แล้วเลย์เอาต์เป็นปกติ */
  body[data-page="lobby"] .page{
    display:block !important;
    place-items: initial !important;
    align-content: initial !important;
    padding:8px 8px 10px !important;  /* ชิด topbar/mini มากขึ้น */
  }
  /* ชั้นการ์ด */
  .rooms{ margin:6px 8px 8px !important; }
  .rooms__track{ gap:12px !important; padding:8px 0 10px !important; }

  /* การ์ด: ไม่สูงเกินจอ & กระชับพอดีมือถือ */
  .room-card{
    width:42vw !important;        /* ~2 ใบต่อจอ */
    aspect-ratio:3/4 !important;
    max-height:60svh !important;  /* กันล้นแนวตั้ง */
    border-radius:16px;
  }
  .room-card .rc-thumb{ border-radius:14px; }
}
/* ===== [CHAT20][ROOMS-HIDE-BADGES-v2] force-hide players/lock badges on cards ===== */
.rooms .room-badges,
.rooms .rb,
.rooms .rb-players,
.rooms .rb-lock,
.rooms [class*="rb-"],
.rooms [class*="room-badge"]{
  display:none !important;
  visibility:hidden !important;
  width:0 !important; height:0 !important; margin:0 !important; padding:0 !important;
  pointer-events:none !important;
}
/* ===== [/ROOMS v2] ===== */
/* ===== [CHAT20][ROOMS-FINAL-FIT] lobby mobile layout & slider sizing ===== */
/* สัดส่วน/ระยะอ้างอิง */
:root{
  /* ความสูง mini panel บนมือถือ (ประมาณ) */
  --du-mini-h-m: 54px;
}
/* มือถือ: เปลี่ยน .page ไม่ให้ center และเว้นที่ใต้ topbar+mini แค่พอดี */
@media (max-width:640px){
  body[data-page="lobby"] .page{
    display:block !important;
    /* topbar(56) + margin(6) + mini(54) + gap(8) */
    padding: calc(var(--topbar-h,56px) + 6px + var(--du-mini-h-m,54px) + 8px)
             8px 14px !important;
  }
  /* แถวการ์ด: ชิด mini (ไม่ต้องมี margin-top เพิ่ม) */
  .rooms-shelf{ margin-top: 0 !important; }

  /* รางการ์ดแนวนอน: เลื่อนแบบไม่มีสกอร์บาร์ */
  .rooms-shelf .rooms{
    display:flex; gap:12px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding: 0 2px 14px;
    scroll-snap-type: x mandatory;
  }
  .rooms-shelf .rooms::-webkit-scrollbar{ display:none }
  .rooms-shelf .rooms{ scrollbar-width:none }

  /* การ์ด: อัตราส่วน 3:4, กว้าง ~42vw, guard ความสูงไม่เกิน 60svh */
  .rooms-shelf .room-card{
    flex:0 0 auto;
    width:42vw; min-width:42vw;
    aspect-ratio:3 / 4;
    max-height:60svh;
    scroll-snap-align:center;
    border-radius:16px;
  }

  /* ซ่อนป้าย players / lock ให้ชัวร์ */
  .rooms-shelf .room-card .room-badges,
  .rooms-shelf .room-card .badges,
  .rooms-shelf .room-card .badge,
  .rooms-shelf .room-card [class*="badge"],
  .rooms-shelf .room-card .room-stats,
  .rooms-shelf .room-card [class*="players"],
  .rooms-shelf .room-card [class*="lock"]{
    display:none !important;
  }
}
/* ===== [/ROOMS-FINAL-FIT] ===== */
/* ===== [CHAT20][ROOMS-FIT-PATCH] mobile layout fix (≤640px) ===== */
/* ค่าพื้นฐาน: ความสูงแผง Player Mini บนมือถือ + ระยะห่างที่ต้องการ */
:root{ --du-mini-h-m: 60px; --du-mini-gap: 8px; }
@media (max-width:640px){
  /* เอา page ออกจาก center grid + ใช้ padding เล็กๆ พอ */
  body[data-page="lobby"] .page{
    display:block !important;
    padding:8px 8px 14px !important;  /* ไม่ต้องบวก topbar/mini ซ้ำ */
  }
  /* ให้ชั้นการ์ด “ขยับลง” เท่าความสูง mini + gap ≈ ชิด 6–8px ตามจริง */
  .rooms-shelf{ margin-top: calc(var(--du-mini-h-m,60px) + var(--du-mini-gap,8px)) !important; }

  /* ปรับการ์ดกันล้นจอ: แคบลงนิด + กำหนดเพดานความสูงที่ต่ำลง */
  .rooms-shelf .room-card{
    width:40vw; min-width:40vw;    /* เดิม 42vw */
    aspect-ratio:3 / 4;
    max-height:52svh;              /* เดิม 60svh – กันล้นขอบล่าง */
    scroll-snap-align:center;
  }
}
/* ===== [/ROOMS-FIT-PATCH] ===== */
/* ===== [CHAT20][ROOMS-MOBILE-SMALL] smaller room cards on phones (≤640px) ===== */
/* ปรับขนาดตรงนี้ได้ตามชอบ */
:root{
  --room-w-m: 36vw;     /* ความกว้างการ์ดบนมือถือ (เดิม 40vw) */
  --room-maxh-m: 50svh; /* เพดานความสูง กันล้นขอบล่าง (เดิม 52svh) */
  --room-gap-m: 10px;   /* ช่องว่างระหว่างการ์ด */
}
@media (max-width:640px){
  /* แถวการ์ด: ชิดซ้าย-ขวาเล็กน้อย, เว้นช่องระหว่างใบ */
  .rooms-shelf{
    padding: 0 8px 12px !important;
    gap: var(--room-gap-m) !important;
  }
  /* การ์ด: ย่อกว้างลง, รักษาอัตราส่วน 3:4, จำกัดความสูง */
  .rooms-shelf .room-card{
    width: var(--room-w-m) !important;
    min-width: var(--room-w-m) !important;
    aspect-ratio: 3 / 4 !important;
    max-height: var(--room-maxh-m) !important;
    scroll-snap-align: center;
  }
  /* รูปข้างในถ้าเป็น <img> ให้ครอบพอดีแบบไม่บี้ */
  .rooms-shelf .room-card img,
  .rooms-shelf .room-thumb{
    width:100%; height:100%;
    object-fit: cover; display:block;
    border-radius: inherit;
  }
  /* ไตเติล/เงื่อนไขเล็กลงนิดให้บาลานซ์กับการ์ดที่ย่อ */
  .rooms-shelf .room-title   { font-size: 13px !important; padding: 6px 10px !important; }
  .rooms-shelf .room-subtext { font-size: 12px !important; }
}
/* ===== [/ROOMS-MOBILE-SMALL] ===== */
/* ===== [CHAT20][ROOMS-FIT-TIGHTER] reduce bottom dead space on phones ===== */
:root{
  /* ปรับได้ตามชอบ: สูงขึ้นอีกนิด เพื่อลดพื้นที่ว่างด้านล่าง */
  --room-maxh-m: 58svh; /* เดิม 50svh → 58svh ยังไม่ล้นเฟรม */
}
@media (max-width:640px){
  /* การ์ด: ใช้เพดานสูงใหม่ */
  .rooms-shelf .room-card{
    max-height: var(--room-maxh-m) !important;
  }
  /* หน้า lobby บนมือถือ: ลด padding ล่าง เพื่อไม่เหลือพื้นหลังโล่ง */
  body[data-page="lobby"] .page{
    padding-bottom: 6px !important;
  }
  /* ชั้นวางการ์ด: เก็บชิดขึ้นและจบให้แน่นกว่าเดิม */
  .rooms-wrap{ margin-top: 6px !important; padding-bottom: 6px !important; }
}
/* ===== [/ROOMS-FIT-TIGHTER] ===== */
/* ===== [CHAT20][ROOM-TITLE-GOLD] golden frame for room title chip ===== */
:root{
  --gold-1:#fff3b0;    /* light highlight */
  --gold-2:#f6c24b;    /* mid gold */
  --gold-3:#e39b18;    /* deep gold */
}
.rooms-shelf .room-card :is(.room-title,.room-tag,.room-ribbon,.room-name,.room-label,.room-chip-title){
  position:relative;
  z-index:1;
  color:#fff;
  font-weight:800;
  border-radius:10px;
  background:rgba(0,0,0,.45);     /* พื้นเดิมทึบเล็กน้อย */
  padding:6px 12px;               /* กินกรอบสีทองได้พอดี */
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.rooms-shelf .room-card :is(.room-title,.room-tag,.room-ribbon,.room-name,.room-label,.room-chip-title)::before{
  /* สร้าง "ขอบทอง" โดยไม่บีบเนื้อใน (mask-clip เทคนิคกรอบ) */
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:2px; /* ความหนากรอบ */
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3));
  -webkit-mask:
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  box-shadow:0 0 10px rgba(246,194,75,.35); /* เงาทองนุ่มๆ */
}
/* ขนาดเล็กลงเล็กน้อยบนมือถือ */
@media (max-width:640px){
  .rooms-shelf .room-card :is(.room-title,.room-tag,.room-ribbon,.room-name,.room-label,.room-chip-title){
    padding:5px 10px;
    border-radius:9px;
  }
}
 /* ===== [/ROOM-TITLE-GOLD] ===== */
/* ===== [CHAT20][ROOM-TITLE-GOLD-v2] Golden frame for room title (broad match + fallback) ===== */
:root{
  --gold-1:#fff3b0;   /* highlight */
  --gold-2:#f6c24b;   /* mid */
  --gold-3:#e39b18;   /* deep */
}
/* ฐาน: จับป้ายชื่อห้องให้แน่ด้วยตัวเลือกกว้างใน .room-card */
.rooms-shelf .room-card :is(.room-title,.title,.room-chip,.room-name,.room-tag,.room-ribbon){
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  color:#fff !important;
  font-weight:800;
  border-radius:10px;
  background:rgba(0,0,0,.45) !important;
  border:2px solid transparent;           /* ใช้ร่วมกับ background-clip */
  background-clip:padding-box;            /* กันสีพื้นกินมาทับขอบ */
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
/* เทคนิคขอบทองด้วย pseudo-element + mask (สวย คม) */
.rooms-shelf .room-card :is(.room-title,.title,.room-chip,.room-name,.room-tag,.room-ribbon)::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:2px; /* ความหนากรอบ */
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3));
  -webkit-mask:
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  box-shadow:0 0 10px rgba(246,194,75,.35);
}
/* Fallback: ถ้า mask ใช้ไม่ได้ ให้ใช้ border-image (ครอบคลุมนิ่งๆ) */
@supports not (-webkit-mask-composite:xor){
  .rooms-shelf .room-card :is(.room-title,.title,.room-chip,.room-name,.room-tag,.room-ribbon){
    border-image: linear-gradient(135deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3)) 1 !important;
  }
}
/* ขนาดมือถือ ลด padding นิดเพื่อให้พอดี */
@media (max-width:640px){
  .rooms-shelf .room-card :is(.room-title,.title,.room-chip,.room-name,.room-tag,.room-ribbon){
    padding:5px 10px;
    border-radius:9px;
  }
}
/* ===== [/ROOM-TITLE-GOLD-v2] ===== */
/* ===== [CHAT20][ROOM-TITLE-GOLD-v3] Golden frame for .room-card__head ===== */
:root{
  --gold-1:#fff3b0;   /* highlight */
  --gold-2:#f6c24b;   /* mid */
  --gold-3:#e39b18;   /* deep */
}
/* base chip */
.rooms-shelf .room-card__head,
.rooms-shelf .room-card_head{ /* safety alias */
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  color:#fff !important;
  font-weight:800;
  line-height:1;
  border-radius:10px;
  background:rgba(0,0,0,.45) !important;
  border:2px solid transparent;
  background-clip:padding-box;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  z-index:1;
}
/* gold stroke via mask (crisp) */
.rooms-shelf .room-card__head::after,
.rooms-shelf .room-card_head::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:2px; /* stroke width */
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3));
  -webkit-mask:
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  box-shadow:0 0 10px rgba(246,194,75,.35);
}
/* fallback when mask not supported */
@supports not (-webkit-mask-composite:xor){
  .rooms-shelf .room-card__head,
  .rooms-shelf .room-card_head{
    border-image: linear-gradient(135deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3)) 1 !important;
  }
}
/* mobile tighten */
@media (max-width:640px){
  .rooms-shelf .room-card__head,
  .rooms-shelf .room-card_head{ padding:5px 10px; border-radius:9px; }
}
/* ===== [/ROOM-TITLE-GOLD-v3] ===== */
/* ===== [CHAT20][ROOM-PILL-GOLD] enforce gold framed pill (safe override) ===== */
.rooms-shelf .room-card__head{ position:relative; z-index:1; }
.rooms-shelf .room-card__head .room-pill{
  display:inline-flex !important;
  align-items:center;
  padding:4px 10px !important;
  border-radius:12px !important;

  /* dark translucent background under text */
  background:rgba(0,0,0,.58) !important;

  /* gold frame */
  border:1.6px solid #F3C94D !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 2px 8px rgba(0,0,0,.25);
  color:#fff !important;
  font-weight:800;
}
/* keep other badges hidden on header */
.rooms-shelf .room-card__head .room-badges,
.rooms-shelf .room-card__head .room-badge,
.rooms-shelf .room-card__head .players,
.rooms-shelf .room-card__head .lock{ display:none !important; }
/* ===== [/ROOM-PILL-GOLD] ===== */
/* ===== [CHAT20][ROOM-PILL-TOPLEFT-GOLD] force pill at top-left & golden frame (lobby) ===== */
body[data-page="lobby"] .rooms-shelf .room-card{ position:relative; }
body[data-page="lobby"] .rooms-shelf .room-card__img{ position:relative; z-index:1; }
body[data-page="lobby"] .rooms-shelf .room-card__head{
  position:absolute !important;
  top:10px !important; left:10px !important; right:auto !important; bottom:auto !important;
  z-index:5 !important;
  display:flex; align-items:center; pointer-events:none; /* ให้ป้ายคลิกไม่ได้ตามดีไซน์ */
}
body[data-page="lobby"] .rooms-shelf .room-card__head .room-pill{
  pointer-events:auto;            /* แต่ถ้าภายหลังอยากให้คลิกได้ก็รองรับ */
  position:relative !important;   /* ยกเลิกกฎเก่าที่อาจ fix bottom */
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:12px;
  font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5);
  /* กรอบทองแบบ gradient */
  background:
    linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.62)) padding-box,
    linear-gradient(135deg,#fbe694 0%,#f3c25b 38%,#eaa83b 62%,#f6d37f 100%) border-box;
  border:2px solid transparent;
  box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.10);
}
@media (max-width:640px){
  body[data-page="lobby"] .rooms-shelf .room-card__head{ top:8px !important; left:8px !important; }
  body[data-page="lobby"] .rooms-shelf .room-card__head .room-pill{ padding:5px 10px; border-radius:10px; }
}
/* กันสไตล์เก่าที่เคยวาง pill ไว้ล่างกลาง ไม่ให้มีผล */
body[data-page="lobby"] .rooms-shelf .room-card .room-pill{
  bottom:auto !important; top:auto !important; left:auto !important; right:auto !important;
  transform:none !important;
}
/* ถ้ามีป้ายเดิมใน foot ให้ซ่อนไว้ (กันซ้ำ) */
body[data-page="lobby"] .rooms-shelf .room-card__foot .room-pill{ display:none !important; }
/* ===== [/ROOM-PILL-TOPLEFT-GOLD] ===== */
/* ==== W21-HOTFIX3 (append) : restore minimal styles for pm-lv, pm-vip, store-badge ==== */

/* Player mini badges (LV/VIP) — ยึด layout เดิม: inline-flex + ไอคอนเล็ก */
.player-mini .pm-badge{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.player-mini .pm-badge img{width:16px;height:16px;display:inline-block}
.player-mini .pm-lv b{font-weight:700}
.player-mini .pm-vip b{font-weight:700}

/* แถบ progress (ถ้ามีการแสดงผลด้วยแถบ) + บังคับโหมด lobby ให้แสดงตัวเลขแทน */
.player-mini .pm-lvbar{position:relative;flex:1 1 auto;height:8px;min-width:80px;background:rgba(255,255,255,.22);border-radius:999px;overflow:hidden;display:inline-block;vertical-align:middle}
.player-mini .pm-lvbar > #pm-lvbar{display:block;width:0%;height:100%;background:linear-gradient(90deg,#22c55e,#4ade80)}
body[data-page="lobby"] .player-mini .pm-lvbar{display:none !important}
body[data-page="lobby"] #pm-lvtext{display:inline !important}

/* Store badges (ปุ่มไป Store ในหน้า index) — คงอัตราส่วนภาพ สะอาด */
.store-row .store-badge{display:inline-block;line-height:0}
.store-row .store-badge img{display:block;height:auto;max-width:180px}

/* ==== W21-HOTFIX4: placeholder selectors for missing classes (non-invasive) ==== */
.p{}
/* === W21-PC-LOBBY-V1 ======================================
   - PC-only layout for lobby
   - Container within "red lines"
   - Player mini at left, announce bar at right (same top level)
   - Rooms as 4-col grid on desktop (no drag needed)
   - Disable text selection/drag on room cards
   --------------------------------------------------------- */
@media (min-width: 1200px){
  :root{
    /* ปรับได้ตามใจ: ความกว้างคอนเทนเนอร์/คอลซ้าย/ระยะขอบ */
    --pc-max: 1200px;      /* เส้นแดงซ้าย-ขวา (ความกว้างรวม) */
    --pc-gutter: 24px;     /* ระยะขอบในซ้าย/ขวา */
    --pmw: 360px;          /* ความกว้าง player mini */
    --top-offset: 16px;    /* ระยะดันลงจากขอบบนใต้ท็อปบาร์ */
    --topbar-stick: calc(64px + 8px); /* เผื่อท็อปบาร์สูง ~64px */
  }

  /* คุมทั้งหน้าล็อบบี้ให้อยู่กลางในเส้นแดง */
  body[data-page="lobby"] .page{
    max-width: var(--pc-max);
    margin: 0 auto;
    padding: 0 var(--pc-gutter);
    display: grid;
    grid-template-columns: var(--pmw) 1fr;
    column-gap: var(--pc-gutter);
    align-items: start;
  }

  /* กล่องผู้เล่น (player mini) - คอลัมน์ซ้าย ระดับเดียวกับประกาศ */
  body[data-page="lobby"] .player-mini{
    grid-column: 1; grid-row: 1;
    margin-top: var(--top-offset);
    position: sticky; top: var(--topbar-stick);
    z-index: 5;
  }

  /* แถบประกาศ - จำกัดกว้างในเส้นแดง และเว้นด้านซ้ายเท่ากับความกว้าง player mini */
  body[data-page="lobby"] .announce{
    margin: var(--top-offset) auto 0;
    position: sticky; top: var(--topbar-stick);
    z-index: 4;
  }
  body[data-page="lobby"] .announce__in{
    max-width: var(--pc-max);
    margin: 0 auto;
    padding: 0 var(--pc-gutter);
    box-sizing: border-box;
    /* ดันเนื้อหาให้ไม่ชน player mini */
    padding-left: calc(var(--pmw) + var(--pc-gutter));
  }

  /* โซนห้อง - คอลัมน์ขวา เป็น grid 4 คอลัมน์ */
  body[data-page="lobby"] .rooms-shelf{ grid-column: 2; grid-row: 1; margin-top: var(--top-offset); }
  body[data-page="lobby"] .rooms__track{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    overflow: visible;
  }
  body[data-page="lobby"] .room-card{ width: auto; }

  /* ป้องกันลากแล้วตัวหนังสือไฮไลต์/รูปถูกลาก (แก้ข้อ 5) */
  body[data-page="lobby"] .rooms-shelf,
  body[data-page="lobby"] .rooms-shelf *{
    -webkit-user-select: none; user-select: none;
  }
  body[data-page="lobby"] .room-card img{
    -webkit-user-drag: none; user-select: none; pointer-events: none;
  }
}
/* === W21-PC-LOBBY-V2 (desktop only) ==========================
   - Keep container within "red lines"
   - Player mini (left) + announce (right) same top level
   - Rooms = horizontal slider (not grid)
   - Fix text selection/drag issue
   -------------------------------------------------------------*/
@media (min-width: 1200px){
  :root{
    --pc-max: 1200px;      /* width between the red lines */
    --pc-gutter: 24px;     /* left/right padding inside container */
    --pmw: 360px;          /* player mini width */
    --top-offset: 16px;    /* spacing below topbar */
    --topbar-stick: calc(64px + 8px);
  }
  /* container grid: left = player, right = content */
  body[data-page="lobby"] .page{
    max-width: var(--pc-max);
    margin: 0 auto;
    padding: 0 var(--pc-gutter);
    display: grid;
    grid-template-columns: var(--pmw) 1fr;
    column-gap: var(--pc-gutter);
    align-items: start;
  }

  /* player mini (left) */
  body[data-page="lobby"] .player-mini{
    grid-column: 1; grid-row: 1;
    margin-top: var(--top-offset);
    position: sticky; top: var(--topbar-stick);
    z-index: 5;
    font-size: 18px; line-height: 1.3;  /* << ตามสั่ง */
  }

  /* announce bar (right, same level as player) */
  body[data-page="lobby"] .announce{
    grid-column: 2; grid-row: 1;
    margin-top: var(--top-offset);
    position: sticky; top: var(--topbar-stick);
    z-index: 4;
    font-size: 18px; line-height: 1.3;  /* << ตามสั่ง */
  }
  /* ensure no extra left padding from V1 */
  body[data-page="lobby"] .announce__in{
    max-width: 100%;
    padding: 0;
  }

  /* rooms: restore slider (horizontal scroll) */
  body[data-page="lobby"] .rooms-shelf{ grid-column: 2; grid-row: 1; margin-top: calc(var(--top-offset) + 68px); }
  body[data-page="lobby"] .rooms__track{
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 8px;
  }
  body[data-page="lobby"] .room-card{
    flex: 0 0 280px;
    scroll-snap-align: start;
  }

  /* prevent text selection / image drag in rooms */
  body[data-page="lobby"] .rooms-shelf,
  body[data-page="lobby"] .rooms-shelf *{ -webkit-user-select:none; user-select:none; }
  body[data-page="lobby"] .room-card img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }
}
/* === W21-PC: rooms under player-mini, left-aligned =================== */
@media (min-width:1200px){
  /* วาง rooms ใต้ player mini และชิดซ้ายเส้นเดียวกัน */
  body[data-page="lobby"] .rooms-shelf{
    grid-column: 1 / -1;   /* กินทั้งแถว แต่เริ่มซ้ายเท่ากับ container */
    grid-row: 2;           /* ใต้ player mini/announce */
    margin-top: 16px;
    align-self: start;
  }
  /* ตัวแทร็ครูม: เริ่มชิดซ้าย ไม่มี padding/margin เกิน */
  body[data-page="lobby"] .rooms__track{
    padding-left: 0;
    margin-left: 0;
  }
}
/* === W21-PC: rooms drag scroll; disable selection === */
@media (min-width:1200px){
  body[data-page="lobby"] .rooms__track,
  body[data-page="lobby"] .room-card,
  body[data-page="lobby"] .room-card *{
    user-select: none; -webkit-user-select: none;
    -webkit-user-drag: none;
  }
  body[data-page="lobby"] .rooms__track{ cursor: grab; }
  body[data-page="lobby"] .rooms__track.is-dragging{ cursor: grabbing; }
}

/* ===== [W21][PC] Lobby desktop alignment (player-mini) =====
   - Gap from topbar: 150px
   - Left align with rooms (no extra horizontal centering)
   - Font sizing inside player-mini: 18px
   - Mobile untouched (min-width >= 1024px only)
*/
@media (min-width: 1024px){
  body[data-page="lobby"] .player-mini{
    /* vertical gap from topbar */
    margin-top: 150px;

    /* align left with normal page/rooms gutter (no auto-centering) */
    margin-left: 0;
    margin-right: 0;

    /* if any previous centering was applied: neutralize */
    float: none;
    transform: none;

    /* readable size as requested */
    font-size: 18px;
    line-height: 1.3;
  }
}

/* ===== [W21][PC-LOBBY-02] Force player-mini position (desktop >=1024px) =====
   - Gap from topbar: 150px
   - Align left like rooms (kill centering/max-width constraints)
   - Font size in player-mini: 18px
   - Mobile untouched
*/
@media (min-width:1024px){
  body[data-page="lobby"] .player-mini{
    /* neutralize previous layout constraints */
    max-width: none !important;
    width: auto !important;
    float: none !important;
    transform: none !important;
    position: static !important;   /* ensure margins take effect */
    /* place it */
    margin-left: 0 !important;     /* follow page padding -> align with rooms */
    margin-right: 0 !important;
    margin-top: 150px !important;  /* requested gap */
    /* typography */
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
}
/* ===== [W21][PC-LOBBY-03] player-mini desktop tune =====
   - margin-top: 60px
   - font-size: 32px
   - margin-left: -10px (ชิดซ้ายกว่า Rooms อีก 10px)
   - มือถือไม่โดน (>=1024px เท่านั้น)
*/
@media (min-width:1024px){
  body[data-page="lobby"] .player-mini{
    margin-top: 60px !important;
    margin-left: -10px !important;
    font-size: 32px !important;
    line-height: 1.25 !important;
  }
}
/* ===== [W21][PC-LOBBY-03] player-mini desktop tune =====
   - margin-top: 60px
   - font-size: 32px
   - margin-left: -10px (ชิดซ้ายกว่า Rooms อีก 10px)
   - มือถือไม่โดน (>=1024px เท่านั้น)
*/
@media (min-width:1024px){
  body[data-page="lobby"] .player-mini{
    margin-top: 40px !important;
    margin-left: -30px !important;
    font-size: 40px !important;
    line-height: 1.25 !important;
  }
}
/* ===== [W21][PC-LOBBY-03] player-mini desktop tune =====
   - margin-top: 60px
   - font-size: 32px
   - margin-left: -10px (ชิดซ้ายกว่า Rooms อีก 10px)
   - มือถือไม่โดน (>=1024px เท่านั้น)
*/
@media (min-width:1024px){
  body[data-page="lobby"] .player-mini{
    margin-top: 40px !important;
    margin-left: -30px !important;
    font-size: 40px !important;
    line-height: 1.25 !important;
  }
}
/* ===== [W21][PC-LOBBY-03] player-mini desktop tune =====
   - margin-top: 60px
   - font-size: 32px
   - margin-left: -10px (ชิดซ้ายกว่า Rooms อีก 10px)
   - มือถือไม่โดน (>=1024px เท่านั้น)
*/
@media (min-width:1024px){
  body[data-page="lobby"] .player-mini{
    margin-top: 60px !important;
    margin-left: -10px !important;
    font-size: 32px !important;
    line-height: 1.25 !important;
  }
}

/* ===== [CHAT20][PM-ALIGN-32PX] desktop-only ===== */
@media (min-width: 1024px){
  body[data-page="lobby"] .player-mini{ 
    margin-top: 60px;              /* เว้นจาก topbar = 60px */
  }
  body[data-page="lobby"] .player-mini .pm-name{
    font-size: 32px;               /* ชื่อ = 32px */
    line-height: 1.2;
    font-weight: 700;
  }
}

/* ===== [CHAT20][PM-ALIGN-24PX] desktop-only ===== */
@media (min-width: 1024px){
  /* เว้นจาก topbar = 40px */
  body[data-page="lobby"] .player-mini{
    margin-top: 40px;
  }
  /* ฟอนต์ทุกอย่างใน player mini = 24px */
  body[data-page="lobby"] .player-mini,
  body[data-page="lobby"] .player-mini *{
    font-size: 24px !important;
    line-height: 1.25;
  }
}
/* ===== [CHAT20][PM-TWEAK-30PX] Player Mini offset + bigger icons (desktop only) ===== */
@media (min-width:1024px){
  /* ระยะจาก Topbar */
  body[data-page="lobby"] .player-mini{ margin-top:30px !important; }

  /* อวาตาร์ใหญ่สมส่วน */
  body[data-page="lobby"] .player-mini .pm-avatar{
    width:72px; height:72px; border-radius:12px; object-fit:cover;
  }

  /* ฟอนต์ใน Player Mini ทั้งกล่อง = 24px */
  body[data-page="lobby"] .player-mini,
  body[data-page="lobby"] .player-mini .pm-name,
  body[data-page="lobby"] .player-mini .pm-id,
  body[data-page="lobby"] .player-mini .pm-badge{
    font-size:24px; line-height:1.15;
  }

  /* ไอคอนในป้าย/แบดจ์ให้สเกลตามฟอนต์ */
  body[data-page="lobby"] .player-mini .pm-badge img,
  body[data-page="lobby"] .player-mini .pm-badges img,
  body[data-page="lobby"] .player-mini .pm-row img:not(.pm-avatar){
    height:1.2em; width:auto; vertical-align:-0.2em;
  }

  /* ปรับ padding/โค้งให้บาลานซ์กับขนาดใหม่ */
  body[data-page="lobby"] .player-mini .pm-badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 10px; border-radius:12px;
  }
}
/* ===== [/CHAT20][PM-TWEAK-30PX] ===== */
/* ===== [CHAT20][PM-ALIGN] Player Mini: left align with rooms, top=30px, avatar circle ===== */
@media (min-width:1024px){
  /* ปรับค่าเลขนี้ให้เท่ากับระยะซ้ายของ rooms ถ้าต่าง */
  body[data-page="lobby"]{ --pm-left: 200px; } /* << ถ้าซ้ายยังไม่เท่า rooms เปลี่ยนเลขตรงนี้ */

  /* ระยะห่างจาก Topbar และดึงซ้ายให้เท่ากับ rooms */
  body[data-page="lobby"] .player-mini{
    margin-top:30px !important;
    margin-left:var(--pm-left) !important;
  }

  /* อวาตาร์วงกลม + ขนาดใหญ่ขึ้น */
  body[data-page="lobby"] .player-mini .pm-avatar{
    width:78px; height:78px;
    border-radius:50% !important;
    object-fit:cover;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
  }

  /* ขนาดตัวอักษรใน Player Mini = 24px */
  body[data-page="lobby"] .player-mini,
  body[data-page="lobby"] .player-mini .pm-row,
  body[data-page="lobby"] .player-mini .pm-name,
  body[data-page="lobby"] .player-mini .pm-id,
  body[data-page="lobby"] .player-mini .pm-badge{
    font-size:24px; line-height:1.15;
  }

  /* ไอคอนใน badge ให้สเกลตามฟอนต์ */
  body[data-page="lobby"] .player-mini .pm-badge img,
  body[data-page="lobby"] .player-mini .pm-badges img{
    height:1.2em; width:auto; vertical-align:-0.2em;
  }

  /* spacing ภายใน badge ให้บาลานซ์กับ 24px */
  body[data-page="lobby"] .player-mini .pm-badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 10px; border-radius:12px;
  }
}
/* ===== [/CHAT20][PM-ALIGN] ===== */
/* PM-LEFT override (desktop) */
@media (min-width:1024px){
  body[data-page="lobby"]{ --pm-left: 200px; }
}
/* === PM LEFT OVERRIDE (desktop ≥1024px) === */
@media (min-width:1024px){
  /* ตั้งค่าซ้ายที่ต้องการ */
  body[data-page="lobby"]{ --pm-left: 200px; }
  /* บังคับให้ fixed element ใช้ left ตามตัวแปร */
  body[data-page="lobby"] .player-mini{
    left: var(--pm-left) !important;
    margin-left: 0 !important;   /* กัน margin เก่ามีผล */
  }
}
@media (min-width:1024px){
  body[data-page="lobby"]{ --pm-left: 200px; }
}
/* [DU-FIX][player-mini-left][force] */
@media (min-width:1024px){
  body[data-page="lobby"] .player-mini{
    left: 200px !important;
    right: auto !important;
    margin-left: 0 !important; /* neutralize margin tricks */
  }
}
/* [DU-FIX][player-mini-left][force-210] */
@media (min-width:1024px){
  body[data-page="lobby"] .player-mini{
    left: 210px !important;
    right: auto !important;
    margin-left: 0 !important; /* neutralize margin tricks */
  }
}
/* [DU-FIX][player-mini-left][force-210] */
@media (min-width:1024px){
  body[data-page="lobby"] .player-mini{
    left: 210px !important;
    right: auto !important;
    margin-left: 0 !important; /* neutralize margin tricks */
  }
}
/* [DU-FIX][player-mini-left][force-250][final] */
@media (min-width:1024px){
  body[data-page="lobby"] .player-mini{
    position: fixed !important;   /* kill earlier 'position: static !important' */
    left: 250px !important;       /* requested offset */
    right: auto !important;
    margin-left: 0 !important;    /* neutralize margin hacks */
    transform: none !important;
    float: none !important;
  }
}
/* [DU-FIX][player-mini][left210-font18][final] */
@media (min-width:1024px){
  /* บังคับใช้ตำแหน่งแบบ fixed เพื่อให้ left ทำงาน แม้เคยมี position: static !important */
  body[data-page="lobby"] .player-mini{
    position: fixed !important;
    left: 210px !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: none !important;
    float: none !important;
  }
  /* ฟอนต์ทั้งหมดในกรอบ player mini = 18px (ทับทุกกฎก่อนหน้า) */
  body[data-page="lobby"] .player-mini,
  body[data-page="lobby"] .player-mini .pm-row,
  body[data-page="lobby"] .player-mini .pm-name,
  body[data-page="lobby"] .player-mini .pm-id,
  body[data-page="lobby"] .player-mini .pm-badge{
    font-size: 18px !important;
    line-height: 1.25;
  }
}
/* [DU-FIX][player-mini][left180-font18][final] */
@media (min-width:1024px){
  /* บังคับให้ left ทำงาน แม้เคยมี position: static !important มาก่อน */
  body[data-page="lobby"] .player-mini{
    position: fixed !important;
    left: 180px !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: none !important;
    float: none !important;
  }
  /* ฟอนต์ทั้งหมดใน player mini = 18px (รวมชื่อ, ID, LV, VIP ฯลฯ) */
  body[data-page="lobby"] .player-mini,
  body[data-page="lobby"] .player-mini *{
    font-size: 18px !important;
    line-height: 1.25 !important;
  }
  /* ให้ป้าย LV/VIP และไอคอนสเกลตาม 18px */
  body[data-page="lobby"] .player-mini .pm-badge{
    padding: 4px 8px !important;
  }
  body[data-page="lobby"] .player-mini .pm-badge img{
    height: 1em !important; width: auto !important; vertical-align: -0.15em !important;
  }
}
/* [DU-FINAL][PM-ALIGN-ROOMS]
   Align .player-mini left edge to Rooms left edge (desktop only),
   overriding earlier fixed/static/margin rules.
*/

/* 1024–1199px: Rooms = 96vw, padding-left = 8px → left = (100vw-96vw)/2 + 8px = 2vw + 8px */
@media (min-width:1024px) and (max-width:1199.98px){
  body[data-page="lobby"] .player-mini{
    position: fixed !important;
    left: calc((100vw - 96vw)/2 + 8px) !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: none !important;
    float: none !important;
  }
}

/* ≥1200px: Container = 1200px, gutter-left = 24px → left = (100vw-1200px)/2 + 24px */
@media (min-width:1200px){
  body[data-page="lobby"] .player-mini{
    position: fixed !important;
    left: calc((100vw - 1200px)/2 + 24px) !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: none !important;
    float: none !important;
  }
}
/* [DU-FINAL][PM-TOP-30PX-DESKTOP]
   Force .player-mini gap below topbar to 30px on desktop.
   Neutralizes any previous top/margin rules (incl. data-ann="on").
*/
@media (min-width:1024px){
  body[data-page="lobby"] .player-mini{
    position: fixed !important;
    top: calc(var(--topbar-h,56px) + 30px) !important;
    margin-top: 0 !important;   /* old margin hacks off */
  }
  /* keep the same Y even when announcement toggles */
  body[data-ann="on"] .player-mini{
    top: calc(var(--topbar-h,56px) + 30px) !important;
  }
}
/* [DU-FINAL][PM-TOP-40PX-DESKTOP]
   Force .player-mini gap below topbar to 40px on desktop.
   Neutralizes any previous top/margin rules (incl. data-ann="on").
*/
@media (min-width:1024px){
  body[data-page="lobby"] .player-mini{
    position: fixed !important;
    top: calc(var(--topbar-h,56px) + 40px) !important;
    margin-top: 0 !important;   /* kill old margin hacks */
  }
  /* keep same Y even when announcement bar toggles */
  body[data-ann="on"] .player-mini{
    top: calc(var(--topbar-h,56px) + 40px) !important;
  }
}

/* === W22-FINAL PLAYER-MINI — 2025-09-27 =====================================
   Spec:
   - Gap from topbar = 30px (desktop)
   - All text inside player-mini = 18px; LV/VIP numbers = 24px
   - Make player-mini wider on desktop
   - Keep left align; ignore announce bar height (fixed Y)
   ========================================================================== */
@media (min-width:1024px){
  body[data-page="lobby"] .player-mini{
    position: fixed !important;
    top: calc(var(--topbar-h,56px) + 30px) !important;
    margin-top: 0 !important;

    left: 8px !important;    /* align with Rooms (unchanged) */
    right: auto !important;

    /* Wider than previous ~420px */
    width: clamp(440px, 40vw, 560px) !important;
    max-width: none !important;

    z-index: 60 !important;
  }
  /* Keep same Y even when announcement is on */
  body[data-ann="on"] .player-mini{
    top: calc(var(--topbar-h,56px) + 30px) !important;
  }

  /* Typography: base 18px everywhere in player-mini */
  body[data-page="lobby"] .player-mini,
  body[data-page="lobby"] .player-mini *{
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  /* LV / VIP numbers = 24px (bigger) */
  body[data-page="lobby"] #pm-lv,
  body[data-page="lobby"] #pm-vip{
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
  }
}
/* === /W22-FINAL ============================================================ */

/* === W23-FINAL PLAYER-MINI — 2025-09-27 ==============================
   Spec:
   - Top gap = 50px (desktop)
   - Width = 420px fixed (desktop)
   - All text = 18px (LV/VIP included)
   - Left align same as Rooms container (min(1200px,96vw) + 8px gutter)
   ==================================================================== */
:root{
  --du-container: min(1200px, 96vw);
  --du-gutter: 8px;
}
@media (min-width:1024px){
  body[data-page="lobby"] .player-mini{
    position: fixed !important;
    top:  calc(var(--topbar-h,56px) + 50px) !important;
    left: calc((100vw - var(--du-container)) / 2 + var(--du-gutter)) !important;
    right: auto !important;
    margin-top: 0 !important;

    width: 420px !important;
    max-width: none !important;
    z-index: 60 !important;
  }
  /* keep same Y even when announcement is visible */
  body[data-ann="on"] .player-mini{
    top: calc(var(--topbar-h,56px) + 50px) !important;
  }

  /* Typography: 18px everywhere inside player-mini */
  body[data-page="lobby"] .player-mini,
  body[data-page="lobby"] .player-mini *{
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  /* Ensure LV/VIP are also 18px (not enlarged anywhere else) */
  body[data-page="lobby"] #pm-lv,
  body[data-page="lobby"] #pm-vip{
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 700;
  }
}
 /* === /W23-FINAL ===================================================== */

/* === W23-AVATAR-CIRCLE (2025-09-27) =========================
   Force the mini player avatar to be perfectly circular
   - Beat all previous desktop/mobile overrides
   - Keep object-fit to avoid distortion
   ============================================================ */
body[data-page="lobby"] .player-mini .pm-avatar{
  border-radius:50% !important;
  aspect-ratio:1/1 !important;
  object-fit:cover !important;
  overflow:hidden !important; /* เผื่อมีเงาหรือภาพเกินขอบ */
}
/* ============================================================ */

/* === W23-PM-GAP+AVATAR-FIX (2025-09-27) ==========================
   Goal:
   - ขยับ "ชื่อ + LV/VIP" ไปทางขวาในกรอบ player-mini (เพิ่มช่องว่าง)
   - บังคับอวาตาร์เป็น "วงกลม" ไม่บีบเป็นวงรี (width=height, crop กลาง)
   - Desktop เท่านั้น; mobile ไม่แตะ
   ================================================================ */
@media (min-width:1024px){
  body[data-page="lobby"] .player-mini{
    /* ช่องว่างระหว่างอวาตาร์กับเนื้อหา -> ดันชื่อ/LV ไปทางขวา "หน่อย" */
    column-gap: 14px !important;  /* เดิม ~8–10px */
    gap: 14px !important;

    /* เลย์เอาต์ 2 คอลัมน์: คอล์มอวาตาร์กว้างขึ้นเล็กน้อยให้ดูโปร่ง */
    grid-template-columns: 66px 1fr !important;

    /* ย้ำความกว้างกล่องตามที่กำหนด (เผื่อมี rules เก่าทับ) */
    width: 420px !important;
    max-width: 420px !important;

    /* ฟอนต์ทั้งกล่อง = 18px ตามโจทย์ */
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  /* ขยับเนื้อหาด้านในอีกนิดให้สบายตา */
  body[data-page="lobby"] .player-mini .pm-body{ padding-left: 2px !important; }

  /* ชื่อ / ID / ป้าย LV/VIP ให้คง 18px เท่ากันทั้งหมด */
  body[data-page="lobby"] .player-mini .pm-name,
  body[data-page="lobby"] .player-mini .pm-id,
  body[data-page="lobby"] .player-mini .pm-badge,
  body[data-page="lobby"] .player-mini .pm-badge b{
    font-size: 18px !important;
  }

  /* อวาตาร์: วงกลมสมบูรณ์ ไม่ยืด-ไม่บี้ */
  body[data-page="lobby"] .player-mini .pm-avatar{
    width: 66px !important;
    height: 66px !important;          /* บังคับให้เท่ากับ width */
    aspect-ratio: 1 / 1 !important;   /* กัน browser บางตัว */
    object-fit: cover !important;      /* ครอปกลาง */
    border-radius: 50% !important;     /* วงกลมชัวร์ */
    overflow: hidden !important;
  }
}
/* ================================================================= */

/* === [RESP-DESKTOP][TOP-SUMMARY-BAR v1.2] === */
@media (min-width:1024px){
  :root{ --du-max: 1200px; }

  /* Player Mini = full-width sticky summary bar (glass) */
  body[data-page="lobby"] .player-mini{
    position: sticky !important;
    top: calc(var(--topbar-h,56px) + 50px) !important;
    left: 50% !important; transform: translateX(-50%) !important;
    width: min(96vw, var(--du-max)) !important;
    max-width: min(96vw, var(--du-max)) !important;
    display: flex !important; align-items: center !important; gap: 14px !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.34)) !important;
    -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
    z-index: 60 !important;
  }
  body[data-ann="on"][data-page="lobby"] .player-mini{
    top: calc(var(--topbar-h,56px) + 50px) !important; /* อย่าดันลงเมื่อมีประกาศ */
  }
  body[data-page="lobby"] .player-mini .pm-avatar{
    width: 56px !important; height: auto !important;
    aspect-ratio: 1 / 1 !important; object-fit: cover !important; border-radius: 50% !important;
    flex: 0 0 56px !important;
  }
  body[data-page="lobby"] .player-mini .pm-body{
    display: flex !important; align-items: center !important; gap: 14px !important;
    min-width: 0 !important; flex: 1 1 auto !important;
  }
  body[data-page="lobby"] .player-mini .pm-row{
    display: flex !important; align-items: baseline !important; gap: 10px !important;
    min-width: 0 !important; flex: 0 1 auto !important;
  }
  body[data-page="lobby"] .player-mini .pm-name{
    font-size: 18px !important; line-height: 1.25 !important; font-weight: 800 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    max-width: 24ch !important;
  }
  body[data-page="lobby"] .player-mini .pm-id{ opacity: .85 !important; }
  body[data-page="lobby"] .player-mini .pm-badges{
    margin-left: auto !important; display: inline-flex !important; align-items: center !important;
    gap: 10px !important; flex-wrap: nowrap !important;
  }
  body[data-page="lobby"] .player-mini .pm-badge{
    padding: 6px 10px !important; border-radius: 999px !important;
    background: rgba(255,255,255,.12) !important; font-weight: 700 !important; line-height: 1 !important;
  }
  body[data-page="lobby"] .player-mini .pm-badge img{ width:18px !important; height:18px !important; display:inline-block !important; }
  body[data-page="lobby"] .player-mini, body[data-page="lobby"] .player-mini *{
    font-size: 18px !important; line-height: 1.25 !important;  /* รวมเลข LV/VIP */
  }

  /* Rooms container: same centered width as summary bar */
  body[data-page="lobby"] .rooms-shelf{
    width: min(96vw, var(--du-max)) !important;
    max-width: min(96vw, var(--du-max)) !important;
    margin: 72px auto 18px !important;  /* กันชนใต้แถบสรุป */
    padding: 0 !important;
  }

  /* Grid steps: 3 / 4 / 5 columns */
  body[data-page="lobby"] .rooms__track{
    display: grid !important; gap: 20px !important; overflow: visible !important;
    scroll-snap-type: none !important; padding: 2px 0 10px !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;           /* >=1024 */
  }
  @media (min-width:1200px){
    body[data-page="lobby"] .rooms__track{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
  }
  @media (min-width:1440px){
    body[data-page="lobby"] .rooms__track{ grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
  }
  body[data-page="lobby"] .room-card{
    width: auto !important; min-width: 0 !important; aspect-ratio: 3 / 4 !important;
    transition: transform .16s ease, box-shadow .16s ease !important;
  }
  body[data-page="lobby"] .room-card:hover{ transform: translateY(-3px) !important; box-shadow: 0 12px 28px rgba(0,0,0,.35) !important; }
  body[data-page="lobby"] .room-card:focus-visible{
    outline: 3px solid #8ad2ff !important; outline-offset: 2px !important; border-radius: 18px !important;
  }
}
/* === [/RESP-DESKTOP][TOP-SUMMARY-BAR v1.2] === */