/*
 * ⭐ เอฟเฟกต์กิจกรรมแต้ม — วงล้อ · ป้าย 4×4 · ป๊อปอัปฉลองรางวัล (2026-10-15)
 *
 * ใช้ร่วม: หน้าผู้เล่น (`live-hub-fun.js`) + โหมดลองเล่นในหลังบ้าน (`game-designer.js`) — มาร์กอัปจาก `hub-fx.js`
 * สีตามธีม: `--gt1 --gt2 --gt3` (hub-themes.css) · ไม่มีธีม = ทอง/ม่วง
 * ⚠️ 3 สำเนา (weblive · newweb-v2 · newwebbot-v2) ต้องตรงกันทุกไบต์ · คลาส `hfx-*` · คีย์เฟรม `hfx-*`
 */

/* ══ วงล้อ ════════════════════════════════════════════════════ */
.hfx-wheel { --size: min(300px, 78vw); --r: calc(var(--size) / 2 + 9px); position: relative; width: var(--size); aspect-ratio: 1; margin: 14px auto; }
.hfx-wheel::before {
  content: ""; position: absolute; inset: -16%; border-radius: 50%; z-index: 0; filter: blur(18px); opacity: .75;
  background: conic-gradient(from 0deg, var(--gt1, #f59e0b), var(--gt2, #ec4899), var(--gt1, #f59e0b), var(--gt2, #8b5cf6), var(--gt1, #f59e0b));
  animation: hfx-spin 9s linear infinite;
}
.hfx-wheel::after {
  content: ""; position: absolute; inset: -6%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, transparent 58%, color-mix(in srgb, var(--gt2, #fde68a) 35%, transparent) 64%, transparent 72%);
  animation: hfx-breathe 2.6s ease-in-out infinite;
}
/* ⚠️ การหมุนคุมด้วย transition จาก `hub-fx.js` เท่านั้น (ไม่มี animation บนตัวนี้ — ชนกันแล้วข้ามการหมุน) */
.hfx-wheel__rot { position: relative; z-index: 1; width: 100%; height: 100%; will-change: transform; }
.hfx-wheel__rot svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .5)); }
.hfx-wheel__rot text { font-size: 9px; font-weight: 800; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 2.2px; }
.hfx-wheel__rim { fill: var(--gt3, #1b1530); stroke: var(--gt2, #ebbe3a); stroke-width: 3; }
.hfx-wheel__bulbs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hfx-wheel__bulbs i {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%;
  background: #fff6c9; box-shadow: 0 0 8px #ffd968, 0 0 16px color-mix(in srgb, var(--gt2, #ffd968) 70%, transparent);
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)); animation: hfx-bulb 1.2s ease-in-out infinite; animation-delay: var(--d);
}
.hfx-wheel.is-spin .hfx-wheel__bulbs i { animation-duration: .32s; }
.hfx-wheel__pin {
  position: absolute; left: 50%; top: -10px; z-index: 4; width: 30px; height: 38px; transform: translateX(-50%); transform-origin: 50% 20%;
  background: linear-gradient(180deg, #fff, var(--gt2, #ebbe3a)); clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55));
}
.hfx-wheel.is-spin .hfx-wheel__pin { animation: hfx-tick .12s ease-in-out infinite alternate; }
.hfx-wheel__hub {
  position: absolute; left: 50%; top: 50%; z-index: 3; width: 18%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--gt2, #ebbe3a)); font-size: calc(var(--size) * .07);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 0 24px var(--gt2, #ebbe3a); animation: hfx-breathe 2s ease-in-out infinite;
}
.hfx-wheel__spark { position: absolute; inset: -12%; z-index: 2; pointer-events: none; }
.hfx-wheel__spark i { position: absolute; width: 10px; height: 10px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: hfx-twinkle 2.4s ease-in-out infinite; }
.hfx-wheel__spark i:nth-child(1) { left: 6%; top: 14%; }
.hfx-wheel__spark i:nth-child(2) { right: 4%; top: 30%; animation-delay: -.8s; width: 7px; height: 7px; }
.hfx-wheel__spark i:nth-child(3) { left: 12%; bottom: 8%; animation-delay: -1.6s; }
.hfx-wheel__spark i:nth-child(4) { right: 10%; bottom: 16%; animation-delay: -1.2s; width: 6px; height: 6px; }
.hfx-wheel__img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }

/* ══ ป้าย 4×4 ═════════════════════════════════════════════════ */
.hfx-board { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; perspective: 900px; }
.hfx-card { --i: 0; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; animation: hfx-deal .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 40ms); }
.hfx-card:disabled { cursor: default; }
.hfx-card__in { position: relative; display: block; width: 100%; height: 0; padding-top: 118%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2, .8, .2, 1); animation: hfx-float 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -230ms); }
.hfx-card:not(:disabled):hover .hfx-card__in { transform: translateY(-4px) rotateX(8deg) rotateY(-8deg); }
.hfx-card.is-open .hfx-card__in { transform: rotateY(180deg); animation: none; }
.hfx-card.is-busy .hfx-card__in { animation: hfx-shake .45s ease-in-out infinite; }
.hfx-card__back, .hfx-card__face {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 12px; padding: 4px; text-align: center; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.hfx-card__back {
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--gt2, #ec4899) 35%, transparent), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--gt1, #8b5cf6) 65%, #120d24), #120d24);
  border: 1px solid color-mix(in srgb, var(--gt2, #ebbe3a) 60%, transparent); box-shadow: inset 0 0 18px rgba(0, 0, 0, .45);
}
.hfx-card__back::before {
  content: ""; position: absolute; inset: 5px; border-radius: 9px; border: 1px dashed color-mix(in srgb, var(--gt2, #ebbe3a) 45%, transparent);
}
.hfx-card__back::after {
  content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%);
  transform: translateX(-60%); animation: hfx-sweep 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * 180ms);
}
.hfx-card__back i { position: relative; font-style: normal; font-size: 24px; font-weight: 900; color: var(--gt2, #ebbe3a); text-shadow: 0 0 12px var(--gt2, #ebbe3a); animation: hfx-breathe 2.2s ease-in-out infinite; }
.hfx-card__back small { position: relative; font-size: 9.5px; color: rgba(255, 255, 255, .65); }
.hfx-card__face { transform: rotateY(180deg); background: linear-gradient(160deg, #1d2030, #0f1118); border: 1px solid rgba(255, 255, 255, .12); color: #fff; }
.hfx-card__face b { font-size: 10px; line-height: 1.2; }
.hfx-card__face img { width: 62%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.hfx-card__ic { font-size: 22px; }
.hfx-card.is-open .hfx-card__face::before {
  content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--gt2, #ebbe3a) 70%, transparent), transparent 60%); animation: hfx-burst .8s ease-out both;
}
.hfx-card.is-credit .hfx-card__face { background: linear-gradient(160deg, color-mix(in srgb, #f5c542 34%, #1d2030), #0f1118); border-color: #f5c542; box-shadow: 0 0 18px -4px #f5c542; }
.hfx-card.is-points .hfx-card__face, .hfx-card.is-pet .hfx-card__face, .hfx-card.is-frame .hfx-card__face { border-color: #3fe0ff; box-shadow: 0 0 16px -6px #3fe0ff; }
.hfx-card.is-ghost { opacity: .42; filter: saturate(.6); }

/* ══ ป๊อปอัปฉลองรางวัล ════════════════════════════════════════ */
.hfx-pop { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 18px; overflow: hidden; }
.hfx-pop__veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(30, 18, 60, .72), rgba(0, 0, 0, .9)); backdrop-filter: blur(6px); animation: hfx-fade .3s ease both; }
.hfx-pop__rays {
  position: absolute; left: 50%; top: 42%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; pointer-events: none; opacity: .55;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gt2, #ffd968) 32%, transparent) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 46%); mask-image: radial-gradient(circle, #000 0, transparent 46%);
  animation: hfx-spin 26s linear infinite, hfx-fade .6s ease both;
}
.hfx-pop__rays--2 { opacity: .3; animation-duration: 40s, .6s; animation-direction: reverse, normal; background: repeating-conic-gradient(from 9deg, color-mix(in srgb, var(--gt1, #ec4899) 40%, transparent) 0deg 4deg, transparent 4deg 22deg); }
.hfx-pop__confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hfx-pop__confetti i {
  position: absolute; top: -6%; width: 9px; height: 14px; border-radius: 2px; opacity: .95;
  left: var(--x); background: var(--c); animation: hfx-fall var(--t) linear var(--d) infinite; transform: rotate(var(--r));
}
.hfx-pop__card {
  position: relative; z-index: 2; width: min(340px, 92vw); display: grid; justify-items: center; gap: 6px; padding: 26px 20px 20px; text-align: center; color: #fff;
  border-radius: 26px; border: 1px solid color-mix(in srgb, var(--gt2, #ffd968) 55%, transparent);
  background: linear-gradient(160deg, rgba(40, 26, 80, .92), rgba(12, 10, 24, .95)); box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .9), 0 0 60px -10px color-mix(in srgb, var(--gt2, #ffd968) 60%, transparent);
  animation: hfx-popin .7s cubic-bezier(.18, 1.4, .4, 1) both;
}
.hfx-pop__medal { position: relative; display: grid; place-items: center; width: 128px; height: 128px; margin-top: -78px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffbe6, var(--gt2, #ffd968) 45%, color-mix(in srgb, var(--gt1, #f59e0b) 80%, #000));
  box-shadow: 0 0 0 6px rgba(0, 0, 0, .35), 0 0 50px var(--gt2, #ffd968); animation: hfx-medal 2.4s ease-in-out infinite; }
.hfx-pop__medal img { width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.hfx-pop__medal span:not(.hfx-pop__ring) { font-size: 60px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.hfx-pop__ring { position: absolute; inset: -14px; border-radius: 50%; border: 3px dashed color-mix(in srgb, #fff 70%, transparent); animation: hfx-spin 8s linear infinite; }
.hfx-pop__title {
  margin-top: 10px; font-size: 30px; font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(90deg, #fff6c9, var(--gt2, #ffd968), #fff, var(--gt2, #ffd968), #fff6c9); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: hfx-shine 2.4s linear infinite;
}
.hfx-pop__label { font-size: 22px; font-weight: 800; animation: hfx-zoom .6s .25s cubic-bezier(.18, 1.5, .4, 1) both; }
.hfx-pop__sub { font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.hfx-pop__btn {
  margin-top: 10px; min-width: 70%; padding: 12px 18px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-weight: 800; font-size: 16px; color: #1c1503;
  background: linear-gradient(180deg, #fff1b0, var(--gt2, #f5c542)); box-shadow: 0 10px 26px -10px var(--gt2, #f5c542); animation: hfx-breathe 1.8s ease-in-out infinite;
}
.hfx-pop__tag { position: absolute; top: 12px; right: 14px; font-size: 10.5px; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .14); }
.hfx-pop.is-lose .hfx-pop__rays, .hfx-pop.is-lose .hfx-pop__confetti { display: none; }
.hfx-pop.is-lose .hfx-pop__medal { background: radial-gradient(circle at 35% 30%, #e0f2fe, #64748b); box-shadow: 0 0 0 6px rgba(0, 0, 0, .35); animation: hfx-wobble 1.8s ease-in-out infinite; }
.hfx-pop.is-lose .hfx-pop__title { background: none; color: #cbd5e1; animation: none; font-size: 24px; }
.hfx-pop.is-out { animation: hfx-fadeout .25s ease both; }

@keyframes hfx-spin { to { transform: rotate(360deg); } }
@keyframes hfx-breathe { 0%, 100% { transform: translate(var(--hx, 0), var(--hy, 0)) scale(1); } 50% { transform: translate(var(--hx, 0), var(--hy, 0)) scale(1.06); } }
@keyframes hfx-bulb { 0%, 100% { opacity: .35; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(.75); } 50% { opacity: 1; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(1.15); } }
@keyframes hfx-tick { from { transform: translateX(-50%) rotate(-8deg); } to { transform: translateX(-50%) rotate(8deg); } }
@keyframes hfx-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes hfx-deal { from { opacity: 0; transform: translateY(-30px) rotate(-8deg) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes hfx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes hfx-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg) scale(1.03); } 75% { transform: rotate(4deg) scale(1.03); } }
@keyframes hfx-sweep { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
@keyframes hfx-burst { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.8); } }
@keyframes hfx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hfx-fadeout { to { opacity: 0; } }
@keyframes hfx-fall { from { transform: translateY(0) rotate(var(--r)); } to { transform: translateY(115vh) rotate(calc(var(--r) + 720deg)); } }
@keyframes hfx-popin { from { opacity: 0; transform: translateY(40px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes hfx-medal { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes hfx-shine { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes hfx-zoom { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes hfx-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* วงล้อ: ฮับต้องอยู่กลางแม้ตอนเต้น */
.hfx-wheel__hub { --hx: -50%; --hy: -50%; }

/* ⭐ 2026-10-16 กลางวงล้อ = โลโก้บอท (รูปอยู่โฟลเดอร์เดียวกับไฟล์นี้ทั้ง 3 สำเนา) */
.hfx-wheel__hub { width: 27%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #1f2937, #030712 75%); border: 3px solid var(--gt2, #ebbe3a); }
.hfx-wheel__logo { position: absolute; inset: 4%; border-radius: 50%; background: url("hub-bot-head.webp") center 58% / 118% auto no-repeat; filter: drop-shadow(0 0 6px rgba(74, 222, 128, .7)); }
.hfx-wheel__hub::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); background-size: 260% 100%; animation: hfx-hubshine 3.2s linear infinite; }
.hfx-wheel.is-spin .hfx-wheel__logo { animation: hfx-eyes .5s ease-in-out infinite alternate; }
@keyframes hfx-hubshine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
@keyframes hfx-eyes { from { filter: drop-shadow(0 0 4px rgba(74, 222, 128, .5)); } to { filter: drop-shadow(0 0 14px rgba(74, 222, 128, 1)) brightness(1.15); } }

@media (prefers-reduced-motion: reduce) {
  .hfx-wheel::before, .hfx-wheel::after, .hfx-wheel__bulbs i, .hfx-wheel__hub, .hfx-wheel__spark i, .hfx-wheel__pin,
  .hfx-card, .hfx-card__in, .hfx-card__back::after, .hfx-card__back i, .hfx-pop *, .hfx-pop__rays { animation: none !important; }
  .hfx-card__in { transition: none; }
}