/* อันดับเครดิตสูงสุด (Top 3) — ตามม็อกอัพ design/mock-top-rank (แบบ C · top-mix · style-picker)
   ขนาดเขียนไว้สำหรับมือถือ · จอกว้าง ≥ 600px ขยายด้วย zoom ทั้งก้อน */
@property --rkang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes rk-spin{to{--rkang:360deg}}
.rk-rainbow,.rk-ring1{--rkang:0deg;background:conic-gradient(from var(--rkang),#ff5f8f,#ffb04a,#ffe86a,#5fe3a1,#55b6ff,#a77bff,#ff5f8f);animation:rk-spin 6s linear infinite}
@media (prefers-reduced-motion:reduce){.rk-rainbow,.rk-ring1{animation:none}}

/* รูปในกรอบภาพ */
.rk-frame{position:relative;display:block;margin-left:auto;margin-right:auto}
.rk-frame > i{position:absolute;border-radius:50%}
.rk-frame > .rk-pic{background:linear-gradient(135deg,var(--pri2),var(--pri)) center/cover;display:grid;place-items:center;color:#fff;font:700 22px Prompt}
.rk-frame > img{position:relative;display:block;width:100%;height:100%;pointer-events:none}
/* ไม่มีไฟล์กรอบ → วงแหวน CSS */
.rk-ring{position:relative;display:inline-block;border-radius:50%;padding:4px;margin:0 auto}
.rk-ring.m1{background:linear-gradient(135deg,#fff3b0,#f2a516 40%,#b8730a 60%,#ffe28a)}
.rk-ring.m2{background:linear-gradient(135deg,#ffffff,#cfe0f0 40%,#8fa7c2 60%,#eef4fa)}
.rk-ring.m3{background:linear-gradient(135deg,#ffd9b8,#d0874f 40%,#8f4f23 60%,#f3b98c)}
.rk-ring .rk-pic{display:grid;place-items:center;border-radius:50%;border:3px solid #fff;background:linear-gradient(135deg,var(--pri2),var(--pri)) center/cover;color:#fff;font:700 18px Prompt}
.rk-ring b{position:absolute;right:-4px;bottom:-2px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;font:800 11px Prompt;color:#fff;background:#f2a516}
.rk-ring.m2 b{background:#8fa7c2} .rk-ring.m3 b{background:#b06c3a}

/* ป้าย */
.rk-badge{position:relative;display:block;margin:0 auto 2px;container-type:inline-size}
.rk-badge img{display:block;width:100%;height:auto}
.rk-badge span{position:absolute;z-index:2;left:22%;right:22%;display:flex;align-items:center;justify-content:center;font-family:Prompt;font-weight:800;line-height:1;white-space:nowrap;letter-spacing:.2px;text-shadow:0 1px 0 rgba(255,255,255,.85)}
.rk-badge .rk-arc{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;z-index:2;pointer-events:none;font-family:Prompt;font-weight:700}
.rk-badge-css{display:inline-block;margin:0 auto 6px;font:800 11.5px Prompt;color:#fff;padding:3px 10px;border-radius:99px;background:linear-gradient(90deg,#f2a516,#ff5f8f)}

/* podium */
.rk-podium{display:grid;grid-template-columns:1fr 1.45fr 1fr;align-items:end;gap:6px;margin:6px 0 14px}
.rk-podium > *{min-width:0}
.rk-pod{position:relative;display:block;text-align:center;border-radius:22px;padding:14px 6px 0;background:var(--card);box-shadow:var(--sh);color:var(--ink);overflow:hidden}
/* จอแคบ: ป้ายย่อตามช่อง (ข้อความเป็น cqw ย่อตาม) · กรอบกว้างกว่าช่อง = ล้นเท่ากันสองข้าง ไม่ชิดซ้าย */
.rk-pod .rk-badge{max-width:100%}
.rk-pod .rk-frame{margin-left:calc((100% - var(--W)) / 2);margin-right:calc((100% - var(--W)) / 2)}
.rk-pod .nm{display:block;font:700 12.5px Prompt;margin-top:8px;line-height:1.25;overflow-wrap:anywhere}
.rk-pod.p1 .nm{font-size:14px}
.rk-pod .st{display:inline-block;margin-top:5px;font:700 10.5px Prompt;color:#9a5b00;background:#fff4d6;padding:2px 7px;border-radius:99px;white-space:nowrap;max-width:100%;box-sizing:border-box}
@media (max-width:379px){.rk-pod .st{white-space:normal;line-height:1.25}}   /* จอแคบ: ★ ดาว 4 หลักขึ้นบรรทัดใหม่แทนโดนตัดขอบการ์ด */
.rk-pod .plinth{display:block;margin:10px -6px 0;font:800 20px Prompt;color:#fff;padding:8px 0}
.rk-pod.p1 .plinth{background:linear-gradient(135deg,#ffcf4a,#f29a16);height:62px}
.rk-pod.p2 .plinth{background:linear-gradient(135deg,#e6eef7,#9fb4cc);height:40px}
.rk-pod.p3 .plinth{background:linear-gradient(135deg,#f3c49b,#b06c3a);height:28px;padding:4px 0;line-height:20px}
.rk-pod.p1{padding-top:10px;border-radius:21px}
.rk-ring1{border-radius:24px;padding:3px}
.rk-ring1.cool{background:linear-gradient(135deg,#f6dc84,#d4af37 35%,#141414 60%,#d4af37);animation:none}
/* ร้านที่เลือกชุดเท่: ฐาน/ป้ายดาวโทนเข้ม */
.rk-pod.rk-cool.p1 .plinth{background:linear-gradient(135deg,#d4af37,#141414)}
.rk-pod.rk-cool.p2 .plinth{background:linear-gradient(135deg,#9fb0c6,#1b2a44)}
.rk-pod.rk-cool.p3 .plinth{background:linear-gradient(135deg,#c4813f,#3a2210)}
.rk-pod.rk-cool .st{background:#eef1f5;color:#1b2a44}
@media (min-width:600px){.rk-podium{zoom:1.3;max-width:600px;margin-left:auto;margin-right:auto}}

/* หน้าร้านอันดับ 1–3 */
.rk-shophead{text-align:center;margin-top:-70px;position:relative;z-index:3}
.rk-shophead .rk-badge{margin-top:2px}

/* หลังบ้าน: เลือกสไตล์ */
.rk-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.rk-opt{cursor:pointer}
.rk-opt input{position:absolute;opacity:0}
.rk-opt .box{position:relative;display:block;border:2px solid #ececf1;border-radius:18px;padding:12px 8px;text-align:center;background:#fff}
.rk-opt input:checked + .box{border-color:var(--pri);box-shadow:0 10px 24px -14px var(--pri)}
.rk-opt .tick{position:absolute;right:10px;top:10px;width:22px;height:22px;border-radius:50%;border:2px solid #d9d9e0;background:#fff;z-index:3}
.rk-opt input:checked + .box .tick{border:0;background:var(--pri) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.rk-opt .pv{height:176px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.rk-opt .pv > *,.rk-opt .mini > *{flex:none}
.rk-opt .mini{display:flex;justify-content:center;align-items:flex-end;gap:2px;margin-top:6px;height:46px}
.rk-opt b{display:block;font:800 16px Prompt;margin-top:8px}
.rk-opt small{display:block;color:var(--soft);font-size:12px;line-height:1.4;margin-top:2px}

/* ปีกขยับช้า ๆ นุ่ม ๆ — กรอบอันดับ 1 ชุดเท่ (ไฟล์ base + ปีกซ้าย/ขวา ซ้อน inset:0 · ปีกอยู่ใต้ base) */
.rk-frame > img.rk-wl,.rk-frame > img.rk-wr,.rk-frame > img.rk-base{position:absolute;inset:0}
.rk-frame > img.rk-wl{animation:rk-flapL 2.6s ease-in-out infinite;will-change:transform}
.rk-frame > img.rk-wr{animation:rk-flapR 2.6s ease-in-out infinite;will-change:transform}
@keyframes rk-flapL{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
@keyframes rk-flapR{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.rk-frame > img.rk-wl,.rk-frame > img.rk-wr,.rk-aura,.rk-orbit,.rk-orbit i::before{animation:none}}

/* แสงฟุ้ง + ดาววนรอบวง (อันดับ 2–3 ทั้งสองชุด · สีตามกรอบ --g) — ม็อกอัพ design/mock-heart-ears/wing/orbit.html */
.rk-frame > .rk-aura{position:absolute;inset:2%;border-radius:50%;background:radial-gradient(circle,transparent 42%,var(--g) 55%,transparent 72%);
  filter:blur(calc(var(--W) * .033));animation:rk-breathe 2.6s ease-in-out infinite;pointer-events:none}
@keyframes rk-breathe{0%,100%{opacity:.45;transform:scale(.96)}50%{opacity:.95;transform:scale(1.04)}}
.rk-orbit{position:absolute;inset:0;pointer-events:none;animation:rk-orbit var(--t,13s) linear infinite}
.rk-orbit.rev{animation-direction:reverse}
@keyframes rk-orbit{to{transform:rotate(360deg)}}
.rk-orbit i{--s:calc(var(--W) * .08);--r:calc(var(--W) * .49);position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s) / -2);
  transform:rotate(var(--a)) translateY(calc(var(--r) * -1))}
.rk-orbit i.rk-s-big{--s:calc(var(--W) * .105)} .rk-orbit i.rk-s-dot{--r:calc(var(--W) * .525)} .rk-orbit i.rk-s-in{--s:calc(var(--W) * .054);--r:calc(var(--W) * .417)}
.rk-orbit i::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#fff 22%,var(--g) 60%);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 2px var(--g)) drop-shadow(0 0 7px var(--g));animation:rk-tw 2.6s ease-in-out infinite;animation-delay:var(--d,0s)}
.rk-orbit i.rk-s-dot::before{clip-path:none;border-radius:50%;inset:30%}
@keyframes rk-tw{0%,100%{transform:scale(.6);opacity:.6}50%{transform:scale(1.15);opacity:1}}

/* แท่นตัวอย่างตอนยังมีร้านติดอันดับไม่ครบ 3 — สีเต็มตลอด เหมือนตอนเอาเมาส์ชี้ (ผู้ใช้สั่ง 7 พ.ย.) · ไม่จาง · ชี้แล้วไม่เปลี่ยน
   บอกว่าไม่ใช่ร้านจริงด้วยป้าย "ตัวอย่าง" + กล่องคำอธิบายใต้แท่น */
.rk-sample .rk-pod{opacity:1;filter:none;padding-top:34px}   /* เว้นที่ด้านบนให้ป้าย "ตัวอย่าง" ไม่ทับป้ายอันดับ/กรอบ */
.rk-ex{position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:6;font:700 10.5px Prompt;color:#fff;background:rgba(40,40,60,.72);padding:2px 10px;border-radius:99px;letter-spacing:.3px;white-space:nowrap}
.rk-samplecta{display:block;margin:-4px 0 12px;padding:10px 14px;border:1.5px dashed var(--line2);border-radius:16px;text-align:center;color:var(--ink);background:var(--bg)}
.rk-samplecta b{display:block;font:700 13.5px Prompt}
.rk-samplecta span{font-size:12px;color:var(--soft)}

/* ปิดกรอบอันดับ (rank_frame_off): ป้ายอันดับใต้รูปเฉยๆ · ปุ่มสลับในหน้าตกแต่ง */
.rk-shophead.rk-badge-only{margin-top:6px}