/* =====================================================================
   VoiceRoom Design System — "Night Lounge"
   แนวคิด: ห้องนั่งเล่นยามค่ำคืน พื้นม่วงคราม · ทอง = เงิน/พรีเมียม · มิ้นต์ = ไลฟ์/ไมค์/กำลังพูด
   โหลดหลัง app.css (ทับสไตล์เดิม) · เกม Lucky 77 ใช้สไตล์ของตัวเอง ไม่ถูกแตะ
   ลบไฟล์นี้ (และบรรทัด <link> ใน index.html) = กลับไปหน้าตาเดิม
   ===================================================================== */
:root {
  /* สี */
  --night-900:#0E0A1F;   /* พื้นลึกสุด (นอกกรอบแอป) */
  --night-800:#151030;   /* พื้นหลังแอป */
  --night-700:#1D1640;   /* การ์ด / แผง */
  --night-600:#2A2156;   /* การ์ดยกขึ้น / hover */
  --line:#352B66;        /* เส้นขอบ */
  --ink:#F3F0FF;         /* ตัวอักษรหลัก */
  --ink-2:#B9B2DD;       /* ตัวอักษรรอง */
  --ink-3:#8A82B3;       /* ป้าย / คำอธิบาย */
  --gold:#F5C04A;        /* เงิน เหรียญ ของพรีเมียม */
  --gold-deep:#B9820F;
  --mint:#3EE0B5;        /* ไลฟ์ ไมค์ กำลังพูด ปุ่มหลัก */
  --mint-deep:#0E8F6A;
  --rose:#FF5C8A;        /* แจ้งเตือน / ออก / ลบ */
  /* ตัวอักษร */
  --f-display:'Kanit', 'Prompt', system-ui, sans-serif;
  --f-body:'IBM Plex Sans Thai', 'Prompt', system-ui, sans-serif;
  /* ขนาดตัวอักษร (สเกล 1.2) */
  --t-xs:11px; --t-sm:12.5px; --t-md:14px; --t-lg:16px; --t-xl:19px; --t-2xl:23px; --t-3xl:30px;
  /* ระยะ / มุม / เงา */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:28px;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --shadow-1:0 4px 14px rgba(5,3,20,.45);
  --shadow-2:0 12px 32px rgba(5,3,20,.55);
  --focus:0 0 0 3px rgba(62,224,181,.55);
  color-scheme:dark;
}

