/* =========================================================
   rv2.css — ระบบดีไซน์ตามอาร์ตบอร์ด RV2 (1081 x 2044)
   ใช้กับทุกหน้าฝั่งผู้ใช้ ยกเว้นหน้าเล่นเกมที่มี game.css ของตัวเอง

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

   ต่างจาก game.css ตรงที่หน้าพวกนี้ "ยาวได้" — รายการอันดับหรือประวัติ
   จะยาวเกินจอ จึงล็อกแค่ความกว้าง ส่วนความสูงปล่อยไหลและเลื่อนได้ตามปกติ
   ========================================================= */

@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{
  /* กว้างสุด 560px กันไม่ให้ตัวหนังสือใหญ่เกินบนแท็บเล็ต/เดสก์ท็อป */
  --stage:min(100vw, 560px);
  --u:calc(var(--stage) / 1081);

  --navy:#050d33;
  --navy-2:#0a1650;
  --ink:#eaf2ff;
  --muted:#9fb3dd;

  --gold:#e8c766;
  --gold-lt:#f7e6a8;
  --cyan:#3fe0ea;
  --blue:#3a7bff;
  --violet:#8b5cf6;
  --green:#35d6a0;
  --danger:#ff6b6b;
  --warn:#ffb547;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* .card/.btn ตั้ง display เอง ความจำเพาะเท่ากับ [hidden] ของเบราว์เซอร์
   ถ้าไม่บังคับตรงนี้ อะไรที่สั่ง hidden=true จะยังโผล่ */
[hidden]{display:none !important}

html{
  /* iOS เมิน user-scalable=no มาตั้งแต่ iOS 10 นี่คือทางเดียวที่ยังกันดับเบิลแท็ปซูมได้ */
  touch-action:manipulation;
  background:var(--navy);
}
body{
  margin:0; min-height:100dvh;
  font-family:Prompt,'Segoe UI',system-ui,sans-serif;
  font-size:calc(var(--u) * 30);
  color:var(--ink);
  background:var(--navy);
}
@supports not (min-height:100dvh){ body{min-height:100vh} }

/* พื้นหลังตรึงไว้กับจอ ไม่เลื่อนตามเนื้อหา ภาพจึงไม่ยืดเวลาหน้ายาว */
.rv-bg{
  position:fixed; inset:0; z-index:-1;
  background:var(--navy) url(/assets/rv2/bg-main.webp) center/cover no-repeat;
}
.rv-bg.coming{background-image:url(/assets/rv2/bg-coming.webp)}

.rv-wrap{
  width:var(--stage); margin:0 auto;
  padding:0 calc(var(--u) * 46) calc(var(--u) * 40);
  min-height:100dvh; display:flex; flex-direction:column;
}

/* ---------- แถบบน: โลโก้ + โปรไฟล์ ---------- */
.rv-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:calc(var(--u) * 16);
  padding:calc(var(--u) * 60) 0 calc(var(--u) * 24);
}
.rv-logo{width:calc(var(--u) * 560); height:auto; display:block}
.rv-top.center{justify-content:center}

