/* =========================================================
   game.css — หน้าเล่นเกม Feel The Beat
   อ้างอิงอาร์ตบอร์ด 03 Game.ai (1081 x 2044)

   หน่วย --u = 1 พิกเซลของไฟล์ดีไซน์
   ทุกขนาดในไฟล์นี้จึงเขียนเป็น calc(var(--u) * <เลขจากดีไซน์>)
   เปิดไฟล์ดีไซน์เทียบได้ตรง ๆ และย่อขยายตามจอได้เองทั้งหมด
   ========================================================= */

@font-face{font-family:Prompt;src:url(/assets/fonts/prompt-regular.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Prompt;src:url(/assets/fonts/prompt-bold.woff2)format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Prompt;src:url(/assets/fonts/prompt-black.woff2)format('woff2');font-weight:900;font-display:swap}

:root{
  --navy:#000733;
  --navy-deep:#00061f;
  --gold:#e7c96a;
  --cyan:#3fe0ea;
  --violet:#8b5cf6;
  --ink:#eaf2ff;
  --muted:#93a7cf;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* คลาส .btn/.chip ตั้ง display ไว้ ซึ่งความจำเพาะเท่ากับ [hidden] ของเบราว์เซอร์
   ถ้าไม่บังคับตรงนี้ ปุ่มที่สั่ง el.hidden = true จะยังโผล่อยู่ */
[hidden]{display:none !important}
/* ล็อกทั้งหน้าไม่ให้เลื่อนได้เลย
   บนมือถือ ถ้าเอกสารยังเลื่อนหรือเด้งยืดได้ นิ้วที่ลากบนจอระหว่างเล่นจะทำให้หน้าเลื่อน
   แถบที่อยู่ของเบราว์เซอร์ยุบ/กางจนจอเปลี่ยนขนาด และ iOS จะพักการวาดเฟรมระหว่างเลื่อน
   ผลคือภาพค้างทั้งที่เพลงยังเดินอยู่ ผู้เล่นเห็นเป็น "เกมหยุด"
   position:fixed ที่ body คือวิธีที่ iOS Safari ยอมหยุดเลื่อนจริง (overflow:hidden อย่างเดียวไม่พอ) */
html,body{height:100%; overflow:hidden; overscroll-behavior:none}
body{position:fixed; inset:0}
/* กันแตะสองครั้งแล้วจอซูม
   iOS Safari เมิน maximum-scale/user-scalable=no ในแท็ก viewport มาตั้งแต่ iOS 10
   touch-action:manipulation คือทางเดียวที่ยังได้ผล — ตัดเฉพาะท่าดับเบิลแท็ปเพื่อซูม
   ส่วนการปัดและการหุบนิ้วยังทำได้ตามปกติ ไม่ล็อกจนผู้ใช้อึดอัด
   ใส่ที่ html เพราะเบราว์เซอร์ไล่หาค่าจาก element ที่โดนแตะขึ้นไปตามสายบรรพบุรุษ
   วางไว้ที่รากจึงครอบทั้งหน้า ทั้ง canvas ปุ่ม และจอโอเวอร์เลย์ */
html{touch-action:manipulation}
body{
  margin:0; background:#00030f; color:var(--ink);
  font-family:Prompt,'Segoe UI',system-ui,sans-serif;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; overscroll-behavior:none;
  /* แตะรัว ๆ ตอนเล่นทำให้ iOS ลากเลือกข้อความและเด้งเมนูคัดลอกขึ้นมาบังจอ */
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}

/* ---------- เวที: เต็มจอมือถือพอดี ----------
   ความกว้าง: เต็มจอ แต่ไม่เกินสัดส่วนอาร์ตบอร์ด (จอกว้างอย่างคอมพิวเตอร์จะเหลือขอบข้าง)
   ความสูง: เต็มจอเสมอ
   มือถือส่วนใหญ่สูงกว่าสัดส่วนดีไซน์ (1081:2044) ถ้าล็อกสัดส่วนไว้จะมีแถบดำบนล่าง
   เลยปล่อยให้เวทีสูงเต็มจอ แล้วให้ game.js แบ่งความสูงที่เกินมาไปไว้เหนือและใต้พื้นที่เล่น
   (--oy = ระยะที่เลื่อนพื้นที่เล่นลง, game.js เป็นคนตั้งค่าตอนจอเปลี่ยนขนาด)
   ภาพไม่ถูกยืดหรือตัดขอบ วงปุ่มจึงยังกลมและอยู่ในจอครบทั้ง 4 วง */
/* ตัวหาร 1840 (ไม่ใช่ 2044): ใต้แถวปุ่มในอาร์ตบอร์ดเป็นพื้นว่าง (ปุ่มจบที่ y 1760)
   จอเตี้ยอย่าง iPhone SE จึงตัดส่วนว่างล่างนี้ทิ้งได้โดยปุ่มยังอยู่ในจอครบ
   แลกกับการได้ความกว้างเต็มจอ แทนที่จะต้องย่อทั้งเวทีจนมีแถบข้าง */
#stageWrap{
  --w:min(100vw, calc(100dvh * 1081 / 1840));
  --u:calc(var(--w) / 1081);
  --oy:0px;
  position:relative; width:var(--w); height:100dvh;
  overflow:hidden; background:var(--navy);
  font-size:calc(var(--u) * 34);
  /* ไม่มีท่าทางนิ้วใดบนเวทีที่ควรไปเลื่อน/ซูมหน้า — แตะปุ่มยังเป็น click ได้ตามปกติ */
  touch-action:none;
}
@supports not (height:100dvh){ #stageWrap{ --w:min(100vw, calc(100vh * 1081 / 1840)); height:100vh; } }

#stage{position:absolute; inset:0; width:100%; height:100%; display:block}
.hidden{display:none !important}

/* =========================================================
   แถบบน — โลโก้ + รูปโปรไฟล์
   ========================================================= */
#topbar{
  position:absolute; left:0; right:0; top:calc(var(--u) * 84);
  display:flex; align-items:center; justify-content:space-between;
  /* ซ้ายลดจาก 85 เหลือ 46 เท่าฝั่งขวา เพื่อเปิดที่ให้ปุ่มย้อนกลับโดยโลโก้ไม่ถูกดันไปไกล */
  padding:0 calc(var(--u) * 46);
  /* ต้องสูงกว่า .overlay (10) ไม่งั้นแถบบนถูกจอเมนู/พัก/สรุปผลทับจนกดไม่ได้
     ทั้งปุ่มย้อนกลับและปุ่มโปรไฟล์ — เหมือน header ของแอปที่ลอยอยู่บนสุดเสมอ */
  z-index:12; pointer-events:none;
}
.tb-left{display:flex; align-items:center; gap:calc(var(--u) * 20)}
#brandLogo{width:calc(var(--u) * 515); height:auto; display:block}

/* ปุ่มย้อนกลับกลางเกม — วงกลมโปร่งให้อ่านฉากหลังได้ แต่ขอบเรืองพอให้เห็นบนพื้นมืด */
.game-back{
  flex:none; width:calc(var(--u) * 84); height:calc(var(--u) * 84);
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:#cfe4ff; text-decoration:none;
  background:rgba(13,28,68,.55);
  border:calc(var(--u) * 3) solid rgba(143,183,232,.4);
  pointer-events:auto; -webkit-tap-highlight-color:transparent;
}
.game-back:active{background:rgba(13,28,68,.92)}
.game-back svg{
  width:calc(var(--u) * 44); height:auto; fill:none; stroke:currentColor;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}

.profile{position:relative; display:flex; align-items:center; gap:calc(var(--u) * 14); pointer-events:auto}
#profileBtn{
  display:flex; align-items:center; gap:calc(var(--u) * 14);
  background:none; border:0; padding:0; cursor:pointer; color:inherit;
}
#profileAvatar{
  width:calc(var(--u) * 110); height:calc(var(--u) * 110); border-radius:50%;
  object-fit:cover; background:#0d1c44;
  border:calc(var(--u) * 5) solid transparent;
  background-image:linear-gradient(#0d1c44,#0d1c44),linear-gradient(140deg,var(--cyan),var(--violet));
  background-origin:border-box; background-clip:content-box,border-box;
}
#profileChevron{width:calc(var(--u) * 42); height:auto; color:#8fb7e8; transition:transform .18s}
#profileBtn[aria-expanded=true] #profileChevron{transform:rotate(180deg)}