/* ---------- พื้นฐาน ---------- */
html, body { background:var(--night-900); }
body { font-family:var(--f-body); color:var(--ink); -webkit-font-smoothing:antialiased; }
@media (min-width:600px) {
  body { background:radial-gradient(circle at 25% 15%, #2A1F5C 0%, var(--night-900) 60%); }
  #app { box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 10px #07051A, 0 0 0 11px var(--line) !important; }
}
#app button, #app input, #app select { font-family:var(--f-body); }
#app :focus-visible { outline:none; box-shadow:var(--focus); }
#app .view.light, #app .view.dark { background:var(--night-800); color:var(--ink); }
@media (prefers-reduced-motion:reduce) { #app *, #app *::before, #app *::after { animation:none !important; transition:none !important; } }

/* ปุ่มมาตรฐาน */
#app .btn { font-family:var(--f-display); font-weight:500; letter-spacing:.2px; border-radius:var(--r-md); padding:13px 20px; font-size:var(--t-lg); }
#app .btn.mint { background:var(--mint); color:#062A20; box-shadow:0 6px 18px rgba(62,224,181,.28); }
#app .btn.gold { background:linear-gradient(180deg, #FFD571, var(--gold)); color:#3A2600; box-shadow:0 6px 18px rgba(245,192,74,.25); }
#app .btn.ghost { background:var(--night-600); color:var(--ink); }
#app .btn:active { transform:translateY(1px); }
.muted, #app .muted { color:var(--ink-3); font-size:var(--t-sm); }

/* ---------- หน้าเข้าสู่ระบบ ---------- */
#vLogin { background:
  radial-gradient(120% 60% at 50% -10%, #3A2A86 0%, transparent 60%),
  radial-gradient(60% 40% at 90% 100%, rgba(62,224,181,.18) 0%, transparent 70%),
  var(--night-800) !important; }
#app .loginBox { gap:var(--s4); margin:auto var(--s6); }
#app .logo { font-family:var(--f-display); font-weight:600; font-size:40px; letter-spacing:-.5px; color:var(--ink); display:flex; align-items:center; gap:10px; }
#app .logo::before { content:""; width:44px; height:44px; border-radius:14px; flex-shrink:0;
  background:
    radial-gradient(circle at 50% 38%, #062A20 0 5px, transparent 6px),
    linear-gradient(#062A20,#062A20) 50% 62%/4px 12px no-repeat,
    linear-gradient(145deg, var(--mint), #1FB892); box-shadow:0 6px 18px rgba(62,224,181,.35); }
#app .logo span { color:var(--gold); }
#app .loginBox .muted { font-size:var(--t-md); line-height:1.6; }
#app .loginBox input, #app .field { height:52px; border-radius:var(--r-md); border:1.5px solid var(--line); background:var(--night-700); color:var(--ink); font-size:var(--t-lg); padding:0 var(--s4); }
#app .loginBox input::placeholder, #app .field::placeholder { color:var(--ink-3); }
#app .loginBox input:focus, #app .field:focus { border-color:var(--mint); box-shadow:var(--focus); outline:none; }

/* ---------- หน้ารายชื่อห้อง ---------- */
#vLobby { background:
  radial-gradient(100% 40% at 50% -5%, #2C2068 0%, transparent 65%), var(--night-800) !important; }
#app .lHead { padding:var(--s5) var(--s4) var(--s3); }
#app .tabs { gap:var(--s4); font-family:var(--f-display); font-size:var(--t-md); white-space:nowrap; min-width:0; }
#app .tabs .dim { color:var(--ink-3); font-weight:400; }
#app .tabs b { font-size:var(--t-2xl); font-weight:600; color:var(--ink); }
#app .tabs i { background:var(--mint); width:20px; height:3px; }
#app .coinChip { background:var(--night-700); color:var(--ink); border:1px solid var(--line); box-shadow:none; font-family:var(--f-display); font-weight:500; font-variant-numeric:tabular-nums; }
#app .sqBtn { border-radius:var(--r-md); font-family:var(--f-display); }
#app .mintBg { background:var(--mint); color:#062A20; box-shadow:0 6px 18px rgba(62,224,181,.3); }
#app .banner { margin:var(--s2) var(--s4) var(--s1); border-radius:var(--r-lg); padding:var(--s4) var(--s5); min-height:104px;
  background:
    radial-gradient(circle at 88% 30%, rgba(245,192,74,.55) 0 34px, transparent 35px),
    radial-gradient(circle at 88% 30%, rgba(245,192,74,.18) 0 58px, transparent 59px),
    linear-gradient(115deg, #4A2CB0 0%, #2A1B6E 70%);
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-1); }
#app .banner small { font-family:var(--f-display); color:var(--gold); font-size:var(--t-xs); letter-spacing:1.2px; text-transform:uppercase; }
#app .banner b { font-family:var(--f-display); font-weight:600; font-size:var(--t-xl); margin-top:2px; }
#app .banner span { color:var(--ink-2); font-size:var(--t-sm); }
#app .roomGrid { gap:var(--s3); padding:var(--s4); }
#app .roomCard { height:200px; border-radius:var(--r-lg); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-1); transition:transform .15s; }
#app .roomCard:hover { transform:translateY(-2px); }
#app .roomCard.first { border:1.5px solid var(--gold); box-shadow:0 0 0 3px rgba(245,192,74,.18), var(--shadow-1); }
#app .roomCard .deco1 { background:rgba(255,255,255,.10); }
#app .roomCard .deco2 { background:rgba(0,0,0,.10); }
#app .roomCard .big { top:44px; color:rgba(255,255,255,.85); filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
#app .roomCard .type, #app .roomCard .cnt { background:rgba(10,6,30,.45); backdrop-filter:blur(6px); font-family:var(--f-display); font-size:var(--t-xs); letter-spacing:.3px; padding:3px 10px; }
#app .roomCard .foot { background:linear-gradient(180deg, transparent, rgba(10,6,30,.78)); padding:var(--s3) var(--s3) var(--s3); }
#app .roomCard .foot b { font-family:var(--f-display); font-weight:500; font-size:var(--t-md); }
#app .roomCard .foot span { color:var(--gold); font-variant-numeric:tabular-nums; }
#app .hostAv { border:2px solid rgba(255,255,255,.9); font-family:var(--f-display); }
#app .emptyMsg { color:var(--ink-3); }
#app .bNav { background:rgba(21,16,48,.92); backdrop-filter:blur(12px); border-top:1px solid var(--line); height:70px; padding:0 var(--s2); }
#app .bNav button { color:var(--ink-3); font-family:var(--f-display); font-size:var(--t-xs); gap:4px; border-radius:var(--r-md); }
#app .bNav button.on { color:var(--mint); font-weight:500; }
#app .bNav button.on svg { fill:none; stroke:var(--mint); }
#app .bNav button.on::after { content:""; width:5px; height:5px; border-radius:50%; background:var(--mint); margin-top:1px; }

/* ---------- ห้องเสียง ---------- */
#vRoom { background:
  radial-gradient(90% 45% at 50% -8%, #3B2590 0%, transparent 65%),
  radial-gradient(60% 40% at 100% 70%, rgba(255,92,138,.12) 0%, transparent 70%),
  linear-gradient(180deg, #1A1240 0%, var(--night-800) 60%) !important; }
#vRoom::after { opacity:.45; }
#app .rHead { padding:var(--s4) var(--s3) var(--s2); }
#app .rAvatar { border-radius:var(--r-md); border:1.5px solid rgba(255,255,255,.25); font-family:var(--f-display); }
#app .rName { font-family:var(--f-display); font-weight:500; font-size:var(--t-lg); }
#app .cntChip, #app .iconBtn { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); }
#app .topChip { background:linear-gradient(90deg, #FFD571, var(--gold)); color:#3A2600; font-family:var(--f-display); font-weight:500; }
#app .totalChip { background:rgba(255,255,255,.08); color:var(--gold); font-family:var(--f-display); font-variant-numeric:tabular-nums; }
#app .seat .av { border:2px solid rgba(255,255,255,.85); font-family:var(--f-display); }
#app .seat.owner .av { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,192,74,.35); }
#app .seat.speaking .av { box-shadow:0 0 0 3px var(--mint), 0 0 18px 4px rgba(62,224,181,.55); }
#app .seat .av.empty { background:rgba(255,255,255,.05); border:1.5px dashed rgba(255,255,255,.22); }
#app .seat .nm { font-size:var(--t-xs); color:var(--ink-2); }
#app .seat .gv { color:var(--gold); background:rgba(0,0,0,.32); font-variant-numeric:tabular-nums; }
#app .chat > div { background:rgba(10,6,30,.45); border:1px solid rgba(255,255,255,.06); border-radius:14px 14px 14px 4px; font-size:var(--t-sm); line-height:1.5; }
#app .chat .sys { color:var(--ink-3); background:transparent; border:none; padding-left:0; }
#app .chat .gift { background:linear-gradient(90deg, rgba(245,192,74,.22), rgba(245,192,74,.06)); color:#FFE3A0; border-color:rgba(245,192,74,.25); }
#app .chat .who { color:var(--mint); font-weight:500; }
#app .takeBtn { background:var(--mint); color:#062A20; box-shadow:0 6px 18px rgba(62,224,181,.4); }
#app .rocket > div { background:var(--night-700); }
#app .rFoot { padding:var(--s2) var(--s3) var(--s3); gap:var(--s2); background:linear-gradient(180deg, transparent, rgba(10,6,30,.55)); }
#app .rFoot input { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); font-size:var(--t-md); }
#app .rFoot input:focus { border-color:var(--mint); outline:none; }
#app .cBtn { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); }
#app .cBtn.on { background:var(--mint); color:#062A20; border-color:var(--mint); }
#app .cBtn.giftC { background:radial-gradient(circle at 35% 30%, #FFE08A, #F59A2C 75%); border:none; box-shadow:0 0 16px rgba(245,170,60,.55); }

/* ---------- แผงของขวัญ ---------- */
#app #giftSheet .sheet { background:linear-gradient(180deg, var(--night-700), var(--night-800)); border-top:1px solid var(--line); border-radius:24px 24px 0 0; padding:var(--s4) var(--s4) var(--s5); gap:var(--s3); }
#app #giftSheet .sheet::before { content:""; align-self:center; width:40px; height:4px; border-radius:2px; background:var(--line); margin-top:-6px; }
#app .sheetRow { border-bottom:1px solid var(--line); }
#app .tg.on { border-color:var(--mint); } #app .tg.on::after { background:var(--mint); }
#app .pill { border-color:var(--mint); color:var(--mint); font-family:var(--f-display); }
#app .giftTabs button { font-family:var(--f-display); color:var(--ink-3); }
#app .giftTabs button.on { color:var(--ink); }
#app .giftTabs button.on::after { background:var(--mint); }
#app .giftTabs button.lk { border-color:var(--gold); color:var(--gold); }
#app .giftTabs button.lk.on { background:var(--gold); color:#3A2600; }
#app .luckyNote { background:rgba(245,192,74,.10); border:1px solid rgba(245,192,74,.22); color:#FFE3A0; }
#app .oddsBtn { border-color:var(--line); color:var(--ink-2); }
#app .gItem { border-radius:var(--r-md); background:rgba(255,255,255,.03); }
#app .gItem.sel { border-color:var(--mint); background:rgba(62,224,181,.08); }
#app .gItem .nm { color:var(--ink); } #app .gItem .pr { color:var(--gold); font-variant-numeric:tabular-nums; }
#app .darkChip { background:var(--night-600); border:1px solid var(--line); }
#app .qty { border-color:var(--line); color:var(--ink); background:var(--night-700); }
#app .sheet .btn.gold { background:var(--mint); color:#062A20; }

/* ---------- แผงทั่วไป (ฉัน / สร้างห้อง / กติกา) ---------- */
#app #modal .sheet.light { background:var(--night-700); color:var(--ink); border-top:1px solid var(--line); border-radius:24px 24px 0 0; padding:var(--s5) var(--s4) var(--s6); gap:var(--s3); }
#app #modal .sheet.light::before { content:""; align-self:center; width:40px; height:4px; border-radius:2px; background:var(--line); margin-top:-8px; }
#app .mTitle { font-family:var(--f-display); font-weight:600; font-size:var(--t-xl); }
#app .mItem { background:var(--night-600); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-md); font-size:var(--t-md); }
#app button.mItem:hover { border-color:var(--mint); }
#app .typeRow button { background:var(--night-600); border:1.5px solid var(--line); color:var(--ink-2); font-family:var(--f-display); }
#app .typeRow button.on { border-color:var(--mint); background:rgba(62,224,181,.12); color:var(--ink); }
#app .oddsTbl td, #app .oddsTbl th { border-bottom:1px solid var(--line); }
#app .oddsTbl th { color:var(--ink-3); font-weight:500; font-size:var(--t-sm); }
#app .toast { background:rgba(29,22,64,.96); border:1px solid var(--line); color:var(--ink); font-family:var(--f-display); box-shadow:var(--shadow-2); backdrop-filter:blur(8px); }
#app .sheetBg { background:rgba(5,3,20,.55); backdrop-filter:blur(2px); }

/* =====================================================================
   v2 — หน้าเข้าสู่ระบบ / หน้ารายชื่อห้อง / หน้าโปรไฟล์ / รูปโปรไฟล์
   ===================================================================== */
/* รูปโปรไฟล์ (ไล่สีจากชื่อ) */
#app .avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; font-family:var(--f-display); font-weight:600; flex-shrink:0;
  text-shadow:0 1px 2px rgba(0,0,0,.25); box-shadow:inset 0 -3px 6px rgba(0,0,0,.18), inset 0 2px 4px rgba(255,255,255,.25); }
#app .avatar.big { border:3px solid var(--night-800); box-shadow:0 0 0 3px var(--gold), 0 10px 30px rgba(0,0,0,.45); }

/* ----- หน้าเข้าสู่ระบบ ----- */
#app #vLogin { justify-content:flex-end; }
#app .heroArt { position:relative; height:46%; min-height:280px; }
#app .orbit { position:absolute; left:50%; top:52%; border-radius:50%; border:1px dashed rgba(185,178,221,.25); transform:translate(-50%,-50%); }
#app .orbit.o1 { width:190px; height:190px; } #app .orbit.o2 { width:300px; height:300px; border-style:solid; border-color:rgba(185,178,221,.10); }
#app .hMic { position:absolute; left:50%; top:52%; width:96px; height:96px; transform:translate(-50%,-50%); border-radius:30px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, var(--mint), #1FB892); box-shadow:0 0 0 10px rgba(62,224,181,.12), 0 0 0 22px rgba(62,224,181,.06), 0 18px 40px rgba(0,0,0,.4); animation:micPulse 2.4s ease-in-out infinite; }
@keyframes micPulse { 50% { box-shadow:0 0 0 14px rgba(62,224,181,.16), 0 0 0 30px rgba(62,224,181,.05), 0 18px 40px rgba(0,0,0,.4); } }
#app .hAv { position:absolute; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--f-display); font-weight:600; font-size:18px;
  border:3px solid var(--night-800); box-shadow:0 8px 18px rgba(0,0,0,.35); }
#app .hAv.a1 { left:calc(50% - 150px); top:calc(52% - 40px); background:linear-gradient(140deg,#FF8A5B,#FF4F8B); }
#app .hAv.a2 { left:calc(50% + 104px); top:calc(52% - 70px); background:linear-gradient(140deg,#5BC8FF,#3A6BFF); box-shadow:0 0 0 3px var(--mint), 0 0 18px rgba(62,224,181,.5); }
#app .hAv.a3 { left:calc(50% - 98px); top:calc(52% + 70px); background:linear-gradient(140deg,#9B6BFF,#5B3BE0); }
#app .hAv.a4 { left:calc(50% + 82px); top:calc(52% + 60px); background:linear-gradient(140deg,#FFC24B,#FF7A2E); }
#app .hAv.a5 { left:calc(50% - 24px); top:calc(52% - 150px); background:linear-gradient(140deg,#7BE07A,#1FAE8A); width:40px; height:40px; font-size:15px; }
#app .hGift { position:absolute; width:30px; height:26px; border-radius:6px; background:linear-gradient(180deg,#FFD571,#F59A2C); box-shadow:0 6px 14px rgba(0,0,0,.35); animation:floaty 3.2s ease-in-out infinite; }
#app .hGift::before { content:""; position:absolute; left:50%; top:-2px; bottom:-2px; width:5px; transform:translateX(-50%); background:#FF4F8B; }
#app .hGift.g1 { left:calc(50% + 120px); top:calc(52% + 6px); } #app .hGift.g2 { left:calc(50% - 160px); top:calc(52% + 40px); width:22px; height:20px; animation-delay:-1.4s; }
#app .hCoin { position:absolute; width:20px; height:20px; border-radius:50%; background:var(--gold); box-shadow:inset 0 0 0 3px var(--gold-deep), 0 4px 10px rgba(0,0,0,.3); animation:floaty 2.6s ease-in-out infinite; }
#app .hCoin.c1 { left:calc(50% + 40px); top:calc(52% - 128px); } #app .hCoin.c2 { left:calc(50% - 60px); top:calc(52% + 118px); animation-delay:-.8s; width:14px; height:14px; }
@keyframes floaty { 50% { transform:translateY(-8px); } }
#app .loginBox { margin:0 var(--s6) var(--s6); gap:var(--s3); }
#app .tagline { color:var(--ink-2); font-size:var(--t-lg); line-height:1.55; margin-bottom:var(--s3); }
#app .fieldLbl { font-family:var(--f-display); font-size:var(--t-sm); color:var(--ink-3); letter-spacing:.3px; }
#app .fine { text-align:center; color:var(--ink-3); font-size:var(--t-xs); margin-top:var(--s1); }

/* ----- หน้ารายชื่อห้อง ----- */
#app #vLobby, #app #vMe { padding-bottom:70px; }
#app .lHead { gap:var(--s3); align-items:center; }
#app .meMini { border:none; background:none; padding:0; border-radius:50%; }
#app .hello { display:flex; flex-direction:column; line-height:1.2; }
#app .hello small { color:var(--ink-3); font-size:var(--t-xs); font-family:var(--f-display); letter-spacing:.4px; }
#app .hello b { font-family:var(--f-display); font-weight:600; font-size:var(--t-lg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .lobbyScroll { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:var(--s3); padding:0 var(--s4) var(--s5); }
#app .lobbyScroll::-webkit-scrollbar { width:0; }
#app .search { display:flex; align-items:center; gap:var(--s2); height:44px; padding:0 var(--s3); border-radius:var(--r-md); background:var(--night-700); border:1px solid var(--line); color:var(--ink-3); }
#app .search:focus-within { border-color:var(--mint); box-shadow:var(--focus); }
#app .search input { flex:1; min-width:0; border:none; background:none; color:var(--ink); font-size:var(--t-md); outline:none; }
#app .search input::placeholder { color:var(--ink-3); }
#app .cats { display:flex; gap:var(--s2); overflow-x:auto; scrollbar-width:none; }
#app .cats::-webkit-scrollbar { display:none; }
#app .cat { flex-shrink:0; height:34px; padding:0 var(--s4); border-radius:var(--r-pill); border:1px solid var(--line); background:transparent; color:var(--ink-2); font-family:var(--f-display); font-size:var(--t-sm); }
#app .cat.on { background:var(--ink); color:var(--night-800); border-color:var(--ink); font-weight:500; }
#app .banner { margin:0; position:relative; overflow:hidden; }
#app .banner .bannerArt { position:absolute; right:14px; top:50%; width:64px; height:64px; transform:translateY(-50%) rotate(-8deg); border-radius:16px;
  background:linear-gradient(180deg,#FFD571,#F59A2C); box-shadow:0 10px 24px rgba(0,0,0,.35); }
#app .banner .bannerArt::before { content:""; position:absolute; left:50%; top:-4px; bottom:-4px; width:10px; transform:translateX(-50%); background:#FF4F8B; }
#app .banner .bannerArt::after { content:""; position:absolute; left:-4px; right:-4px; top:22px; height:10px; background:#FF4F8B; }
#app .banner > b, #app .banner > span, #app .banner > small { padding-right:84px; }
#app .secHead { display:flex; align-items:baseline; justify-content:space-between; margin-top:var(--s1); }
#app .secHead b { font-family:var(--f-display); font-weight:600; font-size:var(--t-lg); }
#app .secHead span { color:var(--ink-3); font-size:var(--t-sm); font-variant-numeric:tabular-nums; }
#app .roomGrid { padding:0; overflow:visible; flex:none; }
#app .roomCard { height:auto; display:flex; flex-direction:column; background:var(--night-700); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; padding:0; text-align:left; color:var(--ink); }
#app .roomCard:hover { border-color:#4A3D8A; }
#app .roomCard .cover { position:relative; height:132px; }
#app .roomCard .coverIc { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.88); filter:drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
#app .roomCard .type, #app .roomCard .live, #app .roomCard .rank { position:absolute; top:8px; height:22px; display:flex; align-items:center; gap:4px; padding:0 8px; border-radius:var(--r-pill); font-family:var(--f-display); font-size:var(--t-xs); background:rgba(10,6,30,.45); backdrop-filter:blur(6px); color:#fff; }
#app .roomCard .type { left:8px; }
#app .roomCard .live { right:8px; font-variant-numeric:tabular-nums; }
#app .roomCard .rank { left:8px; top:auto; bottom:8px; font-weight:600; letter-spacing:.3px; }
#app .roomCard .rank.r1 { background:linear-gradient(90deg,#FFD571,var(--gold)); color:#3A2600; }
#app .roomCard .rank.r2 { background:linear-gradient(90deg,#EEF1FA,#B9C0D6); color:#2A2F45; }
#app .roomCard .rank.r3 { background:linear-gradient(90deg,#F2B48A,#C9784A); color:#3A1A08; }
#app .roomCard .stack { position:absolute; right:8px; bottom:8px; display:flex; }
#app .roomCard .stack .avatar { border:2px solid rgba(10,6,30,.6); margin-left:-8px; }
#app .roomCard .info { padding:var(--s2) var(--s3) var(--s3); display:flex; flex-direction:column; gap:3px; min-width:0; }
#app .roomCard .rTitle { font-family:var(--f-display); font-weight:500; font-size:var(--t-md); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .roomCard .rMeta { display:flex; justify-content:space-between; gap:var(--s2); font-size:var(--t-xs); color:var(--ink-3); }
#app .roomCard .rMeta span:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
#app .roomCard .gTot { color:var(--gold); display:flex; align-items:center; gap:2px; font-variant-numeric:tabular-nums; flex-shrink:0; }
#app .emptyMsg { position:static; display:flex; flex-direction:column; gap:4px; align-items:center; padding:var(--s6) var(--s4); border:1px dashed var(--line); border-radius:var(--r-lg); }
#app .emptyMsg b { font-family:var(--f-display); font-weight:500; color:var(--ink); }
#app .emptyMsg span { font-size:var(--t-sm); color:var(--ink-3); }
#app .emptyMsg.hidden { display:none !important; }
#app #bNav { position:absolute; left:0; right:0; bottom:0; z-index:5; }

/* ----- หน้าโปรไฟล์ ----- */
#app #vMe { background:var(--night-800) !important; }
#app .meScroll { flex:1; overflow-y:auto; padding:0 var(--s4) var(--s5); display:flex; flex-direction:column; gap:var(--s4); }
#app .meHero { margin:0 calc(-1 * var(--s4)); padding:var(--s6) var(--s4) var(--s5); display:flex; flex-direction:column; align-items:center; gap:var(--s2); text-align:center;
  background:radial-gradient(90% 80% at 50% 0%, #4A2CB0 0%, transparent 70%); }
#app .meName { font-family:var(--f-display); font-weight:600; font-size:var(--t-2xl); margin-top:var(--s2); }
#app .meIdRow { display:flex; align-items:center; gap:var(--s2); color:var(--ink-3); font-size:var(--t-sm); font-variant-numeric:tabular-nums; }
#app .copyBtn { border:1px solid var(--line); background:var(--night-700); color:var(--ink-2); border-radius:var(--r-pill); font-size:var(--t-xs); padding:2px 10px; font-family:var(--f-display); }
#app .meBadges { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:var(--s1); }
#app .badge { font-family:var(--f-display); font-size:var(--t-xs); font-weight:500; padding:2px 10px; border-radius:var(--r-pill); }
#app .badge.lv { background:rgba(62,224,181,.15); color:var(--mint); }
#app .badge.wealth { background:rgba(245,192,74,.15); color:var(--gold); }
#app .badge.test { background:var(--night-600); color:var(--ink-3); }
#app .wallet { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
#app .wCard { position:relative; overflow:hidden; border-radius:var(--r-lg); padding:var(--s4); display:flex; flex-direction:column; gap:2px; border:1px solid rgba(255,255,255,.08); }
#app .wCard.coins { background:radial-gradient(circle at 100% 0%, rgba(255,255,255,.18), transparent 50%), linear-gradient(150deg, #8A5A10, #3A2408); }
#app .wCard.dia { background:radial-gradient(circle at 100% 0%, rgba(255,255,255,.16), transparent 50%), linear-gradient(150deg, #126A5A, #0A2A30); }
#app .wCard small { font-family:var(--f-display); font-size:var(--t-xs); letter-spacing:.6px; color:rgba(255,255,255,.75); }
#app .wCard b { font-family:var(--f-display); font-weight:600; font-size:var(--t-xl); font-variant-numeric:tabular-nums; }
#app .wCard.coins b { color:#FFE3A0; } #app .wCard.dia b { color:#B8FFE9; }
#app .wCard span { font-size:var(--t-xs); color:rgba(255,255,255,.65); }
#app .wBtn { margin-top:var(--s2); align-self:flex-start; border:none; border-radius:var(--r-pill); padding:5px 14px; font-family:var(--f-display); font-size:var(--t-sm); font-weight:500; background:var(--gold); color:#3A2600; }
#app .wBtn.ghost { background:rgba(255,255,255,.12); color:#fff; }
#app .wChips { display:flex; align-items:center; gap:var(--s2); padding:var(--s3) var(--s4); border-radius:var(--r-md); background:var(--night-700); border:1px solid var(--line); flex-wrap:wrap; }
#app .wChips span:nth-child(2) { color:var(--ink-2); font-size:var(--t-sm); }
#app .wChips b { margin-left:auto; font-family:var(--f-display); font-variant-numeric:tabular-nums; }
#app .wChips small { width:100%; color:var(--ink-3); font-size:var(--t-xs); }
#app .menuList { display:flex; flex-direction:column; border-radius:var(--r-lg); background:var(--night-700); border:1px solid var(--line); overflow:hidden; }
#app .mRow { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); min-height:52px; padding:0 var(--s4); border:none; border-bottom:1px solid var(--line); background:none; color:var(--ink); font-size:var(--t-md); text-align:left; }
#app .mRow:last-child { border-bottom:none; }
#app .mRow em { font-style:normal; font-size:var(--t-xs); color:var(--ink-3); background:var(--night-600); border-radius:var(--r-pill); padding:2px 8px; flex-shrink:0; }
#app .mRow:hover { background:var(--night-600); }