.rv-av{position:relative; flex:none}
.rv-av-btn{
  display:flex; align-items:center; gap:calc(var(--u) * 12);
  background:none; border:0; padding:0; cursor:pointer; color:inherit;
}
.rv-av-img{
  width:calc(var(--u) * 108); height:calc(var(--u) * 108); border-radius:50%;
  object-fit:cover; background:#0d1c44; display:block;
  border:calc(var(--u) * 5) solid transparent;
  background-image:linear-gradient(#0d1c44,#0d1c44),linear-gradient(140deg,var(--cyan),var(--blue));
  background-origin:border-box; background-clip:content-box,border-box;
}
/* ตัวย่อชื่อ ใช้เมื่อผู้ใช้ยังไม่มีรูป */
.rv-av-ini{
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:calc(var(--u) * 40); color:#bcd4ff;
}
.rv-av-cv{width:calc(var(--u) * 40); height:auto; color:#8fb7e8; transition:transform .18s}
.rv-av-btn[aria-expanded=true] .rv-av-cv{transform:rotate(180deg)}

.rv-menu{
  position:absolute; right:0; top:calc(100% + var(--u) * 14); z-index:30;
  min-width:calc(var(--u) * 430);
  background:rgba(4,12,44,.97); border:1px solid rgba(120,160,255,.28);
  border-radius:calc(var(--u) * 26); padding:calc(var(--u) * 12);
  box-shadow:0 calc(var(--u) * 28) calc(var(--u) * 64) rgba(0,0,0,.6);
}
.rv-menu a,.rv-menu button{
  display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  color:var(--ink); text-decoration:none; font:inherit;
  padding:calc(var(--u) * 20) calc(var(--u) * 24); border-radius:calc(var(--u) * 18);
}
.rv-menu a:hover,.rv-menu button:hover{background:rgba(90,140,255,.16)}
.rv-menu a.active{background:rgba(90,140,255,.22); font-weight:700}
.rv-menu .sep{height:1px; background:rgba(120,160,255,.22); margin:calc(var(--u) * 8) calc(var(--u) * 14)}
.rv-menu .danger{color:#ff8f8f}

/* ---------- ปุ่มกลับหน้าหลัก (แคปซูลมุมซ้ายบนของการ์ด) ---------- */
.rv-home{
  display:inline-flex; align-items:center; gap:calc(var(--u) * 14);
  padding:calc(var(--u) * 14) calc(var(--u) * 34) calc(var(--u) * 14) calc(var(--u) * 20);
  border-radius:999px; text-decoration:none; color:var(--ink);
  font-size:calc(var(--u) * 34); font-weight:500;
  border:calc(var(--u) * 3) solid rgba(90,220,220,.55);
  background:rgba(8,22,64,.6);
  box-shadow:0 0 calc(var(--u) * 26) rgba(63,224,234,.35);
}
.rv-home svg{width:calc(var(--u) * 44); height:auto; fill:none; stroke:var(--cyan); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.rv-home:active{background:rgba(20,48,120,.8)}

/* ---------- หัวเรื่องภาพ ---------- */
.rv-headline{display:block; width:calc(var(--u) * 760); height:auto; margin:0 auto}
.rv-hero{display:block; width:calc(var(--u) * 1081); height:auto; margin:0 calc(var(--u) * -46)}

/* ---------- สไลด์หน้าล็อกอิน (ดีไซน์ 1-Home1 ถึง 1-Home4) ----------
   ใช้ scroll-snap ของเบราว์เซอร์เอง ปัดนิ้วบนมือถือได้ทันทีโดยไม่ต้องมีไลบรารี
   และไม่ต้องเขียนตัวจับท่าปัดเองซึ่งมักตีกับการเลื่อนหน้าขึ้นลง */
.rv-slides{align-self:stretch; margin:0 calc(var(--u) * -46)}
.rv-track{
  display:flex; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.rv-track::-webkit-scrollbar{display:none}
.rv-track:focus-visible{outline:2px solid var(--cyan); outline-offset:-2px}
.rv-slide{flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always}
.rv-slide img{
  display:block; width:100%; height:auto; aspect-ratio:1081 / 980;
  /* ภาพตัดมาจากอาร์ตเวิร์กทั้งหน้า พื้นหลังในภาพจึงไม่ต่อกับพื้นหลังของหน้าเป๊ะ
     จางขอบบนล่างนิดเดียวให้กลืนกัน ไม่งั้นจะเห็นรอยต่อเป็นเส้น */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 2%,#000 98.5%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 2%,#000 98.5%,transparent 100%);
}
.rv-dots{display:flex; justify-content:center; margin:0 0 calc(var(--u) * 26)}
/* ปุ่มกว้างกว่าจุดที่มองเห็น เพื่อให้นิ้วแตะโดนง่าย */
.rv-dots button{
  background:none; border:0; cursor:pointer;
  padding:calc(var(--u) * 16) calc(var(--u) * 10);
}
.rv-dots button::after{
  content:''; display:block; height:calc(var(--u) * 20); width:calc(var(--u) * 20);
  border-radius:999px; background:rgba(200,220,255,.35);
  transition:width .25s, background-color .25s;
}
.rv-dots button[aria-current=true]::after{width:calc(var(--u) * 58); background:var(--gold)}
@media (prefers-reduced-motion: reduce){ .rv-dots button::after{transition:none} }

/* ---------- การ์ดกรอบนีออน ---------- */
.rv-card{
  border-radius:calc(var(--u) * 42);
  border:calc(var(--u) * 3) solid rgba(70,130,255,.55);
  background:rgba(4,10,36,.62);
  box-shadow:0 0 calc(var(--u) * 40) rgba(58,123,255,.28), inset 0 0 calc(var(--u) * 60) rgba(10,30,90,.5);
  padding:calc(var(--u) * 34);
}
.rv-card.tight{padding:calc(var(--u) * 24)}

/* ---------- ปุ่ม ---------- */
.rv-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:calc(var(--u) * 118);
  border:0; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:calc(var(--u) * 42); font-weight:700;
  color:#04102e; text-decoration:none; text-align:center;
  padding:calc(var(--u) * 18) calc(var(--u) * 30);
  background:linear-gradient(100deg,var(--green) 0%,#3fb9ff 55%,var(--blue) 100%);
  box-shadow:0 calc(var(--u) * 10) calc(var(--u) * 40) rgba(53,214,160,.32);
}
.rv-btn:active{filter:brightness(.92)}
.rv-btn:disabled{filter:grayscale(.6) brightness(.7); cursor:not-allowed}
.rv-btn.gold{
  background:linear-gradient(100deg,#f0b73f,#ffd97a 45%,#e2a231);
  box-shadow:0 calc(var(--u) * 10) calc(var(--u) * 36) rgba(240,183,63,.34);
}
.rv-btn.ghost{
  background:none; color:var(--ink);
  border:calc(var(--u) * 3) solid rgba(120,160,255,.5); box-shadow:none;
}

/* ปุ่มเมนูกรอบนีออน (อัปโหลดใบเสร็จ / เล่นเกม / leaderboard) */
.rv-nav-btn{
  display:flex; align-items:center; gap:calc(var(--u) * 30);
  width:100%; min-height:calc(var(--u) * 150);
  padding:calc(var(--u) * 20) calc(var(--u) * 40);
  border-radius:calc(var(--u) * 40); text-decoration:none; color:var(--ink);
  background:rgba(6,14,48,.55);
  border:calc(var(--u) * 3) solid var(--nb, var(--cyan));
  box-shadow:0 0 calc(var(--u) * 30) rgba(63,224,234,.3), inset 0 0 calc(var(--u) * 40) rgba(8,24,80,.6);
}
.rv-nav-btn:active{background:rgba(16,38,104,.8)}
.rv-nav-btn .ico{width:calc(var(--u) * 84); height:calc(var(--u) * 84); flex:none; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.rv-nav-btn .lb{flex:1; text-align:center}
.rv-nav-btn .lb b{display:block; font-size:calc(var(--u) * 50); font-weight:700; line-height:1.15}
.rv-nav-btn .lb span{display:block; font-size:calc(var(--u) * 28); color:var(--muted)}
.rv-nav-btn.violet{--nb:rgba(139,92,246,.75); box-shadow:0 0 calc(var(--u) * 30) rgba(139,92,246,.35), inset 0 0 calc(var(--u) * 40) rgba(8,24,80,.6)}
.rv-nav-btn.green{--nb:rgba(53,214,160,.75); box-shadow:0 0 calc(var(--u) * 30) rgba(53,214,160,.32), inset 0 0 calc(var(--u) * 40) rgba(8,24,80,.6)}

/* ปุ่มล็อกอินโซเชียล — ใช้กรอบนีออนจากไฟล์ดีไซน์ แล้ววางข้อความทับ
   วาดเป็น CSS ไม่ได้เพราะไอคอนแบรนด์ฝังมากับกรอบในไฟล์เดียวกัน */
.rv-login{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:714 / 161; text-decoration:none; color:#fff;
  background:center/100% 100% no-repeat;
  font-size:calc(var(--u) * 42); font-weight:500;
  padding-left:calc(var(--u) * 60);      /* เว้นที่ให้ไอคอนที่อยู่ในภาพพื้นหลัง */
}
.rv-login:active{filter:brightness(1.25)}
.rv-login.google{background-image:url(/assets/rv2/btn-google.webp)}
.rv-login.facebook{background-image:url(/assets/rv2/btn-facebook.webp)}
.rv-login.line{background-image:url(/assets/rv2/btn-line.webp)}

/* ---------- ฟอร์ม ---------- */
.rv-field{display:block; margin-bottom:calc(var(--u) * 34)}
.rv-field > .lb{
  display:block; font-size:calc(var(--u) * 34); font-weight:700;
  margin:0 0 calc(var(--u) * 12) calc(var(--u) * 10);
}
.rv-input{
  display:flex; align-items:center; gap:calc(var(--u) * 22);
  padding:calc(var(--u) * 6) calc(var(--u) * 34);
  border-radius:999px;
  border:calc(var(--u) * 3) solid rgba(74,132,255,.75);
  background:rgba(6,14,48,.5);
  box-shadow:0 0 calc(var(--u) * 26) rgba(58,123,255,.35), inset 0 0 calc(var(--u) * 30) rgba(4,12,44,.7);
}
.rv-input.area{border-radius:calc(var(--u) * 46); align-items:flex-start; padding-top:calc(var(--u) * 24); padding-bottom:calc(var(--u) * 24)}
.rv-input:focus-within{border-color:var(--cyan); box-shadow:0 0 calc(var(--u) * 34) rgba(63,224,234,.5)}
.rv-input svg{width:calc(var(--u) * 46); height:auto; flex:none; fill:none; stroke:#9db6ec; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rv-input input,.rv-input textarea,.rv-input select{
  flex:1; width:100%; min-width:0; background:none; border:0; outline:none;
  color:var(--ink); font:inherit; font-size:calc(var(--u) * 38);
  padding:calc(var(--u) * 22) 0; resize:none;
}
.rv-input textarea{padding:0; line-height:1.45}
.rv-input input::placeholder,.rv-input textarea::placeholder{color:#7d92c4}
/* ปฏิทินของ input[type=date] เป็นสีเข้มโดยปริยาย มองไม่เห็นบนพื้นมืด */
.rv-input input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.6)}

.rv-check{
  display:flex; gap:calc(var(--u) * 20); align-items:flex-start;
  font-size:calc(var(--u) * 28); color:var(--muted); margin:calc(var(--u) * 24) 0;
}
.rv-check input{width:calc(var(--u) * 44); height:calc(var(--u) * 44); flex:none; accent-color:var(--cyan)}
.rv-check a{color:var(--cyan)}

/* ---------- ข้อความแจ้งเตือน ---------- */
.rv-msg{
  display:none; padding:calc(var(--u) * 24) calc(var(--u) * 30);
  border-radius:calc(var(--u) * 26); margin:calc(var(--u) * 20) 0;
  font-size:calc(var(--u) * 30); border:1px solid transparent;
}
.rv-msg.show{display:block}
.rv-msg.ok{background:rgba(53,214,160,.14); border-color:rgba(53,214,160,.5); color:#8ff0cd}
.rv-msg.err{background:rgba(255,107,107,.14); border-color:rgba(255,107,107,.5); color:#ffb3b3}
.rv-msg.info{background:rgba(63,224,234,.12); border-color:rgba(63,224,234,.45); color:#a8ecf2}

/* ---------- ป้ายสถานะ ---------- */
.rv-tag{
  display:inline-block; padding:calc(var(--u) * 8) calc(var(--u) * 26);
  border-radius:999px; font-size:calc(var(--u) * 26); font-weight:500;
  border:calc(var(--u) * 2) solid currentColor;
}
.rv-tag.ok{color:var(--green)}
.rv-tag.wait{color:var(--warn)}
.rv-tag.no{color:var(--danger)}

/* ---------- แถบวันที่ท้ายหน้า ----------
   ทุกหน้าในอาร์ตเวิร์กวางข้อความนี้บนแถบม่วงโปร่ง เต็มความกว้างแล้วจางที่ขอบซ้ายขวา
   margin-top เป็น auto เพื่อดันแถบลงล่างสุดของหน้าสั้น ๆ ระยะห่างจากเนื้อหาด้านบน
   จึงใช้ border ใสแทน แล้วตัดพื้นหลังไม่ให้ลามเข้าไปในส่วน border */
.rv-dates{
  margin:auto calc(var(--u) * -46) calc(var(--u) * 50);
  border-top:calc(var(--u) * 60) solid transparent;
  padding:calc(var(--u) * 34) calc(var(--u) * 46);
  background:linear-gradient(90deg,
    rgba(80,46,190,0) 0%, rgba(92,56,204,.62) 14%, rgba(104,62,214,.72) 50%,
    rgba(92,56,204,.62) 86%, rgba(80,46,190,0) 100%) padding-box;
  text-align:center; font-size:calc(var(--u) * 34); font-weight:700;
  color:#eef3ff; line-height:1.75; text-shadow:0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(0,0,0,.55);
}
.rv-dates:empty{background:none; padding:0}

/* ---------- หน้าล็อกอิน: วางตามพิกัดอาร์ตบอร์ด 1-Home ----------
   หน้านี้เป็นภาพประกอบจบในหน้าจอเดียว (ไม่ใช่รายการยาว) จึงวางพื้นหลังตรึงกับเนื้อหา
   ที่ความกว้างเท่าอาร์ตบอร์ดพอดี แทนการ cover กับจอ
   ผลคือพื้นหลังในภาพสไลด์ (ตัดมาจากช่วง y 220-1200 ของอาร์ตเวิร์ก) ต่อกับพื้นหลังของหน้าสนิท
   ตัวเลขทุกตัวในบล็อกนี้วัดจากไฟล์ 1-Home1.png */
/* จอมือถือส่วนใหญ่สูงกว่าสัดส่วนอาร์ตบอร์ด ถ้าใช้ภาพเดียวพื้นหลังจะหมดกลางจอ
   จึงแยกเป็นท่อนบน (ติดขอบบน ให้ต่อกับสไลด์) กับท่อนฝูงชน (ติดขอบล่าง ใต้แถบวันที่)
   ช่วงรอยตัด y 1150-1380 ในไฟล์ต้นฉบับเป็นสี #000635 ล้วน ส่วนที่ยืดจึงเติมสีนี้แล้วไม่เห็นรอย */
.pg-login .rv-wrap,.pg-home .rv-wrap{
  background:
    url(/assets/rv2/bg-login-bottom.webp) bottom center / 100% auto no-repeat,
    url(/assets/rv2/bg-login-top.webp) top center / 100% auto no-repeat,
    #000635;
}
.pg-login .rv-bg,.pg-home .rv-bg{display:none}

/* หน้าหลักหลังล็อกอินใช้พื้นหลังและสไลด์ชุดเดียวกับหน้าล็อกอิน
   สไลด์ตัดมาจากช่วง y 220 ของอาร์ตเวิร์ก แถบบน (โลโก้ + รูปโปรไฟล์) จึงต้องสูง 220 พอดี */
.pg-home .rv-top{height:calc(var(--u) * 220); padding:calc(var(--u) * 20) 0 0}
.pg-home .rv-dots{margin-bottom:calc(var(--u) * 20)}
.pg-login .rv-top{padding:calc(var(--u) * 72) 0 calc(var(--u) * 50)}   /* 72 + โลโก้ 98 + 50 = สไลด์เริ่มที่ y 220 */
.pg-login .rv-logo{width:calc(var(--u) * 629)}
.pg-login .rv-dots{margin-bottom:calc(var(--u) * 4)}
.pg-login #social{align-items:center; gap:calc(var(--u) * 5)}
/* ภาพกรอบปุ่มกว้าง 714 px ในอาร์ตบอร์ด (รวมแสงเรือง) ใช้ขนาดเดิมเป๊ะ */
.pg-login .rv-login{width:calc(var(--u) * 714); padding-left:calc(var(--u) * 70); font-size:calc(var(--u) * 38)}
.pg-login .rv-legal{font-size:calc(var(--u) * 30); color:#dbe6ff}
.pg-login .rv-legal a{color:#dbe6ff; text-decoration:none}
.rv-legal{
  text-align:center; font-size:calc(var(--u) * 28); color:var(--muted);
  margin:calc(var(--u) * 28) 0 0;
}
.rv-legal a{color:var(--muted)}

.rv-title{
  text-align:center; font-size:calc(var(--u) * 54); font-weight:700;
  margin:calc(var(--u) * 20) 0 calc(var(--u) * 34);
}
.rv-sub{text-align:center; color:var(--muted); font-size:calc(var(--u) * 30); margin:0 0 calc(var(--u) * 30)}
.stack{display:flex; flex-direction:column; gap:calc(var(--u) * 30)}
.stack.sm{gap:calc(var(--u) * 20)}

/* ---------- แผ่นซ้อน (popup) ---------- */
.rv-sheet{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:calc(var(--u) * 60); background:rgba(2,6,24,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.rv-sheet-box{
  position:relative; width:100%; max-width:calc(var(--u) * 900);
  border-radius:calc(var(--u) * 46);
  border:calc(var(--u) * 3) solid rgba(90,200,230,.7);
  background:linear-gradient(180deg,rgba(6,16,54,.98),rgba(3,8,32,.98));
  box-shadow:0 0 calc(var(--u) * 60) rgba(63,224,234,.35);
  padding:calc(var(--u) * 56) calc(var(--u) * 40);
  text-align:center;
}
.rv-sheet-x{
  position:absolute; right:calc(var(--u) * -18); top:calc(var(--u) * -30);
  width:calc(var(--u) * 92); height:calc(var(--u) * 92); border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(10,22,64,.95); border:calc(var(--u) * 3) solid rgba(160,190,240,.8);
  color:#dbe7ff; padding:0;
}
.rv-sheet-x svg{width:calc(var(--u) * 42); height:auto; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round}

/* =========================================================
   Leaderboard (ดีไซน์ RV2 หน้า 8)
   ========================================================= */
.lb-title{
  text-align:center; font-size:calc(var(--u) * 58); font-weight:700;
  letter-spacing:.02em; margin:calc(var(--u) * 10) 0 calc(var(--u) * 34);
}
.lb-list{display:flex; flex-direction:column; gap:calc(var(--u) * 22)}
.lb-row{display:flex; align-items:center; gap:calc(var(--u) * 18)}
.lb-rank{
  width:calc(var(--u) * 76); flex:none; text-align:center;
  font-size:calc(var(--u) * 40); font-weight:700; line-height:1.1;
}
.lb-rank .medal{font-size:calc(var(--u) * 62); line-height:1}
.lb-rank.sm{font-size:calc(var(--u) * 22); font-weight:500; color:var(--muted)}
.lb-av{
  width:calc(var(--u) * 92); height:calc(var(--u) * 92); flex:none;
  border-radius:50%; object-fit:cover; background:#c9d6ee;
  border:calc(var(--u) * 4) solid #eaf1ff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:calc(var(--u) * 34); color:#4a5f8a;
}
.lb-pill{
  flex:1; min-width:0; display:flex; align-items:center; gap:calc(var(--u) * 14);
  padding:calc(var(--u) * 16) calc(var(--u) * 28);
  border-radius:calc(var(--u) * 20);
  background:rgba(20,44,110,.75);
}
.lb-name{
  flex:1; min-width:0; font-size:calc(var(--u) * 34);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lb-stars{flex:none; font-size:calc(var(--u) * 30); letter-spacing:calc(var(--u) * 3); color:#2f4c8f}
.lb-stars i{font-style:normal}
.lb-stars i.on{color:#ffc247}
.lb-score{flex:none; font-size:calc(var(--u) * 36); font-weight:700; font-variant-numeric:tabular-nums}
/* แถวของตัวเอง — พื้นทองตามดีไซน์ ให้หาตัวเองเจอทันทีในลิสต์ยาว */
.lb-row.me .lb-pill{background:linear-gradient(90deg,#8a7434,#c8a850)}
.lb-row.me .lb-rank{color:#ffd97a}
.lb-row.me .lb-stars{color:#6b5a2a}
.lb-empty{text-align:center; color:var(--muted); padding:calc(var(--u) * 60) 0}

/* =========================================================
   ประวัติการเล่น (ดีไซน์ RV2 หน้า 7)
   ========================================================= */
.rv-tabs{
  display:flex; align-items:center; padding:calc(var(--u) * 6);
  border-radius:999px; border:calc(var(--u) * 3) solid rgba(90,140,255,.45);
  background:rgba(6,14,48,.5); margin-bottom:calc(var(--u) * 40);
}
.rv-tabs button{
  flex:1; border:0; cursor:pointer; background:none; color:var(--muted);
  font:inherit; font-size:calc(var(--u) * 32); padding:calc(var(--u) * 18) 0;
  border-radius:999px;
}
.rv-tabs button.on{
  color:#062043; font-weight:700;
  background:linear-gradient(100deg,var(--green),#6f7bff);
}
.hs-card{
  border-radius:calc(var(--u) * 36);
  border:calc(var(--u) * 3) solid rgba(74,132,255,.6);
  background:rgba(5,12,42,.6);
  box-shadow:0 0 calc(var(--u) * 34) rgba(58,123,255,.28);
  padding:calc(var(--u) * 28) calc(var(--u) * 32);
}
.hs-head{display:flex; align-items:center; justify-content:space-between; gap:calc(var(--u) * 16)}
.hs-date{font-size:calc(var(--u) * 30); color:#cfe0ff}
.hs-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:calc(var(--u) * 10);
  text-align:center; margin-top:calc(var(--u) * 20);
}
.hs-stats b{display:block; font-size:calc(var(--u) * 46); font-weight:700; color:#eaf2ff}
.hs-stats span{display:block; font-size:calc(var(--u) * 24); color:var(--muted)}
.hs-note{font-size:calc(var(--u) * 24); color:#ffb3b3; text-align:right; margin-top:calc(var(--u) * 8)}

/* =========================================================
   อัปโหลดใบเสร็จ (ดีไซน์ RV2 หน้า 6)
   ========================================================= */
.up-label{font-size:calc(var(--u) * 40); margin:calc(var(--u) * 26) 0 calc(var(--u) * 22)}
.store{
  display:flex; align-items:center; gap:calc(var(--u) * 26); width:100%;
  padding:calc(var(--u) * 22) calc(var(--u) * 30);
  border-radius:calc(var(--u) * 34); cursor:pointer; text-align:left;
  border:calc(var(--u) * 3) solid rgba(63,224,234,.45);
  background:rgba(6,16,52,.55); color:var(--ink); font:inherit;
  box-shadow:0 0 calc(var(--u) * 26) rgba(63,224,234,.22);
}
.store img{width:calc(var(--u) * 118); height:auto; flex:none}
.store .t{flex:1; min-width:0}
.store .t b{display:block; font-size:calc(var(--u) * 44); font-weight:700; line-height:1.2}
.store .t span{display:block; font-size:calc(var(--u) * 28); color:#bcd0f5}
.store .t em{font-style:normal; font-weight:700; color:#fff}
.store .go{flex:none; width:calc(var(--u) * 40); height:auto; fill:none; stroke:var(--cyan); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.store[aria-pressed=true]{border-color:var(--green); box-shadow:0 0 calc(var(--u) * 34) rgba(53,214,160,.55)}

.drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(var(--u) * 14); width:100%; min-height:calc(var(--u) * 380);
  padding:calc(var(--u) * 40); cursor:pointer; text-align:center;
  border-radius:calc(var(--u) * 34); border:calc(var(--u) * 3) dashed rgba(120,160,255,.5);
  background:rgba(4,10,36,.45); color:var(--muted); font:inherit;
}
.drop .cloud{width:calc(var(--u) * 230); height:auto; fill:none; stroke:#7f93c4; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.drop .m{font-size:calc(var(--u) * 30)}
.drop .s{font-size:calc(var(--u) * 26); opacity:.8}
.drop.has{border-style:solid; border-color:rgba(53,214,160,.7)}
.files{display:flex; flex-wrap:wrap; gap:calc(var(--u) * 16); margin-top:calc(var(--u) * 20)}
.files figure{position:relative; margin:0; width:calc(var(--u) * 200)}
.files img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:calc(var(--u) * 18); display:block}
.files .pdf{
  width:100%; aspect-ratio:3/4; border-radius:calc(var(--u) * 18);
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:rgba(20,44,110,.7); font-size:calc(var(--u) * 24); padding:calc(var(--u) * 12);
  overflow:hidden; word-break:break-all;
}
.files button{
  position:absolute; right:calc(var(--u) * -10); top:calc(var(--u) * -10);
  width:calc(var(--u) * 52); height:calc(var(--u) * 52); border-radius:50%;
  border:0; cursor:pointer; background:rgba(6,14,48,.95); color:#ffb3b3;
  font-size:calc(var(--u) * 30); line-height:1; padding:0;
}

/* ป้ายคะแนนโบนัสในป๊อปอัป */
.bonus-n{
  font-size:calc(var(--u) * 130); font-weight:900; line-height:1;
  margin:calc(var(--u) * 20) 0 0; letter-spacing:.01em;
}
.bonus-u{font-size:calc(var(--u) * 40); font-weight:700; margin:0 0 calc(var(--u) * 18)}

/* =========================================================
   โปรไฟล์ (ดีไซน์ RV2 หน้า 9) — รูปกับการเชื่อมบัญชี
   ========================================================= */
.pf-photo{position:relative; width:calc(var(--u) * 280); margin:0 auto calc(var(--u) * 30)}
.pf-photo img,.pf-photo .ini{
  width:calc(var(--u) * 280); height:calc(var(--u) * 280); border-radius:50%;
  object-fit:cover; display:flex; align-items:center; justify-content:center;
  background:#0d1c44; color:#8fb7e8; font-size:calc(var(--u) * 90); font-weight:700;
  border:calc(var(--u) * 6) solid transparent;
  background-image:linear-gradient(#0d1c44,#0d1c44),linear-gradient(140deg,var(--cyan),var(--blue));
  background-origin:border-box; background-clip:content-box,border-box;
}
.pf-cam{
  position:absolute; right:calc(var(--u) * 6); bottom:calc(var(--u) * 10);
  width:calc(var(--u) * 84); height:calc(var(--u) * 84); border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  background:#7d8aa6; border:calc(var(--u) * 4) solid #cfe0ff; color:#0d1c44;
}
.pf-cam svg{width:calc(var(--u) * 44); height:auto; fill:none; stroke:currentColor; stroke-width:1.8}
.link-row{
  display:flex; align-items:center; gap:calc(var(--u) * 24);
  padding:calc(var(--u) * 22) calc(var(--u) * 30);
  border-radius:calc(var(--u) * 20); background:rgba(20,44,110,.6);
}
.link-row .ic{width:calc(var(--u) * 66); height:calc(var(--u) * 66); border-radius:50%; flex:none; background:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; color:#0d1c44; font-size:calc(var(--u) * 34)}
.link-row .n{flex:1; font-size:calc(var(--u) * 40)}
.link-row .on{color:var(--green); font-size:calc(var(--u) * 30)}
.link-row .btn-lnk{
  border:0; border-radius:calc(var(--u) * 16); cursor:pointer;
  background:#6f8ab8; color:#fff; font:inherit; font-size:calc(var(--u) * 30);
  padding:calc(var(--u) * 14) calc(var(--u) * 34); text-decoration:none;
}
.link-row .btn-lnk[disabled]{opacity:.45; cursor:not-allowed}

/* =========================================================
   หน้าสร้างโปรไฟล์ + อัปโหลดใบเสร็จ (อาร์ตบอร์ด 02-ลงทะเบียน / 06 Upload)
   ตัวเลข y ในคอมเมนต์คือพิกัดในอาร์ตบอร์ด 1081x2044 ที่วัดจากพิกเซลของไฟล์ preview
   ========================================================= */

/* พื้นหลังชุดเดียวกันทั้งสองหน้า (2-Regist_BG.png = 06 Upload/BG.png ไฟล์เดียวกัน)
   แยกท่อนบนกับท่อนฝูงชนที่ y 1300 ซึ่งเป็นสี #000635 ล้วน หน้ายาวเท่าไหร่ก็ต่อกันไม่เห็นรอย */
.pg-form .rv-bg{display:none}
/* ในแบบ แถบวันที่ชิดเนื้อหาด้านบนมากกว่าหน้าอื่น */
.pg-form .rv-dates{border-top-width:calc(var(--u) * 26)}
.pg-form .rv-wrap{
  background:
    url(/assets/rv2/bg-form-bottom.webp) bottom center / 100% auto no-repeat,
    url(/assets/rv2/bg-form-top.webp) top center / 100% auto no-repeat,
    #000635;
}

/* ปุ่มหลักทรงแคปซูล: ใช้ภาพปุ่มจริงจากไฟล์ดีไซน์ (Btn.png) ที่ลบตัวอักษรออก แล้ววางข้อความสดทับ
   ข้อความจึงเปลี่ยนตามสถานะได้ (กำลังบันทึก… / ส่ง 3 ใบ) โดยหน้าตาปุ่มยังเหมือนแบบทุกพิกเซล
   ภาพกว้าง 930 สูง 227 รวมแสงเรือง ตัวแคปซูลอยู่ช่วง y 52-173 ของภาพ */
.rv-pill{
  position:relative; isolation:isolate; z-index:2;
  display:flex; align-items:center; justify-content:center; flex:none;
  /* ตัวปุ่ม = เฉพาะแคปซูลที่มองเห็น (808x121) ภาพเต็ม 930x227 วาดเป็น ::before ที่กดไม่ได้ */
  width:calc(var(--u) * 808); height:calc(var(--u) * 121);
  margin-left:auto; margin-right:auto; padding:0 calc(var(--u) * 60);
  background:none; border:0; border-radius:999px; cursor:pointer; color:#fff; text-decoration:none;
  font-family:inherit; font-size:calc(var(--u) * 46); font-weight:700; line-height:1.1;
  text-shadow:0 calc(var(--u) * 2) calc(var(--u) * 8) rgba(0,10,40,.55);
  -webkit-tap-highlight-color:transparent;
}
.rv-pill::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  top:calc(var(--u) * -52); right:calc(var(--u) * -62); bottom:calc(var(--u) * -54); left:calc(var(--u) * -60);
  background:url(/assets/rv2/btn-pill.webp) center / 100% 100% no-repeat;
}
.rv-pill:active{filter:brightness(1.15)}
/* ดีไซน์วาดปุ่มเป็นสีเต็มแม้ยังไม่ได้เลือกอะไร จึงลดสีแค่พอให้รู้ว่ายังกดไม่ได้ */
.rv-pill:disabled{filter:saturate(.7) brightness(.85); cursor:not-allowed}
.rv-pill:focus-visible{outline:none; filter:brightness(1.2) drop-shadow(0 0 calc(var(--u) * 14) var(--cyan))}

/* ---------- สร้างโปรไฟล์ ---------- */
.pg-reg .rv-top{padding:calc(var(--u) * 88) 0 0}                 /* โลโก้ y 88-172 */
.pg-reg .rv-logo{width:calc(var(--u) * 541)}
.reg-avatar{                                                      /* วง y 243-528 x เริ่ม 407 */
  position:relative; align-self:flex-start;
  width:calc(var(--u) * 306); height:calc(var(--u) * 285);
  margin:calc(var(--u) * 71) 0 0 calc(var(--u) * 361);
}
.reg-avatar img{display:block; width:100%; height:100%}
.reg-cam{
  position:absolute; right:0; bottom:0; width:calc(var(--u) * 92); height:calc(var(--u) * 92);
  border-radius:50%; border:0; padding:0; background:transparent; cursor:pointer;
}
.reg-cam:focus-visible{outline:2px solid var(--cyan)}
.reg-title{
  margin:calc(var(--u) * 46) 0 0; text-align:center;
  font-size:calc(var(--u) * 61); font-weight:700; line-height:1.2; color:#fff;
}
.reg-sub{
  margin:calc(var(--u) * 2) 0 0; text-align:center;
  font-size:calc(var(--u) * 49); line-height:1.3; color:#fff;
}
/* ช่องกรอก x 85-998 สูง 107 ช่วงห่าง 187 (กรอบบน y 844 / 1031 / 1218 / 1400) */
.pg-reg #form{margin:calc(var(--u) * 85) calc(var(--u) * 37) 0 calc(var(--u) * 39)}
.pg-reg .rv-field{margin-bottom:calc(var(--u) * 28)}
.pg-reg .rv-field > .lb{
  font-size:calc(var(--u) * 30); line-height:1.45; margin:0 0 calc(var(--u) * 8) calc(var(--u) * 7); color:#fff;
}
.pg-reg .rv-field > .lb small{font-size:calc(var(--u) * 26); font-weight:400; color:var(--muted)}
.pg-reg .rv-input{
  height:calc(var(--u) * 107); padding:0 calc(var(--u) * 40) 0 calc(var(--u) * 32);
  gap:calc(var(--u) * 58);
  border:calc(var(--u) * 3) solid #4f7cff;
  background:linear-gradient(180deg,rgba(18,26,70,.55),rgba(10,16,52,.7));
  box-shadow:0 0 calc(var(--u) * 22) rgba(64,110,255,.55), inset 0 0 calc(var(--u) * 26) rgba(40,70,190,.28);
}
.pg-reg .rv-input svg{width:calc(var(--u) * 40); stroke:#c9d6ff; stroke-width:1.9}
.pg-reg .rv-input input{font-size:calc(var(--u) * 33); padding:0; height:100%}
.pg-reg .rv-input input::placeholder{color:#7f95d6}
/* ช่องวันที่ของเบราว์เซอร์จะเขียน dd/mm/yyyy สีจางถ้ายังไม่เลือก ให้ดูเหมือน placeholder ช่องอื่น */
.pg-reg .rv-input input[type=date]:invalid{color:#7f95d6}
.reg-age{flex:none; font-size:calc(var(--u) * 32); font-weight:700; color:#8ff0cd; white-space:nowrap}
.reg-age.bad{color:#ff9a9a}
.reg-pdpa{margin:calc(var(--u) * 20) calc(var(--u) * 10) 0; font-size:calc(var(--u) * 26); line-height:1.45; color:#cfd9f5}
.pg-reg .rv-pill{margin-top:calc(var(--u) * 40)}
.reg-cancel{margin-top:calc(var(--u) * 24); position:relative}
.reg-cancel button{background:none; border:0; padding:calc(var(--u) * 10); color:var(--muted); font:inherit; cursor:pointer; text-decoration:underline}

/* ---------- อัปโหลดใบเสร็จ ---------- */
/* การ์ดใหญ่ x 71-1010, y 209-1794 ขอบไล่สีฟ้าอมเขียว -> น้ำเงิน */
.up-card{
  position:relative; width:calc(var(--u) * 939); margin:0 0 0 calc(var(--u) * 25);
  padding:calc(var(--u) * 23) 0 calc(var(--u) * 10);
  border:calc(var(--u) * 3) solid transparent; border-radius:calc(var(--u) * 46);
  background:
    linear-gradient(180deg,rgba(2,8,26,.9),rgba(2,6,22,.92)) padding-box,
    linear-gradient(160deg,#3fd9c8 0%,#3a8dff 55%,#3b5bff 100%) border-box;
  box-shadow:0 0 calc(var(--u) * 30) rgba(58,140,255,.35);
}
/* แถบบนสูงพอดี 209 ให้การ์ดเริ่มที่ y 209 ตามแบบ (โลโก้กลาง y ~131, รูปโปรไฟล์ ~148) */
.pg-upload .rv-top{height:calc(var(--u) * 209); padding:calc(var(--u) * 44) 0 0 calc(var(--u) * 36)}
.pg-upload .rv-logo{width:calc(var(--u) * 541)}
.up-home{display:block; width:calc(var(--u) * 259); margin-left:calc(var(--u) * 23)}
.up-home img{display:block; width:100%; height:auto}
.up-head{                                                          /* ข้อความ y ~372-429 x เริ่ม 149 */
  position:relative; z-index:1;   /* อยู่เหนือแสงเรืองขอบบนของปุ่มร้านที่ซ้อนขึ้นมา */
  margin:calc(var(--u) * 70) 0 0 calc(var(--u) * 75);
  font-size:calc(var(--u) * 46); font-weight:500; line-height:1.25; color:#dfe8ff;
}

/* ปุ่มหมวดร้าน: ใช้กรอบนีออนจริงจากไฟล์ดีไซน์ (btn_glow-blue.png 767x292) แล้ววางโลโก้กับข้อความสด
   ไม่ใช้ภาพปุ่มสำเร็จรูป (btn-7 ฯลฯ) เพราะในภาพเขียนจำนวนรางวัลไม่ตรงกับ preview และระบบ
   กรอบที่มองเห็น x 136-944 และบนสุด y 441 / 666 / 890 */
.stores{display:flex; flex-direction:column; margin:calc(var(--u) * 12) 0 0 calc(var(--u) * 52)}
/* ตัวปุ่ม = กรอบที่มองเห็น 831x207 (y 34-241 ของภาพกรอบที่ขยายแล้ว) ไม่ซ้อนกัน เว้นช่องไฟ 17.5
   ภาพกรอบพร้อมแสงเรือง 831x304 วาดเป็น ::before ที่กดไม่ได้ ระยะห่างกรอบบนสุดตามแบบ = 224.5 */
.store2{
  position:relative; isolation:isolate; display:block;
  width:calc(var(--u) * 831); height:calc(var(--u) * 207);
  padding:0; border:0; border-radius:calc(var(--u) * 34); background:none;
  cursor:pointer; text-align:left; color:#fff; font:inherit;
  -webkit-tap-highlight-color:transparent;
}
.store2::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  left:0; right:0; top:calc(var(--u) * -34); bottom:calc(var(--u) * -63);
  background:url(/assets/rv2/store-frame.webp) center / 100% 100% no-repeat;
}
.store2 + .store2{margin-top:calc(var(--u) * 17.5)}
/* ข้างในปุ่ม: หน่วยดีไซน์นับจากขอบบนกรอบ (y 441 ของอาร์ตบอร์ดสำหรับร้านแรก) x จากขอบกล่อง (x 126)
   วัดจาก preview: คอลัมน์ข้อความ x 362 / ชื่อร้านกลาง y 497 / บรรทัดปลดล็อก 552 / วันที่ 588 / ลูกศร x 869 y 515 */
.store2 .logo{position:absolute; left:calc(var(--u) * 24); top:calc(var(--u) * 9); width:calc(var(--u) * 200); height:calc(var(--u) * 190); pointer-events:none}
.store2 .t{position:absolute; inset:0; pointer-events:none}
.store2 .t > *{position:absolute; left:calc(var(--u) * 236); white-space:nowrap}
.store2 .t b{top:calc(var(--u) * 30); font-size:calc(var(--u) * 50); font-weight:700; line-height:1; letter-spacing:.005em}
.store2 .t .u{top:calc(var(--u) * 88); font-size:calc(var(--u) * 31); line-height:calc(var(--u) * 46); color:#b58cff}
.store2 .t .u em{font-style:normal; font-weight:700; font-size:calc(var(--u) * 45); margin-left:calc(var(--u) * 14); vertical-align:top}
.store2 .t .d{top:calc(var(--u) * 131); font-size:calc(var(--u) * 29); line-height:1; color:#d8e4ff}
.store2 .go{position:absolute; left:calc(var(--u) * 743); top:calc(var(--u) * 74); width:calc(var(--u) * 31); height:calc(var(--u) * 56); pointer-events:none}
.store2:active{filter:brightness(1.15)}
.store2:focus-visible{outline:none; filter:drop-shadow(0 0 calc(var(--u) * 10) var(--cyan))}
/* เลือกแล้ว: เรืองเขียว + ติ๊กแทนลูกศร — ดีไซน์ไม่ได้ทำสถานะนี้ไว้ ต้องเห็นชัดว่าเลือกหมวดไหน */
.store2[aria-pressed=true]{filter:drop-shadow(0 0 calc(var(--u) * 14) rgba(53,214,160,.95)) brightness(1.1)}
.store2 .tick{display:none}
.store2[aria-pressed=true] .go{display:none}
.store2[aria-pressed=true] .tick{
  display:flex; align-items:center; justify-content:center;
  position:absolute; left:calc(var(--u) * 729); top:calc(var(--u) * 73); width:calc(var(--u) * 58); height:calc(var(--u) * 58);
  border-radius:50%; background:var(--green); color:#03281c; font-weight:900; font-size:calc(var(--u) * 36);
}
.pg-upload.dim-others .store2:not([aria-pressed=true]){opacity:.62}

/* กล่องแนบไฟล์: upload.png 767x530 กรอบที่มองเห็น x 143-936 y 1170-1577 */
.drop2{
  position:relative; display:block; width:calc(var(--u) * 818); height:calc(var(--u) * 593);
  margin:calc(var(--u) * 9) 0 0 calc(var(--u) * 58);
  padding:0; border:0; cursor:pointer; font:inherit; color:inherit;
  background:url(/assets/rv2/drop-frame.webp) center / 100% 100% no-repeat;
  -webkit-tap-highlight-color:transparent;
}
.drop2:focus-visible{outline:none; filter:drop-shadow(0 0 calc(var(--u) * 10) var(--violet))}
.drop2.has{background-image:url(/assets/rv2/drop-frame-empty.webp); cursor:default}
/* พื้นที่ภายในกรอบ (ตัดขอบเรืองออก) สำหรับวางรูปย่อของไฟล์ที่เลือก */
.drop2 .in{
  position:absolute; left:4%; right:4%; top:14%; bottom:24%;
  display:none; flex-wrap:wrap; align-content:flex-start; gap:calc(var(--u) * 18);
  overflow-y:auto; padding:calc(var(--u) * 10); touch-action:pan-y;
}
.drop2.has .in{display:flex}
.drop2 figure{position:relative; margin:0; width:calc(var(--u) * 150); height:calc(var(--u) * 190); flex:none}
.drop2 figure img,.drop2 figure .pdf{
  width:100%; height:100%; object-fit:cover; border-radius:calc(var(--u) * 16); display:flex;
  align-items:center; justify-content:center; text-align:center; overflow:hidden; word-break:break-all;
  background:rgba(60,70,160,.45); font-size:calc(var(--u) * 22); padding:calc(var(--u) * 8); color:#dfe6ff;
}
.drop2 figure button{
  position:absolute; right:calc(var(--u) * -12); top:calc(var(--u) * -12);
  width:calc(var(--u) * 52); height:calc(var(--u) * 52); border-radius:50%;
  border:calc(var(--u) * 2) solid rgba(200,210,255,.6); background:#0b1440; color:#ffb3b3;
  font-size:calc(var(--u) * 32); line-height:1; padding:0; cursor:pointer;
}
.drop2 .add{
  width:calc(var(--u) * 150); height:calc(var(--u) * 190); flex:none; border-radius:calc(var(--u) * 16);
  border:calc(var(--u) * 3) dashed rgba(150,160,255,.55); background:rgba(40,50,130,.25);
  color:#c9d2ff; font:inherit; font-size:calc(var(--u) * 26); cursor:pointer; line-height:1.3;
}
.drop2 .count{
  position:absolute; left:0; right:0; bottom:11%; text-align:center;
  font-size:calc(var(--u) * 28); color:#b9c3ee; display:none;
}
.drop2.has .count{display:block}

/* ปุ่มส่ง: แคปซูล x 145-952 กึ่งกลาง y 1669 */
.pg-upload .up-card .rv-pill{margin:calc(var(--u) * -89) 0 calc(var(--u) * 54) calc(var(--u) * 71)}
.pg-upload .rv-msg{margin:calc(var(--u) * 20) calc(var(--u) * 60) 0}

/* ป๊อปอัปยินดีด้วย: pop-up.png 869x563 วางที่ x 108 y 814 ของอาร์ตบอร์ด
   ข้อความที่เปลี่ยนตามผลจริง (จำนวนคะแนน / รอตรวจ) ลบออกจากภาพแล้ววางเป็นตัวอักษรสด */
.pop2{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(0,3,18,.72); padding:0 calc(var(--u) * 60);
}
.pop2-box{
  position:relative; width:calc(var(--u) * 869); height:calc(var(--u) * 563); flex:none;
  transform:translateY(calc(var(--u) * 74));   /* แบบวางกล่องต่ำกว่ากึ่งกลางจอ 74 หน่วย (ขอบบน y 814) */
  background:url(/assets/rv2/popup-frame.webp) center / 100% 100% no-repeat; text-align:center; color:#fff;
}
.pop2-x{
  position:absolute; left:calc(var(--u) * 781); top:calc(var(--u) * -53);
  width:calc(var(--u) * 117); height:calc(var(--u) * 117); border-radius:50%; padding:0; cursor:pointer;
  background:rgba(2,8,30,.92); border:calc(var(--u) * 5) solid #a9b9dc; color:#dbe6ff;
  display:flex; align-items:center; justify-content:center;
}
.pop2-x svg{width:calc(var(--u) * 66); height:auto; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round}
/* ตำแหน่งข้อความวัดจากแถวพิกเซลในภาพ pop-up.png: บรรทัดรอง y 198 / ตัวเลข 269-360 / คำว่าคะแนน 388-405 ขอบขวา 644 / บรรทัดล่าง 464 */
.pop2-box p{margin:0}
.pop2-sub{position:absolute; left:0; right:0; top:calc(var(--u) * 171); font-size:calc(var(--u) * 42); font-weight:500; line-height:1.3}
.pop2-n{position:absolute; left:0; right:0; top:calc(var(--u) * 253); font-size:calc(var(--u) * 126); font-weight:900; line-height:1; letter-spacing:-.01em; color:#eef3ff}
.pop2-n.sm{font-size:calc(var(--u) * 96); top:calc(var(--u) * 268)}
.pop2-u{position:absolute; right:calc(var(--u) * 225); top:calc(var(--u) * 371); font-size:calc(var(--u) * 40); font-weight:700; line-height:1.3}
.pop2-note{position:absolute; left:calc(var(--u) * 40); right:calc(var(--u) * 40); top:calc(var(--u) * 442); font-size:calc(var(--u) * 34); line-height:1.3; color:#9fd0ff}