/* =========================================================
   HORAKOM — กรอบโปรไฟล์ & ตราจากร้านของรางวัล
   ใช้ร่วมกันทุกหน้า (community, profile, live, article)
   วิธีใช้:  <div class="hk-av" data-frame="frame_gold">…</div>
   ========================================================= */

.hk-av {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex: 0 0 auto;
  background: rgba(201,168,76,.15);
  overflow: visible;
}
.hk-av > img:not(.hk-av-img),
.hk-av > .hk-av-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: #f3ece0;
  position: relative; z-index: 2;
}

/* วงแหวนกรอบ — เจาะกลางให้โปร่งด้วย mask จึงไม่บังรูปโปรไฟล์ */
.hk-av { overflow: visible !important; }
.hk-av[data-frame]::before {
  content: '';
  position: absolute;
  inset: calc(var(--hk-ring-w, 5px) * -1.9);
  border-radius: 50%;
  z-index: 0;
  background: conic-gradient(var(--hk-ring, #c9a84c), #fff8, var(--hk-ring, #c9a84c), #fff8, var(--hk-ring, #c9a84c));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--hk-ring-w, 5px) - 1px), #000 calc(100% - var(--hk-ring-w, 5px)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--hk-ring-w, 5px) - 1px), #000 calc(100% - var(--hk-ring-w, 5px)));
  animation: hkRingSpin 6s linear infinite;
  pointer-events: none;
}
/* เนื้อหาด้านในต้องอยู่เหนือวงแหวนเสมอ */
.hk-av[data-frame] > * { position: relative; z-index: 2; }
@keyframes hkRingSpin { to { transform: rotate(360deg); } }

/* ปิดการหมุนถ้าผู้ใช้ตั้งค่าลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
  .hk-av[data-frame]::before { animation: none; }
}

/* ---------- ทองคำ ---------- */
.hk-av[data-frame="frame_gold"] {
  --hk-ring: #e8c874;
  filter: drop-shadow(0 0 7px rgba(232,200,116,.65));
}
.hk-av[data-frame="frame_gold"]::before {
  background: conic-gradient(#f7d774, #fff6d0, #c9a84c, #fff6d0, #f7d774, #a07a16, #f7d774);
}

/* ---------- ดอกบัว ---------- */
.hk-av[data-frame="frame_lotus"] {
  --hk-ring: #f0a8c4;
  filter: drop-shadow(0 0 7px rgba(240,168,196,.6));
}
.hk-av[data-frame="frame_lotus"]::before {
  background: conic-gradient(#f8c8dc, #fff0f6, #e07a9c, #fff0f6, #f8c8dc, #c9628a, #f8c8dc);
  animation-duration: 9s;
}

/* ---------- พญานาค (เกล็ด) ---------- */
.hk-av[data-frame="frame_naga"] {
  --hk-ring: #48c98a;
  filter: drop-shadow(0 0 8px rgba(72,201,138,.6));
}
.hk-av[data-frame="frame_naga"]::before {
  background:
    repeating-conic-gradient(from 0deg, #7be3a0 0deg 12deg, #1f7a4d 12deg 24deg);
  animation-duration: 12s;
}

/* ---------- จักรวาล (ดาวเคลื่อนไหว) ---------- */
.hk-av[data-frame="frame_cosmos"] {
  --hk-ring: #9370db;
  filter: drop-shadow(0 0 10px rgba(147,112,219,.7));
}
.hk-av[data-frame="frame_cosmos"]::before {
  background:
    conic-gradient(#6a5acd, #b39ddb, #1a1a2e, #e8d9ff, #9370db, #241b4a, #6a5acd);
  animation-duration: 4.5s;
}
/* ประกายดาวรอบกรอบจักรวาล */
.hk-av[data-frame="frame_cosmos"] .hk-av-spark {
  position: absolute; inset: -22%; z-index: 3; pointer-events: none;
  background:
    radial-gradient(circle at 12% 20%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 88% 30%, #fff 0 1.4px, transparent 2px),
    radial-gradient(circle at 70% 88%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 25% 82%, #fff 0 1.3px, transparent 2px);
  animation: hkTwinkle 2.6s ease-in-out infinite alternate;
}
@keyframes hkTwinkle { from { opacity: .35; } to { opacity: 1; } }

/* ---------- ตราสัญลักษณ์ข้างชื่อ ---------- */
.hk-badge-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35em; height: 1.35em; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d8, #e8c874 60%, #a07a16);
  box-shadow: 0 1px 4px rgba(160,122,22,.45);
  font-size: .82em; line-height: 1; vertical-align: middle;
  margin-right: 3px;
}

/* ---------- ฉายา ---------- */
.hk-title-tag {
  display: inline-block; font-size: .72em; padding: 1px 9px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(201,168,76,.22), rgba(201,168,76,.10));
  border: 1px solid rgba(201,168,76,.45); color: #8a6d1f;
  margin-left: 5px; vertical-align: middle; white-space: nowrap;
}

/* ---------- ตู้โชว์ของรางวัล ---------- */
.hk-case { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.hk-case-item {
  border: 1px solid var(--rule-soft,#e5ddca); border-radius: 14px; padding: 14px 8px 12px;
  text-align: center; background: var(--paper,#fff); position: relative; transition: transform .15s;
}
.hk-case-item:hover { transform: translateY(-2px); }
.hk-case-item.equipped { border-color: var(--gold,#c9a84c); background: rgba(201,168,76,.07); }
.hk-case-tag {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-size: .62rem; background: var(--gold,#c9a84c); color: #fff; padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}
.hk-case-name { font-size: .78rem; font-weight: 600; margin-top: 9px; line-height: 1.4; }
.hk-case-exp { font-size: .66rem; color: var(--ink-soft,#999); margin-top: 3px; }
.hk-case-btn {
  margin-top: 8px; width: 100%; padding: 5px; border-radius: 7px; cursor: pointer;
  font-family: inherit; font-size: .72rem; border: 1px solid var(--rule-soft,#ddd); background: transparent; color: var(--ink,#333);
}
.hk-case-btn.on { background: var(--gold,#c9a84c); color: #fff; border-color: var(--gold,#c9a84c); }


/* รูปโปรไฟล์ใหญ่ (หน้า /profile) — วงแหวนหนาขึ้น */
.profile-avatar.hk-av[data-frame] { --hk-ring-w: 7px; border-color: transparent !important; }
.profile-avatar.hk-av[data-frame] .avatar-upload-overlay { z-index: 3; }


/* ===== กรอบแบบภาพซ้อนทับ (PNG โปร่งใส) — ใช้ .hk-av[data-frame-url] ===== */
.hk-av { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.hk-av-img {
  position: absolute; left: 50%; top: 50%;
  width: 205%; height: 205%; max-width: none; max-height: none;            /* รูปโปรไฟล์ = 49% ของกรอบ */
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 3;
  image-rendering: -webkit-optimize-contrast;
}
/* กรอบภาพไม่ต้องใช้วงแหวน CSS เดิม */
.hk-av.has-img::before, .hk-av.has-img::after { display: none !important; }
.hk-av.has-img { overflow: visible !important; border-color: transparent !important; box-shadow: none !important; }


/* ===== แก้กรอบภาพให้ซ้อนทับเสมอ (specificity สูงกว่ากฎ .hk-av > img) ===== */
.hk-av img.hk-av-img,
.profile-avatar img.hk-av-img {
  position: absolute !important;
  left: 50% !important; top: 50% !important;
  width: 205% !important; height: 205% !important;
  max-width: none !important; max-height: none !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: none !important;
  z-index: 3;
  pointer-events: none;
}
/* รูปโปรไฟล์หน้า /profile ต้องคงการจัดกึ่งกลางเดิมไว้ */
.profile-avatar.hk-av { display: flex !important; margin: 0 auto 16px !important; overflow: visible !important; }
.profile-avatar.has-img { border: none !important; box-shadow: none !important; background: rgba(201,168,76,.12); }
.profile-avatar.has-img > img:not(.hk-av-img) { border-radius: 50%; }