/* ============================================================
   Foodmapme — Avatar Frame Library (กรอบอวตาร)
   กรอบทุกอันเป็น CSS ล้วน (0 KB image, ไม่กระทบ SEO/Core Web Vitals)
   ออกแบบจาก Frame Catalog (Claude Design) — โหลดได้ทั้งเว็บ (sidebar/profile/หน้าร้านกรอบ)

   Markup (ดู includes/frames.php : fm_render_frame):
     <div class="fm-frame fm-frame--KEY" style="--fm-size:160px">
       <div class="fm-frame__bg"></div>
       <div class="fm-frame__av"> img / .ini </div>
       <div class="fm-frame__deco"><span class="d">🍜</span>...</div>
     </div>
   เพิ่มกรอบใหม่ = เพิ่มข้อมูล 1 แถวใน FM_FRAMES (frames.php) + บล็อก CSS 1 ก้อนที่นี่
   ============================================================ */

/* โทนแบรนด์ที่กรอบ/เหรียญใช้ (ไม่ชนกับ design system หลักของแอป) */
:root{
  --fm-cream:       #FBF6F1;
  --fm-orange:      #ED7029;
  --fm-orange-deep: #E2580F;
  --fm-orange-soft: #FCE7D6;
  --fm-orange-tint: #FBEEE3;
  /* alias ที่ใช้ในกฎด้านล่าง (ภายในไฟล์นี้เท่านั้น) */
  --cream:  var(--fm-cream);
  --orange: var(--fm-orange);
}