#profileMenu{
  position:absolute; top:calc(100% + var(--u) * 16); right:0; min-width:calc(var(--u) * 420);
  background:rgba(4,12,44,.97); border:1px solid rgba(120,160,255,.25);
  border-radius:calc(var(--u) * 28); padding:calc(var(--u) * 14);
  box-shadow:0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(0,0,0,.6);
  backdrop-filter:blur(10px); z-index:20;
}
#profileMenu a,#profileMenu button{
  display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  color:var(--ink); text-decoration:none; font-family:inherit;
  font-size:calc(var(--u) * 34); padding:calc(var(--u) * 20) calc(var(--u) * 26);
  border-radius:calc(var(--u) * 18);
}
#profileMenu a:hover,#profileMenu button:hover{background:rgba(120,160,255,.14)}
#profileMenu .sep{height:1px; background:rgba(120,160,255,.2); margin:calc(var(--u) * 8) calc(var(--u) * 12)}
#profileMenu .danger{color:#ff8ba3}

/* =========================================================
   HUD — SCORE / COMBO / เวลา
   ========================================================= */
#hud{position:absolute; left:0; right:0; top:calc(var(--u) * 235); height:calc(var(--u) * 118); z-index:5; pointer-events:none}

#hudScoreWrap{
  position:absolute; left:calc(var(--u) * 62); top:50%; transform:translateY(-50%);
  font-weight:700; font-size:calc(var(--u) * 38); letter-spacing:.04em;
  color:#cfe4ff; text-shadow:0 0 calc(var(--u) * 18) rgba(80,160,255,.5);
  white-space:nowrap;
}
#hudScore{color:#fff}

