/* skins.css — Kiểu cho badge sự kiện + hiệu ứng trang trí nhẹ của skins.js.
   KHÔNG chứa màu của từng skin (màu nằm trong skins.js, ghi đè qua
   CSS custom properties). Trang trí nhẹ, không ảnh hưởng layout/tốc độ. */

/* Badge sự kiện: góc dưới-trái (nút "Gọi Sư Trụ Trì" ở góc dưới-phải). */
#ppSkinBadge{position:fixed;left:16px;bottom:16px;z-index:1191;display:flex;align-items:center;gap:2px;
  max-width:calc(100vw - 32px);background:var(--panel);color:var(--ink);
  border:1px solid var(--gold-soft);border-radius:999px;padding:4px 4px 4px 12px;
  font-family:"Be Vietnam Pro",system-ui,sans-serif;box-shadow:0 6px 20px rgba(60,42,16,.22)}
#ppSkinBadge .pp-badge-main{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;
  background:none;border:0;padding:4px 2px;color:inherit;cursor:pointer;
  font:600 13px/1.3 "Be Vietnam Pro",system-ui,sans-serif;text-align:left}
#ppSkinBadge .pp-badge-tx{white-space:nowrap}
#ppSkinBadge .pp-badge-per{display:none;flex-basis:100%;font-weight:500;font-size:12px;color:var(--ink-soft)}
#ppSkinBadge .pp-badge-greet{display:none;flex-basis:100%;font-weight:600;font-size:12px;font-style:italic;color:var(--gold)}
#ppSkinBadge.open{border-radius:14px}
#ppSkinBadge.open .pp-badge-per{display:block}
#ppSkinBadge.open .pp-badge-greet{display:block}
#ppSkinBadge .pp-badge-x{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink-soft);font-size:11px;line-height:1;cursor:pointer;padding:0}
#ppSkinBadge .pp-badge-x:hover{color:var(--lacquer);border-color:var(--lacquer)}

/* Hiệu ứng rơi nhẹ (hoa, lá, tuyết...): phủ toàn màn hình, không bắt chuột. */
#ppSkinDecor{position:fixed;inset:0;z-index:2000;pointer-events:none;overflow:hidden}
#ppSkinDecor .pp-fall{position:absolute;top:-8vh;opacity:.7;
  animation-name:ppFall;animation-timing-function:linear;animation-iteration-count:infinite;
  will-change:transform}
@keyframes ppFall{0%{transform:translateY(-8vh) rotate(0deg)}
  100%{transform:translateY(108vh) rotate(300deg)}}

/* Đèn lồng treo 2 góc trên (chỉ skin Tết). */
#ppSkinCorners{position:fixed;inset:0 0 auto 0;z-index:2000;pointer-events:none}
#ppSkinCorners .pp-corner{position:absolute;top:0;font-size:34px;line-height:1;
  animation:ppSway 3.2s ease-in-out infinite alternate;transform-origin:top center}
#ppSkinCorners .pp-corner.l{left:10px}
#ppSkinCorners .pp-corner.r{right:10px}
@keyframes ppSway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}

@media (max-width:640px){
  #ppSkinBadge{left:12px;bottom:12px}
  #ppSkinBadge .pp-badge-main{font-size:12px}
  #ppSkinCorners .pp-corner{font-size:26px}
}
/* Tôn trọng người dùng tắt chuyển động. */
@media (prefers-reduced-motion: reduce){
  #ppSkinDecor .pp-fall,#ppSkinCorners .pp-corner{animation:none;display:none}
}