/* ═══════════════════════════════════════════════════════════════
   Poring — วาดด้วย CSS ล้วน ไม่ใช้รูปภาพเลย
   โครง: .poring > .poring__body ( .__shine .__eye .__mouth ) + .__shadow
   สีเปลี่ยนตาม modifier (.poring--pink / --green / --blue ...)
   ═══════════════════════════════════════════════════════════════ */

.poring {
  --body: #ff9ac6;
  --body-dark: #ff5f9e;
  --body-deep: #d92f74;
  --line: #40202f;
  --size: 74px;
  position: relative;
  width: var(--size);
  height: var(--size);
  flex: 0 0 auto;
  display: inline-block;   /* ใช้กับทั้ง <div> และ <span> ได้ */
  transform-style: preserve-3d;
}
.poring--xs { --size: 30px; }
.poring--sm { --size: 54px; }
.poring--lg { --size: 96px; }

/* ตัวหลัก: ก้อนวุ้นกลม ๆ มีไฮไลต์ด้านบนซ้าย */
.poring__body {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 86%;
  height: 78%;
  transform: translateX(-50%);
  border-radius: 50% 50% 46% 46% / 52% 52% 44% 44%;
  background:
    radial-gradient(ellipse 60% 50% at 32% 26%, #fff9 0 18%, #fff0 60%),
    radial-gradient(ellipse 90% 90% at 40% 30%, var(--body) 0 42%, var(--body-dark) 72%, var(--body-deep) 100%);
  box-shadow:
    inset 0 -6px 12px #0003,
    inset 0 4px 10px #ffffff5c,
    0 0 0 3px var(--line),
    0 6px 14px #0000003d;
  animation: poring-squish 1.15s ease-in-out infinite;
  will-change: transform;
}

/* ประกายวุ้น */
.poring__shine {
  position: absolute;
  left: 16%;
  top: 12%;
  width: 30%;
  height: 22%;
  border-radius: 50%;
  background: linear-gradient(160deg, #ffffffe0, #ffffff30);
  transform: rotate(-18deg);
  filter: blur(.3px);
  animation: poring-shine 3s ease-in-out infinite;
}

/* ตา — กลมดำ มีจุดขาว กระพริบเป็นจังหวะ */
.poring__eye {
  position: absolute;
  top: 34%;
  width: 15%;
  height: 26%;
  background: #241019;
  border-radius: 48% 48% 50% 50%;
  animation: poring-blink 4.4s infinite;
}
.poring__eye::after {
  content: "";
  position: absolute;
  top: 14%;
  left: 18%;
  width: 42%;
  height: 32%;
  background: #fff;
  border-radius: 50%;
}
.poring__eye--l { left: 22%; }
.poring__eye--r { right: 22%; animation-delay: .06s; }

/* ปากยิ้มกว้าง เปิดตามจังหวะเด้ง */
.poring__mouth {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 30%;
  height: 16%;
  transform: translateX(-50%);
  background: #4d1526;
  border-radius: 12% 12% 60% 60%;
  box-shadow: inset 0 -3px 0 #ff7ba0a8;
  animation: poring-mouth 1.15s ease-in-out infinite;
}
.poring__mouth::after { /* ลิ้น */
  content: "";
  position: absolute;
  left: 28%;
  bottom: 0;
  width: 44%;
  height: 46%;
  background: #ff87ab;
  border-radius: 50% 50% 40% 40%;
}

/* เงาใต้ตัว — ยุบ/ขยายสวนทางกับการเด้ง */
.poring__shadow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 62%;
  height: 9%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, #00000059, #0000 70%);
  border-radius: 50%;
  animation: poring-shadow 1.15s ease-in-out infinite;
}

/* ── ท่าเด้ง (เปิดเมื่อออนไลน์) ── */
.poring--hop { animation: poring-hop 1.15s cubic-bezier(.3,.8,.4,1) infinite; }

/* ═══════ สายพันธุ์ ═══════ */
.poring--pink   { --body:#ff9ac6; --body-dark:#ff5f9e; --body-deep:#cf2e6d; }
.poring--orange { --body:#ffd07a; --body-dark:#ffa22b; --body-deep:#e0700a; }
.poring--green  { --body:#b6ec7c; --body-dark:#78cc3c; --body-deep:#3f8d1a; }
.poring--blue   { --body:#a8e2ff; --body-dark:#4fb9f0; --body-deep:#1a7cc0; }
.poring--gold   { --body:#fff6dd; --body-dark:#ffd98a; --body-deep:#e0a83c; }
.poring--dark   { --body:#a05b86; --body-dark:#6b2f55; --body-deep:#3d1630; }
.poring--ghost  { --body:#e9f3ff; --body-dark:#b7cbe6; --body-deep:#8ea6c6; }

/* ── Angeling: มีปีก + วงแหวนเทวดา ── */
.poring__halo {
  position: absolute;
  left: 50%;
  top: -6%;
  width: 46%;
  height: 13%;
  transform: translateX(-50%) rotateX(62deg);
  border: 3px solid #ffe27a;
  border-radius: 50%;
  box-shadow: 0 0 10px #ffd75e, inset 0 0 6px #fff;
  animation: halo-bob 2.4s ease-in-out infinite;
}
.poring__wing {
  position: absolute;
  top: 34%;
  width: 30%;
  height: 34%;
  background: linear-gradient(180deg, #fff, #dbeaff);
  border-radius: 60% 20% 60% 20%;
  box-shadow: 0 0 0 2px #b9cbe6a0;
  z-index: 0;
}
.poring__wing--l { left: -17%; transform-origin: right center; animation: wing-flap-l .5s ease-in-out infinite alternate; }
.poring__wing--r { right: -17%; border-radius: 20% 60% 20% 60%; transform-origin: left center; animation: wing-flap-r .5s ease-in-out infinite alternate; }

/* ── Deviling: เขา + หางแหลม ── */
.poring__horn {
  position: absolute;
  top: 2%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 13px solid #d94f6e;
  filter: drop-shadow(0 0 2px #40202f);
}
.poring__horn--l { left: 20%; transform: rotate(-18deg); }
.poring__horn--r { right: 20%; transform: rotate(18deg); }
.poring__tail {
  position: absolute;
  right: -8%;
  bottom: 18%;
  width: 30%;
  height: 6%;
  background: #d94f6e;
  border-radius: 40%;
  transform-origin: left center;
  animation: tail-wag 1.6s ease-in-out infinite;
}
.poring__tail::after {
  content: "";
  position: absolute;
  right: -6px;
  top: -4px;
  border-left: 8px solid #d94f6e;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* ── Ghostring: โปร่งแสง ลอย ตากากบาท (ใช้ตอนเว็บล่ม) ── */
.poring.is-down .poring__body {
  animation: ghost-float 3s ease-in-out infinite;
  filter: grayscale(.55);
  opacity: .82;
  background:
    radial-gradient(ellipse 60% 50% at 32% 26%, #ffffffb0 0 18%, #fff0 60%),
    radial-gradient(ellipse 90% 90% at 40% 30%, #eef4ff 0 42%, #c3d3e8 72%, #93a8c4 100%);
  box-shadow: inset 0 -6px 12px #0002, 0 0 0 3px #5c6b82, 0 0 22px #b9cde8b3;
}
.poring.is-down { animation: ghost-rise 3s ease-in-out infinite; }
.poring.is-down .poring__shadow { opacity: .18; animation: none; }
.poring.is-down .poring__eye {
  animation: none;
  background: transparent;
  width: 17%;
  height: 17%;
}
.poring.is-down .poring__eye::after { display: none; }
.poring.is-down .poring__eye::before,
.poring.is-down .poring__eye__x {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, transparent 43%, #3d2233 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #3d2233 43% 57%, transparent 57%);
}
.poring.is-down .poring__mouth {
  animation: none;
  height: 11%;
  width: 22%;
  border-radius: 60% 60% 12% 12%;
  top: 64%;
}
.poring.is-down .poring__mouth::after { display: none; }
.poring.is-down .poring__wing,
.poring.is-down .poring__halo,
.poring.is-down .poring__horn,
.poring.is-down .poring__tail { opacity: .25; filter: grayscale(1); }
/* หางผีเป็นริ้ว ๆ */
.poring.is-down .poring__body::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: 70%;
  height: 20%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 20% 0, #dfe9f8cc 0 40%, #fff0 41%),
    radial-gradient(circle at 50% 0, #dfe9f8cc 0 40%, #fff0 41%),
    radial-gradient(circle at 80% 0, #dfe9f8cc 0 40%, #fff0 41%);
  animation: ghost-tail 1.4s ease-in-out infinite;
}

/* ── เตือนเหลือง: มีหยดเหงื่อ + เด้งอืด ── */
.poring.is-warn .poring__body { animation-duration: 2.1s; }
.poring.is-warn { animation-duration: 2.1s; }
.poring.is-warn::after {
  content: "";
  position: absolute;
  right: 4%;
  top: 16%;
  width: 11%;
  height: 15%;
  background: linear-gradient(180deg, #cdeeff, #62b8ea);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  animation: sweat 2.1s ease-in-out infinite;
}

/* ── โหมดหลับ: โปรเจกต์ที่เคยขึ้นแล้วแต่ปิดไปแล้ว ── */
.poring.is-archived { animation: none; }
.poring.is-archived .poring__body {
  animation: sleep-breathe 3.6s ease-in-out infinite;
  filter: grayscale(.7) brightness(.95);
}
.poring.is-archived .poring__eye {
  animation: none;
  height: 5%;
  top: 44%;
  border-radius: 50%;
}
.poring.is-archived .poring__eye::after { display: none; }
.poring.is-archived .poring__mouth { animation: none; height: 10%; width: 20%; }
.poring.is-archived .poring__mouth::after { display: none; }
.poring.is-archived .poring__shadow { animation: none; opacity: .35; }
.poring.is-archived::after { /* ตัว Z ลอยขึ้นเวลานอน */
  content: "z";
  position: absolute;
  right: 2%;
  top: 6%;
  font-family: var(--font-pixel, monospace);
  font-size: 11px;
  color: #5c6b82;
  animation: zzz 2.6s ease-in-out infinite;
}

/* ── โหมดไข่: โปรเจกต์ที่ยังปั้นอยู่ ── */
.poring.is-dev .poring__body {
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  background:
    radial-gradient(ellipse 60% 50% at 32% 24%, #fff9 0 18%, #fff0 60%),
    radial-gradient(ellipse 90% 90% at 40% 30%, #fff6ea 0 46%, #ffe2c4 74%, #e8b98c 100%);
  animation: egg-wiggle 2.6s ease-in-out infinite;
}
.poring.is-dev .poring__eye,
.poring.is-dev .poring__mouth { opacity: 0; }
.poring.is-dev { animation: none; }
.poring.is-dev .poring__body::before { /* รอยร้าว */
  content: "";
  position: absolute;
  left: 18%;
  top: 44%;
  width: 64%;
  height: 3px;
  background: linear-gradient(90deg, #0000 0 6%, #b98155 6% 14%, #0000 14% 22%, #b98155 22% 34%, #0000 34% 42%, #b98155 42% 58%, #0000 58% 66%, #b98155 66% 80%, #0000 80%);
  clip-path: polygon(0 50%, 8% 0, 18% 100%, 30% 0, 42% 100%, 55% 0, 68% 100%, 80% 0, 92% 100%, 100% 40%);
}
.poring.is-dev .poring__shadow { animation: none; }

/* ═══════ คีย์เฟรม ═══════ */
@keyframes poring-hop {
  0%, 62%, 100% { transform: translateY(0); }
  20% { transform: translateY(-26%); }
  40% { transform: translateY(-4%); }
}
@keyframes poring-squish {
  0%, 100% { transform: translateX(-50%) scale(1.04, .94); }
  18%      { transform: translateX(-50%) scale(.9, 1.12); }
  48%      { transform: translateX(-50%) scale(1.08, .92); }
  70%      { transform: translateX(-50%) scale(.98, 1.02); }
}
@keyframes poring-shadow {
  0%, 100% { transform: translateX(-50%) scale(1, 1); opacity: .55; }
  20%      { transform: translateX(-50%) scale(.6, .7); opacity: .25; }
}
@keyframes poring-mouth {
  0%, 100% { height: 16%; }
  20%      { height: 22%; }
}
@keyframes poring-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.08); }
}
@keyframes poring-shine {
  0%, 100% { opacity: .85; }
  50%      { opacity: .35; }
}
@keyframes halo-bob {
  0%, 100% { transform: translateX(-50%) rotateX(62deg) translateY(0); opacity: 1; }
  50%      { transform: translateX(-50%) rotateX(62deg) translateY(-4px); opacity: .75; }
}
@keyframes wing-flap-l { from { transform: rotate(8deg); } to { transform: rotate(-22deg); } }
@keyframes wing-flap-r { from { transform: rotate(-8deg); } to { transform: rotate(22deg); } }
@keyframes tail-wag { 0%,100% { transform: rotate(6deg); } 50% { transform: rotate(-16deg); } }
@keyframes ghost-float {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1, 1); }
  50%      { transform: translateX(-50%) translateY(-6%) scale(1.02, .98); }
}
@keyframes ghost-rise {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8%); }
}
@keyframes ghost-tail {
  0%, 100% { transform: translateX(-50%) scaleY(1); opacity: .8; }
  50%      { transform: translateX(-50%) scaleY(.5); opacity: .45; }
}
@keyframes sweat {
  0%, 55%  { transform: translateY(0); opacity: 0; }
  65%      { opacity: 1; }
  100%     { transform: translateY(190%); opacity: 0; }
}
@keyframes sleep-breathe {
  0%, 100% { transform: translateX(-50%) scale(1, .97); }
  50%      { transform: translateX(-50%) scale(1.03, 1.02); }
}
@keyframes zzz {
  0%   { transform: translate(0, 0) scale(.7); opacity: 0; }
  30%  { opacity: .9; }
  100% { transform: translate(10px, -22px) scale(1.25); opacity: 0; }
}
@keyframes egg-wiggle {
  0%, 72%, 100% { transform: translateX(-50%) rotate(0); }
  76%  { transform: translateX(-50%) rotate(-7deg); }
  82%  { transform: translateX(-50%) rotate(6deg); }
  88%  { transform: translateX(-50%) rotate(-4deg); }
  93%  { transform: translateX(-50%) rotate(2deg); }
}

/* ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว: คงตัวละครไว้แต่หยุดเด้ง */
@media (prefers-reduced-motion: reduce) {
  .poring, .poring *, .poring::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}