/* กรอบคอมโบทรงตัดมุมพร้อมติ่งบน-ล่าง ตามดีไซน์
   ใช้ clip-path สองชั้น: ชั้นนอกเป็นเส้นขอบไล่สี ชั้นในเป็นพื้นเข้ม */
#comboFrame{
  --clip:polygon(0% 27%,4.6% 10.2%,34% 10.2%,37% 0%,63% 0%,66% 10.2%,95.4% 10.2%,100% 27%,
                 100% 73%,95.4% 89.8%,66% 89.8%,63% 100%,37% 100%,34% 89.8%,4.6% 89.8%,0% 73%);
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(var(--u) * 432); height:calc(var(--u) * 118);
  clip-path:var(--clip);
  background:linear-gradient(100deg,#7b4dff 0%,#4d7cff 45%,#39e3d0 100%);
  display:grid; place-items:center;
}
#comboFrame::before{
  content:''; position:absolute; inset:calc(var(--u) * 4);
  clip-path:var(--clip); background:#040f38;
}
#comboText{
  position:relative; font-weight:900; font-size:calc(var(--u) * 52); letter-spacing:.02em;
  color:#fff; text-shadow:0 0 calc(var(--u) * 22) rgba(120,200,255,.75); white-space:nowrap;
}
#hudCombo{display:inline-block; min-width:calc(var(--u) * 40)}
#hudCombo.bump{animation:bump .22s ease-out}
@keyframes bump{0%{transform:scale(1.5)}100%{transform:scale(1)}}

#hudTimer{
  position:absolute; right:calc(var(--u) * 71); top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:calc(var(--u) * 16);
  font-weight:700; font-size:calc(var(--u) * 40); color:#fff; white-space:nowrap;
}
#hudTimer svg{width:calc(var(--u) * 52); height:calc(var(--u) * 52); display:block}

/* =========================================================
   ป้ายคำตัดสิน / ป้ายคอมโบ
   ========================================================= */
#judge,#comboBanner{
  position:absolute; left:50%; z-index:4; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.6);
}
#judge{top:calc(var(--oy) + var(--u) * 1000); width:calc(var(--u) * 620)}
#comboBanner{top:calc(var(--oy) + var(--u) * 1000); width:calc(var(--u) * 930)}
#judge.show{animation:judgePop .62s cubic-bezier(.16,1.2,.3,1) forwards}
#comboBanner.show{animation:comboPop 1.5s cubic-bezier(.16,1.2,.3,1) forwards}
@keyframes judgePop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-5deg)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(1deg)}
  40%{transform:translate(-50%,-50%) scale(1) rotate(0)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-58%) scale(1)}
}
@keyframes comboPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  22%{transform:translate(-50%,-50%) scale(1)}
  78%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-56%) scale(1.02)}
}

