/* ==========================================================================
   Cat Runner — น้องแมวนักวิ่ง (Interactive Running Character)
   ใช้คู่กับ cat-runner.js

   - ตัวละครเป็น SVG แบบ inline (สร้างโดย JS) ขยับด้วย CSS transform → ไม่มีไฟล์ภาพให้โหลดเพิ่ม
   - ทุกชั้นเป็น pointer-events:none  คลิก/โฮเวอร์ทะลุไปถึงปุ่มและลิงก์ด้านล่างเสมอ
   - สีธีม Cyan #33FFF3 (อ้างค่าตายตัวเพื่อไม่ขึ้นกับ --hue ของธีมหลัก)
   ========================================================================== */

:root{
  --cat-cy:#33FFF3;
  --cat-cy-soft:#80FFF9;
  --cat-ink:#031a1f;
  --cat-panel:rgba(6,22,28,.95);
  --cat-line:rgba(51,255,243,.42);
}

/* ---------- ชั้นแสดงตัวละคร (เต็มจอ แต่คลิกทะลุ) ---------- */
.cat-layer{
  position:fixed;
  inset:0;
  z-index:25;                 /* เหนือเนื้อหา/header(20)  แต่ต่ำกว่าเพลเยอร์(30) และปุ่มกลับขึ้นบน(29) */
  overflow:hidden;
  pointer-events:none;
  contain:layout style;
  transition:opacity .35s ease,visibility .35s;
}
.cat-layer.is-hidden{opacity:0;visibility:hidden}

.cat-mover{
  position:absolute;
  left:0;
  top:0;
  width:var(--cat-w,114px);
  height:var(--cat-h,124px);
  will-change:transform;
  --rd:.56s;                  /* ระยะเวลา 1 รอบก้าววิ่ง (JS ปรับตามความเร็ว) */
}
.cat-flip{
  position:absolute;
  inset:0;
  transition:transform .16s ease;
}
.cat-hop,.cat-spin{position:absolute;inset:0}
.cat-spin{transform-origin:50% 62%}
.cat-svg{display:block;width:100%;height:100%;overflow:visible}