/* ---- เหรียญ (coin) — เหรียญทองนูน มีขอบบีเวล + ดาวตรงกลาง ---- */
.fm-coin{ position:relative; width:1.3em; height:1.3em; border-radius:50%; flex:none; display:inline-grid; place-items:center;
  background:
    radial-gradient(circle at 50% 120%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(circle at 36% 28%, #FFF3C9 0%, #FBD668 36%, #F2AC2E 66%, #D2851A 100%);
  box-shadow:
    inset 0 1.5px 1.5px rgba(255,255,255,.9),
    inset 0 -2.5px 3px rgba(150,86,8,.6),
    0 1px 2px rgba(120,72,8,.45);
}
/* ขอบในนูน (rim) */
.fm-coin::before{ content:''; position:absolute; inset:14%; border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  box-shadow: inset 0 0 0 1px rgba(176,112,18,.45), inset 0 1px 1px rgba(255,255,255,.4); }
/* ดาวตรงกลาง (ซ่อนตัวอักษร C เดิม แล้ววาดดาวแทน) */
.fm-coin i{ font-size:0; line-height:0; }
.fm-coin::after{ content:'★'; position:absolute; inset:0; display:grid; place-items:center; z-index:1;
  font-size:.62em; line-height:1; color:#A4660C; text-shadow:0 1px 0 rgba(255,255,255,.55); }

/* ---- ป้ายระดับความหายาก ---- */
.fm-rar{ display:inline-flex; align-items:center; gap:.35em; font-size:.72rem; font-weight:600; letter-spacing:.02em;
  padding:.25em .7em; border-radius:999px; }
.fm-rar::before{ content:''; width:.5em; height:.5em; border-radius:50%; background:currentColor; }
.fm-rar--common { color:#B08A5E; background:#F0E7DC; }
.fm-rar--rare   { color:#3E8FD0; background:#DFEDF8; }
.fm-rar--epic   { color:#9B5DE5; background:#ECE2FA; }
.fm-rar--legend { color:#C97A06; background:#FCEFD6; }
.fm-rar--free   { color:#3FA66B; background:#DCF1E1; }

/* ============================================================
   Frame base
   ============================================================ */
.fm-frame{
  --fm-size: 150px;
  --av: 76%;
  --inner: #ffffff;
  position: relative;
  width: var(--fm-size);
  height: var(--fm-size);
  flex: none;
  display: grid;
  place-items: center;
}
.fm-frame__av{
  position: relative; z-index: 3;
  width: var(--av); height: var(--av);
  border-radius: 50%;
  overflow: hidden;
  background: #ece4db;
  box-shadow: 0 0 0 calc(var(--fm-size)*.018) var(--inner), 0 2px 6px rgba(0,0,0,.14);
  display: grid; place-items: center;
}
.fm-frame__av img{ width:100%; height:100%; object-fit:cover; display:block; }
.fm-frame__av .ini{ font-weight:600; color:#fff; font-size:calc(var(--fm-size)*.34); line-height:1; }
.fm-frame__bg, .fm-frame__deco{ position:absolute; inset:0; border-radius:50%; pointer-events:none; }
.fm-frame__bg{ z-index:1; }
.fm-frame__deco{ z-index:4; }
.fm-frame__deco .d{ position:absolute; left:50%; top:50%; font-size:calc(var(--fm-size)*.155); line-height:1;
  transform:translate(-50%,-50%); filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

/* กรอบเปล่า (ยังไม่สวมกรอบ) — แสดง avatar กลมเฉยๆ ขนาดเต็ม */
.fm-frame--none{ --av: 100%; }
.fm-frame--none .fm-frame__av{ box-shadow:0 1px 3px rgba(0,0,0,.12); }

/* gradient avatar (ผู้ใช้ที่ไม่มีรูป — ใช้ตัวอักษรแรก) */
.fm-av--1{ background:linear-gradient(150deg,#F6A04E,#E2580F); }
.fm-av--2{ background:linear-gradient(150deg,#6FB1E8,#2E6FB0); }
.fm-av--3{ background:linear-gradient(150deg,#8FD89E,#3B9A57); }
.fm-av--4{ background:linear-gradient(150deg,#C79CF0,#7E47C9); }
.fm-av--5{ background:linear-gradient(150deg,#F9C56B,#E89215); }
.fm-av--6{ background:linear-gradient(150deg,#F58FA6,#D24B6E); }

/* ============================================================
   Shared keyframes
   ============================================================ */
@keyframes fm-spin     { to{ transform:rotate(360deg); } }
@keyframes fm-spin-rev { to{ transform:rotate(-360deg); } }
@keyframes fm-bob      { 0%,100%{ transform:translate(-50%,-50%) translateY(0); } 50%{ transform:translate(-50%,-50%) translateY(-9%); } }
@keyframes fm-twinkle  { 0%,100%{ opacity:.35; transform:translate(-50%,-50%) scale(.7); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.05); } }
@keyframes fm-pulse    { 0%,100%{ opacity:.55; transform:scale(.98); } 50%{ opacity:1; transform:scale(1.04); } }
@keyframes fm-steam    { 0%{ opacity:0; transform:translate(-50%,-50%) translateY(0) scale(.7); } 25%{opacity:.9;} 100%{ opacity:0; transform:translate(-50%,-50%) translateY(-55%) scale(1.15); } }
@keyframes fm-drop     { 0%{ opacity:0; transform:translate(-50%,-50%) translateY(-30%);} 20%{opacity:1;} 100%{ opacity:0; transform:translate(-50%,-50%) translateY(40%);} }
@keyframes fm-flicker  { 0%,100%{ opacity:.85; transform:translate(-50%,-50%) scale(1);} 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.12);} }
@keyframes fm-flutter  { 0%,100%{ transform:translate(-50%,-50%) rotate(-8deg);} 50%{ transform:translate(-50%,-50%) rotate(8deg);} }
@keyframes fm-glowpulse{ 0%,100%{ box-shadow:0 0 calc(var(--fm-size)*.04) var(--g), inset 0 0 calc(var(--fm-size)*.03) var(--g);} 50%{ box-shadow:0 0 calc(var(--fm-size)*.11) var(--g), inset 0 0 calc(var(--fm-size)*.06) var(--g);} }
@keyframes fm-sweep    { 0%{ transform:translateX(-120%) skewX(-18deg);} 60%,100%{ transform:translateX(220%) skewX(-18deg);} }

/* ============================================================
   BASIC THEME (ฟรี) — กรอบเรียบ ไม่มีแอนิเมชัน
   ============================================================ */
.fm-frame--plain .fm-frame__bg{ border:calc(var(--fm-size)*.05) solid #D8CFC5; box-shadow:0 0 0 calc(var(--fm-size)*.012) #EFE7DF inset; }
.fm-frame--peach .fm-frame__bg{ border:calc(var(--fm-size)*.05) solid #F4B183; box-shadow:0 0 0 calc(var(--fm-size)*.012) #FCE7D6 inset; }
.fm-frame--mint  .fm-frame__bg{ border:calc(var(--fm-size)*.05) solid #7FC9A6; box-shadow:0 0 0 calc(var(--fm-size)*.012) #D7F0E4 inset; }
.fm-frame--sky   .fm-frame__bg{ border:calc(var(--fm-size)*.05) solid #76B6E0; box-shadow:0 0 0 calc(var(--fm-size)*.012) #DCEEF9 inset; }

/* ============================================================
   FOOD THEME 🍜
   ============================================================ */
/* Noodle — Common */
.fm-frame--noodle .fm-frame__bg{ border:calc(var(--fm-size)*.055) dashed #EE9A4D; }
.fm-frame--noodle .fm-frame__bg::after{ content:''; position:absolute; inset:calc(var(--fm-size)*-.012); border-radius:50%; border:calc(var(--fm-size)*.018) solid #F6C99B; }
.fm-frame--noodle .d:nth-child(1){ top:88%; }

/* Veggie — Rare (bobbing) */
.fm-frame--veggie .fm-frame__bg{ border:calc(var(--fm-size)*.05) solid #5FB46E; box-shadow:0 0 0 calc(var(--fm-size)*.012) #CDEBD2 inset, 0 0 0 calc(var(--fm-size)*.012) #CDEBD2; }
.fm-frame--veggie .d{ animation:fm-bob 2.6s ease-in-out infinite; }
.fm-frame--veggie .d:nth-child(1){ top:6%;  left:30%; animation-delay:0s; }
.fm-frame--veggie .d:nth-child(2){ top:50%; left:96%; animation-delay:.5s; }
.fm-frame--veggie .d:nth-child(3){ top:94%; left:62%; animation-delay:1s; }
.fm-frame--veggie .d:nth-child(4){ top:60%; left:3%;  animation-delay:1.5s; }

/* Dessert — Rare (sprinkle twinkle) */
.fm-frame--dessert .fm-frame__bg{ border:calc(var(--fm-size)*.055) solid #F6A8C4; box-shadow:0 0 0 calc(var(--fm-size)*.016) #FBE0EA inset; }
.fm-frame--dessert .fm-frame__bg::before{ content:''; position:absolute; inset:calc(var(--fm-size)*-.018); border-radius:50%;
  background:radial-gradient(circle at 20% 18%, #FFD24D 0 4%, transparent 5%), radial-gradient(circle at 82% 30%, #6FD0F0 0 3%, transparent 4%), radial-gradient(circle at 70% 90%, #9BE08C 0 3.5%, transparent 4.5%), radial-gradient(circle at 14% 78%, #FF7BAC 0 3%, transparent 4%);
  animation:fm-pulse 2.2s ease-in-out infinite; }
.fm-frame--dessert .d:nth-child(1){ top:5%; left:70%; }
.fm-frame--dessert .d:nth-child(2){ top:90%; left:28%; }

/* Chili — Epic (flame glow flicker) */
.fm-frame--chili{ --g:#FF6A2C; }
.fm-frame--chili .fm-frame__bg{ border:calc(var(--fm-size)*.052) solid #E8431F; border-radius:50%; animation:fm-glowpulse 1.4s ease-in-out infinite; }
.fm-frame--chili .fm-frame__bg::after{ content:''; position:absolute; inset:calc(var(--fm-size)*.02); border-radius:50%; border:calc(var(--fm-size)*.014) solid #FFB089; }
.fm-frame--chili .d{ animation:fm-flicker 1s ease-in-out infinite; }
.fm-frame--chili .d:nth-child(1){ top:8%; left:50%; }
.fm-frame--chili .d:nth-child(2){ top:50%; left:95%; animation-delay:.3s; }
.fm-frame--chili .d:nth-child(3){ top:50%; left:5%;  animation-delay:.6s; }

/* Coffee — Epic (rising steam) */
.fm-frame--coffee .fm-frame__bg{ border:calc(var(--fm-size)*.055) solid #8C5A36; box-shadow:0 0 0 calc(var(--fm-size)*.014) #E6D2C1 inset; }
.fm-frame--coffee .d.steam{ font-size:calc(var(--fm-size)*.12); opacity:0; animation:fm-steam 2.4s ease-out infinite; }
.fm-frame--coffee .d.steam:nth-child(1){ top:14%; left:38%; animation-delay:0s; }
.fm-frame--coffee .d.steam:nth-child(2){ top:14%; left:58%; animation-delay:.8s; }
.fm-frame--coffee .d.steam:nth-child(3){ top:14%; left:48%; animation-delay:1.6s; }
.fm-frame--coffee .d.cup{ top:92%; left:50%; animation:none; }

/* Pizza — Common */
.fm-frame--pizza .fm-frame__bg{ border:calc(var(--fm-size)*.055) solid #E8A33D; box-shadow:0 0 0 calc(var(--fm-size)*.014) #F6D9A0 inset; }
.fm-frame--pizza .d:nth-child(1){ top:88%; }

/* Sushi — Rare (bobbing) */
.fm-frame--sushi .fm-frame__bg{ border:calc(var(--fm-size)*.05) solid #2E7D5B; box-shadow:0 0 0 calc(var(--fm-size)*.012) #CDEBD2 inset; }
.fm-frame--sushi .d{ animation:fm-bob 2.6s ease-in-out infinite; }
.fm-frame--sushi .d:nth-child(1){ top:8%;  left:40%; }
.fm-frame--sushi .d:nth-child(2){ top:52%; left:94%; animation-delay:.5s; }
.fm-frame--sushi .d:nth-child(3){ top:90%; left:56%; animation-delay:1s; }

/* ============================================================
   RANK THEME 🥇
   ============================================================ */
/* Bronze — Common */
.fm-frame--bronze .fm-frame__bg{ border:calc(var(--fm-size)*.06) solid transparent;
  background:linear-gradient(var(--cream),var(--cream)) padding-box, linear-gradient(145deg,#E7B584,#A9703E 55%,#7A4F26) border-box; }
.fm-frame--bronze .d:nth-child(1){ top:90%; }

/* Silver — Rare (shimmer sweep) */
.fm-frame--silver .fm-frame__bg{ border:calc(var(--fm-size)*.06) solid transparent;
  background:linear-gradient(var(--cream),var(--cream)) padding-box, linear-gradient(145deg,#F3F5F8,#B9C2CC 50%,#8C97A4) border-box; overflow:hidden; }
.fm-frame--silver .fm-frame__bg::after{ content:''; position:absolute; top:-30%; left:0; width:35%; height:160%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); animation:fm-sweep 3s ease-in-out infinite; }
.fm-frame--silver .d:nth-child(1){ top:90%; }

/* Gold — Epic (rotating shine + laurel) */
.fm-frame--gold .fm-frame__bg{ border:calc(var(--fm-size)*.065) solid transparent;
  background:linear-gradient(var(--cream),var(--cream)) padding-box, conic-gradient(from 0deg,#FFE9A0,#E89B17,#FFF1C2,#C9810F,#FFE9A0) border-box; animation:fm-spin 6s linear infinite; }
.fm-frame--gold .d{ font-size:calc(var(--fm-size)*.2); }
.fm-frame--gold .d:nth-child(1){ top:91%; }

/* Diamond — Legendary (prismatic spin + sparkles) */
.fm-frame--diamond .fm-frame__bg{ border:calc(var(--fm-size)*.07) solid transparent;
  background:linear-gradient(var(--cream),var(--cream)) padding-box, conic-gradient(from 0deg,#9BE7FF,#C9A8FF,#FFB6E6,#A8FFE3,#9BE7FF) border-box; animation:fm-spin 5s linear infinite; box-shadow:0 0 calc(var(--fm-size)*.08) rgba(150,200,255,.5); }
.fm-frame--diamond .fm-frame__bg::after{ content:''; position:absolute; inset:calc(var(--fm-size)*.02); border-radius:50%; border:calc(var(--fm-size)*.012) solid rgba(255,255,255,.7); }
.fm-frame--diamond .d{ animation:fm-twinkle 1.8s ease-in-out infinite; }
.fm-frame--diamond .d:nth-child(1){ top:10%; left:50%; }
.fm-frame--diamond .d:nth-child(2){ top:50%; left:92%; animation-delay:.4s; }
.fm-frame--diamond .d:nth-child(3){ top:90%; left:50%; animation-delay:.8s; }
.fm-frame--diamond .d:nth-child(4){ top:50%; left:8%;  animation-delay:1.2s; }

/* Platinum — Epic (silver-blue conic spin) */
.fm-frame--platinum .fm-frame__bg{ border:calc(var(--fm-size)*.065) solid transparent;
  background:linear-gradient(var(--cream),var(--cream)) padding-box, conic-gradient(from 0deg,#EAF2FB,#A8C2DC,#FFFFFF,#8FA8C4,#EAF2FB) border-box; animation:fm-spin 6s linear infinite; box-shadow:0 0 calc(var(--fm-size)*.05) rgba(160,190,220,.55); }
.fm-frame--platinum .d{ font-size:calc(var(--fm-size)*.18); }
.fm-frame--platinum .d:nth-child(1){ top:91%; }

/* King — Legendary (royal gold-purple spin + crown sparkle) */
.fm-frame--king{ --g:#F2C14E; }
.fm-frame--king .fm-frame__bg{ border:calc(var(--fm-size)*.07) solid transparent;
  background:linear-gradient(var(--cream),var(--cream)) padding-box, conic-gradient(from 0deg,#FFE9A0,#B06CFF,#FFF1C2,#7A47C9,#FFE9A0) border-box; animation:fm-spin 5s linear infinite; box-shadow:0 0 calc(var(--fm-size)*.08) rgba(176,108,255,.45); }
.fm-frame--king .d{ animation:fm-twinkle 1.8s ease-in-out infinite; }
.fm-frame--king .d:nth-child(1){ top:5%;  left:50%; }
.fm-frame--king .d:nth-child(2){ top:50%; left:92%; animation-delay:.4s; }
.fm-frame--king .d:nth-child(3){ top:93%; left:50%; animation-delay:.8s; }
.fm-frame--king .d:nth-child(4){ top:50%; left:8%;  animation-delay:1.2s; }

/* ============================================================
   FESTIVAL THEME 🎉
   ============================================================ */
/* Songkran — Rare (water drops) */
.fm-frame--songkran .fm-frame__bg{ border:calc(var(--fm-size)*.055) solid #34A7D8; box-shadow:0 0 0 calc(var(--fm-size)*.014) #CDEDF8 inset; }
.fm-frame--songkran .d{ animation:fm-drop 2s ease-in infinite; }
.fm-frame--songkran .d:nth-child(1){ top:0; left:28%; animation-delay:0s; }
.fm-frame--songkran .d:nth-child(2){ top:0; left:55%; animation-delay:.7s; }
.fm-frame--songkran .d:nth-child(3){ top:0; left:78%; animation-delay:1.3s; }
.fm-frame--songkran .d.fix{ animation:none; top:90%; left:50%; }

/* New Year — Epic (fireworks twinkle) */
.fm-frame--newyear{ --g:#FFC24B; }
.fm-frame--newyear .fm-frame__bg{ border:calc(var(--fm-size)*.05) solid #3A2C5E; animation:fm-glowpulse 2s ease-in-out infinite; }
.fm-frame--newyear .fm-frame__bg::before{ content:''; position:absolute; inset:calc(var(--fm-size)*-.02); border-radius:50%;
  background:radial-gradient(circle at 24% 16%,#FFD24D 0 4%,transparent 5%),radial-gradient(circle at 80% 22%,#FF7BAC 0 3%,transparent 4%),radial-gradient(circle at 88% 78%,#6FD0F0 0 3.5%,transparent 4.5%),radial-gradient(circle at 16% 82%,#9BE08C 0 3%,transparent 4%);
  animation:fm-twinkle 1.6s ease-in-out infinite; }
.fm-frame--newyear .d{ animation:fm-twinkle 2s ease-in-out infinite; }
.fm-frame--newyear .d:nth-child(1){ top:7%; left:72%; }
.fm-frame--newyear .d:nth-child(2){ top:88%; left:24%; animation-delay:.6s; }

/* Halloween — Epic (bat flutter + glow) */
.fm-frame--halloween{ --g:#8A3FD1; }
.fm-frame--halloween .fm-frame__bg{ border:calc(var(--fm-size)*.052) solid #5A2C8A; animation:fm-glowpulse 1.8s ease-in-out infinite; }
.fm-frame--halloween .fm-frame__bg::after{ content:''; position:absolute; inset:calc(var(--fm-size)*.02); border-radius:50%; border:calc(var(--fm-size)*.012) solid #FF8A3D; }
.fm-frame--halloween .d.bat{ animation:fm-flutter 1.1s ease-in-out infinite; }
.fm-frame--halloween .d.bat:nth-child(1){ top:10%; left:30%; }
.fm-frame--halloween .d.bat:nth-child(2){ top:18%; left:74%; animation-delay:.4s; }
.fm-frame--halloween .d.fix{ top:90%; left:50%; }

/* Valentine — Rare (twinkling hearts) */
.fm-frame--valentine .fm-frame__bg{ border:calc(var(--fm-size)*.055) solid #F2789F; box-shadow:0 0 0 calc(var(--fm-size)*.014) #FBE0EA inset; }
.fm-frame--valentine .d{ animation:fm-twinkle 1.8s ease-in-out infinite; }
.fm-frame--valentine .d:nth-child(1){ top:10%; left:30%; }
.fm-frame--valentine .d:nth-child(2){ top:18%; left:72%; animation-delay:.5s; }
.fm-frame--valentine .d:nth-child(3){ top:84%; left:50%; animation-delay:1s; }

/* Christmas — Epic (snow fall + glow) */
.fm-frame--xmas{ --g:#3FAE5A; }
.fm-frame--xmas .fm-frame__bg{ border:calc(var(--fm-size)*.055) solid #2E7D43; animation:fm-glowpulse 2.2s ease-in-out infinite; }
.fm-frame--xmas .fm-frame__bg::after{ content:''; position:absolute; inset:calc(var(--fm-size)*.02); border-radius:50%; border:calc(var(--fm-size)*.012) solid #E23A3A; }
.fm-frame--xmas .d:nth-child(1){ top:90%; left:38%; }
.fm-frame--xmas .d:nth-child(2){ top:90%; left:62%; }
.fm-frame--xmas .d.snow{ font-size:calc(var(--fm-size)*.1); animation:fm-drop 2.6s ease-in infinite; }
.fm-frame--xmas .d.snow:nth-child(3){ top:0; left:34%; animation-delay:0s; }
.fm-frame--xmas .d.snow:nth-child(4){ top:0; left:66%; animation-delay:1.2s; }

/* ============================================================
   ACHIEVEMENT THEME 🏅
   ============================================================ */
/* Taster — Rare (twinkle stars) */
.fm-frame--taster .fm-frame__bg{ border:calc(var(--fm-size)*.05) solid var(--orange); box-shadow:0 0 0 calc(var(--fm-size)*.014) #FCE7D6 inset; }
.fm-frame--taster .d.fix{ top:91%; left:50%; }
.fm-frame--taster .d.star{ font-size:calc(var(--fm-size)*.11); animation:fm-twinkle 1.6s ease-in-out infinite; }
.fm-frame--taster .d.star:nth-child(1){ top:10%; left:24%; }
.fm-frame--taster .d.star:nth-child(2){ top:6%;  left:50%; animation-delay:.3s; }
.fm-frame--taster .d.star:nth-child(3){ top:10%; left:76%; animation-delay:.6s; }

/* Explorer — Epic (rotating pins) */
.fm-frame--explorer .fm-frame__bg{ border:calc(var(--fm-size)*.045) dashed #2E7D8F; box-shadow:0 0 0 calc(var(--fm-size)*.014) #D6ECEF inset; }
.fm-frame--explorer .fm-frame__deco{ animation:fm-spin 9s linear infinite; }
.fm-frame--explorer .d{ animation:fm-spin-rev 9s linear infinite; } /* keep emoji upright */
.fm-frame--explorer .d:nth-child(1){ top:2%;  left:50%; }
.fm-frame--explorer .d:nth-child(2){ top:50%; left:98%; }
.fm-frame--explorer .d:nth-child(3){ top:98%; left:50%; }
.fm-frame--explorer .d:nth-child(4){ top:50%; left:2%; }

/* Reviewer — Epic (orbiting gold stars) */
.fm-frame--reviewer .fm-frame__bg{ border:calc(var(--fm-size)*.055) solid transparent;
  background:linear-gradient(var(--cream),var(--cream)) padding-box, conic-gradient(from 0deg,#FFE08A,#E8961A,#FFE08A) border-box; }
.fm-frame--reviewer .fm-frame__deco{ animation:fm-spin 7s linear infinite; }
.fm-frame--reviewer .d{ font-size:calc(var(--fm-size)*.13); animation:fm-spin-rev 7s linear infinite; }
.fm-frame--reviewer .d:nth-child(1){ top:4%;  left:50%; }
.fm-frame--reviewer .d:nth-child(2){ top:72%; left:88%; }
.fm-frame--reviewer .d:nth-child(3){ top:72%; left:12%; }

/* Gourmet — Rare (gold ring + twinkle stars) */
.fm-frame--gourmet .fm-frame__bg{ border:calc(var(--fm-size)*.055) solid transparent;
  background:linear-gradient(var(--cream),var(--cream)) padding-box, conic-gradient(from 0deg,#FFE08A,#E8961A,#FFE08A) border-box; }
.fm-frame--gourmet .d.fix{ top:90%; left:50%; }
.fm-frame--gourmet .d.star{ font-size:calc(var(--fm-size)*.11); animation:fm-twinkle 1.6s ease-in-out infinite; }
.fm-frame--gourmet .d.star:nth-child(2){ top:10%; left:32%; }
.fm-frame--gourmet .d.star:nth-child(3){ top:10%; left:68%; animation-delay:.4s; }

/* Champion — Legendary (gold spin + sparkles) */
.fm-frame--champion{ --g:#F2A028; }
.fm-frame--champion .fm-frame__bg{ border:calc(var(--fm-size)*.06) solid transparent;
  background:linear-gradient(var(--cream),var(--cream)) padding-box, conic-gradient(from 0deg,#FFE9A0,#E89B17,#FFF1C2,#C9810F,#FFE9A0) border-box; animation:fm-spin 6s linear infinite; box-shadow:0 0 calc(var(--fm-size)*.07) rgba(242,160,40,.5); }
.fm-frame--champion .d{ animation:fm-twinkle 1.8s ease-in-out infinite; }
.fm-frame--champion .d:nth-child(1){ top:88%; left:50%; }
.fm-frame--champion .d:nth-child(2){ top:14%; left:28%; animation-delay:.4s; }
.fm-frame--champion .d:nth-child(3){ top:14%; left:72%; animation-delay:.8s; }

/* ============================================================
   NEON THEME ⚡
   ============================================================ */
/* Neon Pulse — Epic */
.fm-frame--neon{ --g:#19E3D2; --inner:#0e1320; }
.fm-frame--neon .fm-frame__bg{ border:calc(var(--fm-size)*.045) solid #19E3D2; animation:fm-glowpulse 1.5s ease-in-out infinite; }
.fm-frame--neon .fm-frame__bg::after{ content:''; position:absolute; inset:calc(var(--fm-size)*.03); border-radius:50%; border:calc(var(--fm-size)*.02) solid #FF6A2C; box-shadow:0 0 calc(var(--fm-size)*.04) #FF6A2C; }

/* Cyber Orange — Legendary (rotating dashed + glow) */
.fm-frame--cyber{ --g:#FF7A2C; --inner:#0e1320; }
.fm-frame--cyber .fm-frame__bg{ border:calc(var(--fm-size)*.05) dashed #FF7A2C; box-shadow:0 0 calc(var(--fm-size)*.08) rgba(255,122,44,.55); animation:fm-spin 5s linear infinite; }
.fm-frame--cyber .fm-frame__bg::after{ content:''; position:absolute; inset:calc(var(--fm-size)*-.02); border-radius:50%; border:calc(var(--fm-size)*.01) solid rgba(255,200,120,.5); }
.fm-frame--cyber .fm-frame__deco{ animation:fm-spin 5s linear infinite; }
.fm-frame--cyber .d{ font-size:calc(var(--fm-size)*.12); animation:fm-spin-rev 5s linear infinite; }
.fm-frame--cyber .d:nth-child(1){ top:1%; left:50%; }
.fm-frame--cyber .d:nth-child(2){ top:99%; left:50%; }

/* Aurora — Legendary (conic gradient glow) */
.fm-frame--aurora{ --inner:#0e1320; }
.fm-frame--aurora .fm-frame__bg{ border:calc(var(--fm-size)*.07) solid transparent;
  background:linear-gradient(#11162a,#11162a) padding-box, conic-gradient(from 0deg,#FF6A2C,#FFC24B,#19E3D2,#7A5CFF,#FF6A2C) border-box;
  filter:saturate(1.15); animation:fm-spin 6s linear infinite; box-shadow:0 0 calc(var(--fm-size)*.09) rgba(122,92,255,.4); }
.fm-frame--aurora .fm-frame__bg::after{ content:''; position:absolute; inset:calc(var(--fm-size)*.018); border-radius:50%; border:calc(var(--fm-size)*.01) solid rgba(255,255,255,.25); }

/* Matrix — Epic (green glow + dashed) */
.fm-frame--matrix{ --g:#27E36A; --inner:#0e1320; }
.fm-frame--matrix .fm-frame__bg{ border:calc(var(--fm-size)*.045) solid #27E36A; animation:fm-glowpulse 1.5s ease-in-out infinite; }
.fm-frame--matrix .fm-frame__bg::after{ content:''; position:absolute; inset:calc(var(--fm-size)*.03); border-radius:50%; border:calc(var(--fm-size)*.014) dashed rgba(39,227,106,.6); }

/* Rainbow — Legendary (พินวีลสายรุ้งแบ่งช่องสีสด พื้นขาว) — ตัดกับ Aurora ที่เป็นเฉดนุ่มพื้นเข้ม */
.fm-frame--rainbow .fm-frame__bg{ border:calc(var(--fm-size)*.075) solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
    repeating-conic-gradient(from 0deg, #FF5A5A 0 30deg, #FFB24D 30deg 60deg, #FFE24D 60deg 90deg, #5BE36A 90deg 120deg, #4DC4FF 120deg 150deg, #B06CFF 150deg 180deg) border-box;
  animation:fm-spin 7s linear infinite; box-shadow:0 0 calc(var(--fm-size)*.05) rgba(255,150,190,.5); }
.fm-frame--rainbow .fm-frame__bg::after{ content:''; position:absolute; inset:calc(var(--fm-size)*.02); border-radius:50%; border:calc(var(--fm-size)*.014) solid #fff; }
.fm-frame--rainbow .d:nth-child(1){ top:90%; font-size:calc(var(--fm-size)*.18); }

/* reduced motion: หยุดแอนิเมชันทั้งหมดให้เป็นภาพนิ่งสวยงาม */
@media (prefers-reduced-motion: reduce){
  .fm-frame *{ animation: none !important; }
  .fm-frame .d.steam, .fm-frame--songkran .d{ opacity:.9 !important; }
}