/* =========================================================
   พื้นที่แตะของ 4 ปุ่ม — ใสสนิท วางทับวงที่ canvas วาดพอดี
   ตำแหน่งคำนวณจากเรขาคณิตเดียวกับใน game.js จึงตรงกันเสมอ
   ========================================================= */
#lanePad{position:absolute; inset:0; z-index:3}
/* ตำแหน่งบนแกนตั้งเป็นพิกเซลดีไซน์ + --oy ไม่ใช่ % ของความสูงเวที
   เพราะความสูงเวทีเปลี่ยนตามจอแล้ว แต่วงที่ canvas วาดยังอยู่ที่ y 1650 ของดีไซน์ (ขอบบน 1539)
   ถ้าใช้ % ปุ่มแตะจะเลื่อนหลุดจากวงที่เห็นบนจอสูง */
#lanePad .lane{
  position:absolute; top:calc(var(--oy) + var(--u) * 1539.4); width:20.46%; aspect-ratio:1;
  border-radius:50%; touch-action:none; cursor:pointer;
}
#lanePad .lane:nth-child(1){left:5.44%}
#lanePad .lane:nth-child(2){left:28.33%}
#lanePad .lane:nth-child(3){left:51.21%}
#lanePad .lane:nth-child(4){left:74.09%}

/* =========================================================
   โอเวอร์เลย์ (นับถอยหลัง / พัก / สรุปผล / ประตูกั้น / เมนู)
   ========================================================= */
.overlay{
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(var(--u) * 28); padding:calc(var(--u) * 60);
  background:radial-gradient(120% 80% at 50% 45%,rgba(6,14,52,.82),rgba(0,3,18,.96));
  backdrop-filter:blur(calc(var(--u) * 8));
  text-align:center;
}
#countdown{background:none; backdrop-filter:none; pointer-events:none}
#countNum{
  font-weight:900; font-size:calc(var(--u) * 280); line-height:1; color:#fff;
  text-shadow:0 0 calc(var(--u) * 60) rgba(90,200,255,.9), 0 0 calc(var(--u) * 140) rgba(140,80,255,.6);
  animation:countPulse .9s ease-out infinite;
}
@keyframes countPulse{0%{transform:scale(.86);opacity:.65}45%{transform:scale(1);opacity:1}100%{transform:scale(1.06);opacity:.85}}
#countHint{font-size:calc(var(--u) * 34); color:var(--muted)}