/* ออร่าเรืองแสงด้านหลัง (ใช้ gradient ไม่ใช้ filter เพื่อประหยัดทรัพยากร) */
.cat-aura{
  position:absolute;
  left:-34%;
  top:-12%;
  width:168%;
  height:132%;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(51,255,243,.26),rgba(51,255,243,.09) 58%,transparent 100%);
  animation:cr-aura 2.8s ease-in-out infinite alternate;
}
@keyframes cr-aura{from{opacity:.55;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}

/* ---------- ประกายเวทมนตร์ ---------- */
.cat-sparks{position:absolute;inset:0}
.cat-spark{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  font-size:14px;
  line-height:1;
  color:var(--cat-cy);
  text-shadow:0 0 6px var(--cat-cy),0 0 14px rgba(51,255,243,.7);
  user-select:none;
}
.cat-spark.is-white{color:#e9fffd}
.cat-spark.is-pink{color:#ffb3d1;text-shadow:0 0 6px #ff6fa8,0 0 14px rgba(255,111,168,.65)}
.cat-spark.is-sky{color:#7fd8ff;text-shadow:0 0 6px #35b7ff,0 0 14px rgba(53,183,255,.7)}

/* ---------- ลูกโป่งข้อความ ---------- */
.cat-bubble{
  position:absolute;
  left:50%;
  bottom:calc(100% - 2px);
  width:max-content;
  max-width:min(236px,calc(100vw - 24px));
  padding:8px 13px;
  border:1px solid rgba(51,255,243,.6);
  border-radius:14px;
  background:var(--cat-panel);
  box-shadow:0 0 18px rgba(51,255,243,.28);
  color:#ebfffe;
  font-size:13px;
  line-height:1.5;
  text-align:center;
  text-shadow:0 0 10px rgba(51,255,243,.35);
  opacity:0;
  visibility:hidden;
  transform:translate(calc(-50% + var(--bubble-shift,0px)),6px) scale(.94);
  transform-origin:50% 100%;
  transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility .22s;
}
.cat-bubble::after{
  content:"";
  position:absolute;
  left:calc(50% - var(--bubble-shift,0px));
  top:100%;
  width:9px;
  height:9px;
  margin:-5px 0 0 -5px;
  border:solid rgba(51,255,243,.6);
  border-width:0 1px 1px 0;
  background:var(--cat-panel);
  transform:rotate(45deg);
}
.cat-bubble.is-on{opacity:1;visibility:visible;transform:translate(calc(-50% + var(--bubble-shift,0px)),0) scale(1)}
/* เลนบน: ให้ลูกโป่งอยู่ใต้ตัวละคร (ไม่ชน header) */
.cat-mover[data-lane="top"] .cat-bubble{bottom:auto;top:calc(100% - 6px);transform-origin:50% 0}
.cat-mover[data-lane="top"] .cat-bubble::after{top:auto;bottom:100%;margin:0 0 -5px -5px;border-width:1px 0 0 1px}

html.cat-hover{cursor:pointer}

/* ==========================================================================
   ตัวละคร (rig)
   ชิ้นส่วนทั้งหมด (หัว/หู/ผม/หาง/ลำตัว/แขน/ขา) ถูก cat-runner.js ขยับทุกเฟรมผ่านแอตทริบิวต์ transform
   (สปริงฟิสิกส์ของหาง/ผม + วงจรก้าววิ่ง)  ที่นี่เหลือเฉพาะท่าตีลังกาและสไตล์เสริม
   ========================================================================== */

.cat-svg image{pointer-events:none}
.cat-part{will-change:transform}

/* คลิกพิเศษ (ทุกครั้งที่ 4): ตีลังกากลางอากาศ */
.cat-mover[data-state="twirl"] .cat-spin{animation:cr-twirl .95s cubic-bezier(.4,0,.2,1) 1}
@keyframes cr-twirl{
  0%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-34px) rotate(180deg)}
  100%{transform:translateY(0) rotate(360deg)}
}

@media (prefers-reduced-motion:reduce){
  .cat-mover[data-state="twirl"] .cat-spin{animation:none}
}

/* ==========================================================================
   ปุ่มตั้งค่า + แผงตั้งค่า
   ========================================================================== */

.cat-fab{
  position:fixed;
  right:22px;
  bottom:76px;                 /* เหนือปุ่มกลับขึ้นบน (bottom:22 + สูง 42 + ช่องไฟ 12) */
  z-index:31;
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  padding:0;
  border:1px solid var(--cat-line);
  border-radius:50%;
  background:rgba(6,22,28,.92);
  box-shadow:0 0 18px rgba(51,255,243,.2);
  color:var(--cat-cy-soft);
  cursor:pointer;
  transition:border-color .2s,box-shadow .2s,transform .2s,opacity .2s;
}
.cat-fab:hover{border-color:rgba(51,255,243,.8);box-shadow:0 0 22px rgba(51,255,243,.4);transform:translateY(-2px)}
.cat-fab[aria-expanded="true"]{border-color:var(--cat-cy);box-shadow:0 0 24px rgba(51,255,243,.45)}
.cat-fab svg{width:24px;height:24px}
.cat-fab.is-off{opacity:.62}
.cat-fab.is-off svg{opacity:.7}
.cat-fab:focus-visible,
.cat-panel button:focus-visible{outline:2px solid var(--cat-cy-soft);outline-offset:3px}

.cat-panel{
  position:fixed;
  right:22px;
  bottom:126px;
  z-index:32;
  width:min(290px,calc(100vw - 28px));
  max-height:calc(100vh - 150px);
  max-height:calc(100dvh - 150px);
  overflow-y:auto;
  padding:16px 16px 14px;
  border:1px solid var(--cat-line);
  border-radius:18px;
  background:var(--cat-panel);
  box-shadow:0 0 30px rgba(51,255,243,.2),0 18px 44px rgba(0,0,0,.45);
  backdrop-filter:blur(14px);
  color:#d9fffc;
  font-size:14px;
  line-height:1.5;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px) scale(.97);
  transform-origin:100% 100%;
  transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility .22s;
}
.cat-panel.is-open{opacity:1;visibility:visible;transform:none}

.cat-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cat-title{margin:0;color:#fff;font-size:15px;font-weight:500;letter-spacing:.02em}
.cat-title small{display:block;color:rgba(190,255,251,.62);font-size:11px;font-weight:300;letter-spacing:.14em;text-transform:uppercase}
.cat-close{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  padding:0;
  border:1px solid rgba(51,255,243,.28);
  border-radius:50%;
  background:transparent;
  color:var(--cat-cy-soft);
  font:inherit;
  font-size:14px;
  cursor:pointer;
}
.cat-close:hover{background:rgba(51,255,243,.12)}

/* สวิตช์เปิด/ปิดตัวละคร */
.cat-switch{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:10px 12px;border:1px solid rgba(51,255,243,.2);border-radius:12px;background:rgba(51,255,243,.05);cursor:pointer}
.cat-switch input{position:absolute;width:1px;height:1px;opacity:0}
.cat-switch-ui{position:relative;flex:none;width:42px;height:24px;border:1px solid rgba(51,255,243,.4);border-radius:999px;background:rgba(255,255,255,.06);transition:background .2s,border-color .2s}
.cat-switch-ui::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#8fb9b6;transition:transform .25s cubic-bezier(.22,1,.36,1),background .2s,box-shadow .2s}
.cat-switch input:checked + .cat-switch-ui{border-color:var(--cat-cy);background:rgba(51,255,243,.22)}
.cat-switch input:checked + .cat-switch-ui::after{transform:translateX(18px);background:var(--cat-cy);box-shadow:0 0 10px var(--cat-cy)}
.cat-switch input:focus-visible + .cat-switch-ui{outline:2px solid var(--cat-cy-soft);outline-offset:3px}

/* กลุ่มตัวเลือก (radio แบบปุ่มแคปซูล) */
.cat-field{min-width:0;margin:0 0 10px;padding:0;border:0}
.cat-field legend{margin:0 0 5px;padding:0;color:rgba(190,255,251,.7);font-size:12px;letter-spacing:.06em}
.cat-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cat-seg label{position:relative;display:block;min-width:0}
.cat-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cat-seg span{
  display:grid;
  min-height:38px;
  place-items:center;
  border:1px solid rgba(51,255,243,.28);
  border-radius:10px;
  background:rgba(255,255,255,.03);
  color:#cffffb;
  font-size:13px;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
}
.cat-seg label:hover span{border-color:rgba(51,255,243,.6)}
.cat-seg input:checked + span{border-color:var(--cat-cy);background:linear-gradient(135deg,rgba(51,255,243,.95),rgba(15,231,215,.85));color:#02161b;font-weight:500;box-shadow:0 0 14px rgba(51,255,243,.35)}
.cat-seg input:focus-visible + span{outline:2px solid var(--cat-cy-soft);outline-offset:2px}

.cat-actions{display:flex;gap:8px;margin-top:12px}
.cat-actions button{
  flex:1;
  min-height:40px;
  padding:0 12px;
  border:1px solid rgba(51,255,243,.4);
  border-radius:999px;
  background:rgba(51,255,243,.08);
  color:#e6fffd;
  font:inherit;
  font-size:13px;
  cursor:pointer;
  transition:background .2s,border-color .2s,opacity .2s;
}
.cat-actions button:hover:not(:disabled){background:rgba(51,255,243,.18);border-color:var(--cat-cy)}
.cat-actions button:disabled{opacity:.45;cursor:not-allowed}
.cat-note{margin:10px 0 0;color:rgba(190,255,251,.6);font-size:12px;line-height:1.55}
.cat-note:empty{display:none}

@media(max-width:640px){
  .cat-fab{right:14px;bottom:132px;width:38px;height:38px}   /* เหนือปุ่มกลับขึ้นบน (bottom:84 + สูง 38 + ช่องไฟ 10) */
  .cat-panel{right:14px;bottom:182px;max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px)}
  .cat-bubble{font-size:12.5px;padding:7px 11px}
}