h2.big{font-weight:900; font-size:calc(var(--u) * 62); margin:0; color:#fff}
.note{font-size:calc(var(--u) * 32); color:var(--muted); margin:0; line-height:1.5; max-width:calc(var(--u) * 820)}
.row{display:flex; flex-wrap:wrap; gap:calc(var(--u) * 20); justify-content:center}

.btn{
  font-family:inherit; font-weight:700; font-size:calc(var(--u) * 38); cursor:pointer;
  padding:calc(var(--u) * 26) calc(var(--u) * 54); border-radius:calc(var(--u) * 999);
  border:1px solid transparent; text-decoration:none; display:inline-block;
  transition:filter .15s, transform .1s;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55; cursor:default}
.btn-primary{
  background:linear-gradient(100deg,#f7e4a3,#d8b45c);
  color:#0a1330; box-shadow:0 calc(var(--u) * 14) calc(var(--u) * 40) rgba(231,201,106,.3);
}
.btn-ghost{background:rgba(120,160,255,.1); border-color:rgba(140,180,255,.38); color:var(--ink)}
.btn:hover:not(:disabled){filter:brightness(1.08)}

/* ---------- การ์ดสรุปผล ---------- */
.card{
  width:min(calc(var(--u) * 900), 100%);
  background:linear-gradient(180deg,rgba(10,22,66,.96),rgba(4,10,38,.96));
  border:1px solid rgba(130,170,255,.28); border-radius:calc(var(--u) * 44);
  padding:calc(var(--u) * 48); text-align:left;
  box-shadow:0 calc(var(--u) * 40) calc(var(--u) * 110) rgba(0,0,0,.62);
  max-height:100%; overflow-y:auto;
  /* เวทีปิดท่าทางนิ้วทั้งหมด (touch-action:none) การ์ดที่ยาวเกินจอจึงต้องเปิดการเลื่อนแนวตั้งคืนเอง
     contain = เลื่อนสุดแล้วไม่ส่งแรงต่อไปยืดหน้าทั้งหน้า */
  touch-action:pan-y; overscroll-behavior:contain;
}
.res-head{display:flex; align-items:center; justify-content:space-between; gap:calc(var(--u) * 24)}
.res-kicker{font-size:calc(var(--u) * 28); letter-spacing:.16em; color:var(--gold); text-transform:uppercase}
.res-title{font-weight:900; font-size:calc(var(--u) * 52); margin:calc(var(--u) * 4) 0 0}
#resGrade{
  font-weight:900; font-size:calc(var(--u) * 96); line-height:1;
  width:calc(var(--u) * 150); height:calc(var(--u) * 150); flex:none;
  display:grid; place-items:center; border-radius:calc(var(--u) * 36);
  background:linear-gradient(150deg,rgba(63,224,234,.24),rgba(139,92,246,.24));
  border:1px solid rgba(140,200,255,.4); color:#fff;
}
#resGrade[data-grade=S]{background:linear-gradient(150deg,rgba(247,228,163,.34),rgba(216,180,92,.34)); border-color:var(--gold); color:var(--gold)}
#resGrade[data-grade=F]{background:rgba(255,90,120,.16); border-color:rgba(255,120,150,.5); color:#ff8ba3}

#resScore{
  font-weight:900; font-size:calc(var(--u) * 110); line-height:1.1; color:#fff;
  margin:calc(var(--u) * 26) 0 calc(var(--u) * 6);
  text-shadow:0 0 calc(var(--u) * 40) rgba(90,190,255,.45);
}
.res-sub{font-size:calc(var(--u) * 30); color:var(--muted); margin:0}
#resFullCombo{
  display:inline-block; margin-top:calc(var(--u) * 16);
  font-weight:700; font-size:calc(var(--u) * 30); color:#0a1330;
  padding:calc(var(--u) * 10) calc(var(--u) * 26); border-radius:calc(var(--u) * 999);
  background:linear-gradient(100deg,#f7e4a3,#d8b45c);
}
.res-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:calc(var(--u) * 14);
  margin:calc(var(--u) * 32) 0;
}
.res-grid div{
  display:flex; justify-content:space-between; align-items:center; gap:calc(var(--u) * 12);
  background:rgba(120,160,255,.08); border-radius:calc(var(--u) * 18);
  padding:calc(var(--u) * 18) calc(var(--u) * 24); font-size:calc(var(--u) * 30);
}
.res-grid span{color:var(--muted)}
.res-grid b{font-size:calc(var(--u) * 34); color:#fff}
.res-grid .dot{width:calc(var(--u) * 18); height:calc(var(--u) * 18); border-radius:50%; flex:none; margin-right:calc(var(--u) * 10)}
.res-grid .k{display:flex; align-items:center; color:var(--muted)}

.submit-box{
  background:rgba(63,224,234,.08); border:1px solid rgba(63,224,234,.26);
  border-radius:calc(var(--u) * 24); padding:calc(var(--u) * 24); margin-bottom:calc(var(--u) * 24);
  font-size:calc(var(--u) * 30);
}
.submit-box.err{background:rgba(255,90,120,.1); border-color:rgba(255,120,150,.4)}
#submitState{font-weight:700; color:#fff}
#submitDetail{color:var(--muted); margin-top:calc(var(--u) * 8); line-height:1.5}

.res-board-title{font-size:calc(var(--u) * 30); color:var(--gold); margin-bottom:calc(var(--u) * 14)}
.res-row{
  display:grid; grid-template-columns:calc(var(--u) * 90) 1fr auto; align-items:center;
  gap:calc(var(--u) * 14); padding:calc(var(--u) * 16) calc(var(--u) * 20);
  border-radius:calc(var(--u) * 18); font-size:calc(var(--u) * 30);
}
.res-row+.res-row{margin-top:calc(var(--u) * 8)}
.res-row.me{background:rgba(231,201,106,.14); border:1px solid rgba(231,201,106,.34)}
.res-rank{font-weight:900; font-size:calc(var(--u) * 36)}
.res-rank.sm{font-size:calc(var(--u) * 22); font-weight:400; line-height:1.15; color:var(--muted)}
.res-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.res-pts{font-weight:700; color:#fff}
.res-board-loading{color:var(--muted); font-size:calc(var(--u) * 28); padding:calc(var(--u) * 16) 0}

/* ---------- ประตูกั้น / ข้อความ ---------- */
.gate-kicker{font-size:calc(var(--u) * 26); letter-spacing:.18em; color:var(--gold); text-transform:uppercase}
.gate-body{font-size:calc(var(--u) * 32); color:var(--muted); line-height:1.6; max-width:calc(var(--u) * 860)}
.gate-body a{color:var(--cyan)}
.gate-body p{margin:calc(var(--u) * 14) 0}
.gate-timer{
  font-weight:900; font-size:calc(var(--u) * 76); color:#fff; margin:calc(var(--u) * 16) 0;
  font-variant-numeric:tabular-nums;
}
.checkline{
  display:flex; gap:calc(var(--u) * 16); align-items:flex-start; text-align:left;
  font-size:calc(var(--u) * 30); line-height:1.5; margin:calc(var(--u) * 16) 0; cursor:pointer;
}
.checkline input{width:calc(var(--u) * 38); height:calc(var(--u) * 38); flex:none; accent-color:var(--cyan)}

.msg{display:none; font-size:calc(var(--u) * 30); line-height:1.5; margin-top:calc(var(--u) * 16)}
.msg.show{display:block}
.msg.err{color:#ff8ba3}
.msg.info{color:var(--cyan)}

/* ---------- เมนูก่อนเริ่ม ---------- */
#menuLogo{font-weight:900; font-size:calc(var(--u) * 66); margin:0; letter-spacing:.02em}
#menuLogo span{color:var(--gold)}
.menu-kicker{font-size:calc(var(--u) * 28); letter-spacing:.2em; color:var(--gold); text-transform:uppercase}
.keys{display:flex; gap:calc(var(--u) * 16); justify-content:center; margin:calc(var(--u) * 8) 0}
.key{
  width:calc(var(--u) * 84); height:calc(var(--u) * 84); border-radius:50%; display:grid; place-items:center;
  font-weight:900; font-size:calc(var(--u) * 34); color:#04102e;
}
.tips{list-style:none; padding:0; margin:0; font-size:calc(var(--u) * 30); color:var(--muted); line-height:1.7}
.tips b{color:var(--ink)}

.chips{display:flex; flex-wrap:wrap; gap:calc(var(--u) * 14); justify-content:center}
.chip{
  background:rgba(120,160,255,.1); border:1px solid rgba(140,180,255,.24);
  border-radius:calc(var(--u) * 22); padding:calc(var(--u) * 16) calc(var(--u) * 26); min-width:calc(var(--u) * 190);
}
.chip .n{font-weight:900; font-size:calc(var(--u) * 40); color:#fff}
.chip .l{font-size:calc(var(--u) * 24); color:var(--muted); margin-top:calc(var(--u) * 4)}
.chip.alert{border-color:rgba(255,140,170,.5)}

/* ---------- แถบเสียง ---------- */
#volBar{
  position:absolute; right:calc(var(--u) * 46); top:calc(var(--u) * 380); z-index:8;
  display:flex; align-items:center; gap:calc(var(--u) * 12);
  background:rgba(4,12,44,.7); border:1px solid rgba(120,160,255,.22);
  border-radius:calc(var(--u) * 999); padding:calc(var(--u) * 10) calc(var(--u) * 18);
}
#volMute{background:none; border:0; cursor:pointer; font-size:calc(var(--u) * 32); line-height:1; padding:0}
#volRange{width:calc(var(--u) * 170); accent-color:var(--cyan)}
#volPct{font-size:calc(var(--u) * 24); color:var(--muted); min-width:calc(var(--u) * 46); text-align:right}