/* ==========================================================================
   Petly Virtual Pet — styles.
   Deliberately reuses the *same* CSS custom properties the Petly Modern
   theme itself defines on :root / html[data-theme="dark"] (--bg, --text,
   --accent, --surface, --radius-*, --shadow-*, --font, --border) instead of
   redeclaring a parallel palette — so this always looks like a native part
   of the theme, on the exact colors/radii/shadows/dark-mode the theme ships,
   and stays in sync automatically if the theme's palette ever changes.
   Safe fallbacks are included in case it's ever activated on another theme.
   ========================================================================== */

#petly-pet-root{
	direction: rtl;
	font-family: var(--font, 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif);
	color: var(--text, #1D1D1F);
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 0 40px;
}

.petly-pet-guest-note{
	direction: rtl;
	font-family: var(--font, 'Vazirmatn', sans-serif);
	background: var(--surface, rgba(255,255,255,.72));
	border: 1px solid var(--border, rgba(0,0,0,.06));
	border-radius: var(--radius-md, 20px);
	padding: 18px 20px;
	color: var(--text, #1D1D1F);
}
.petly-pet-guest-note a{ color: var(--accent-2, #0A84FF); font-weight: 700; }

#petly-pet-root *{ box-sizing: border-box; }
#petly-pet-root button{ font-family: inherit; }

/* ---------- Top bar: points balance ---------- */
.ppw-topbar{
	display:flex; align-items:center; justify-content:space-between;
	background: var(--surface, rgba(255,255,255,.72));
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid var(--border, rgba(0,0,0,.06));
	border-radius: var(--radius-lg, 28px);
	padding: 14px 20px;
	margin-bottom: 16px;
	box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.04));
}
.ppw-points{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px; }
.ppw-points .ppw-coin{ font-size:20px; }
.ppw-points-label{ font-size:12px; color: var(--text-secondary, #6E6E73); font-weight:500; }
.ppw-topbar-title{ font-weight:800; font-size:15px; }

/* ---------- Stage card ---------- */
.ppw-stage{
	position: relative;
	background: var(--surface, rgba(255,255,255,.72));
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid var(--border, rgba(0,0,0,.06));
	border-radius: var(--radius-lg, 28px);
	box-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,.08));
	padding: 28px 20px 22px;
	display: flex; flex-direction: column; align-items: center;
	overflow: hidden;
	min-height: 300px;
}
.ppw-stage::before, .ppw-stage::after{
	content:""; position:absolute; width:220px; height:220px; border-radius:50%;
	filter: blur(50px); opacity:.18; z-index:0; pointer-events:none;
}
.ppw-stage::before{ background: var(--accent, #FF6B4A); top:-90px; right:-70px; }
.ppw-stage::after{ background: var(--accent-2, #0A84FF); bottom:-100px; left:-80px; }

.ppw-pet-name{ position:relative; z-index:1; font-weight:800; font-size:19px; margin-bottom:2px; }
.ppw-pet-sub{ position:relative; z-index:1; font-size:12.5px; color: var(--text-secondary, #6E6E73); margin-bottom:6px; }

/* ---------- The cute pet itself (pure CSS, no images) ---------- */
.pp-pet-wrap{ position:relative; z-index:1; width:180px; height:180px; display:flex; align-items:center; justify-content:center; margin: 10px 0 6px; }
.pp-pet{
	--pp-color: #FF6B4A;
	--pp-dark: color-mix(in srgb, var(--pp-color) 78%, #000);
	--pp-light: color-mix(in srgb, var(--pp-color) 55%, #fff);
	position: relative;
	width: 132px; height: 132px;
	transform: scale( var(--pp-scale, 1) );
	animation: ppIdleBob 2.6s ease-in-out infinite;
}
.pp-pet[data-size="small"]{ --pp-scale: 0.8; }
.pp-pet[data-size="medium"]{ --pp-scale: 1; }
.pp-pet[data-size="large"]{ --pp-scale: 1.22; }

@keyframes ppIdleBob{ 0%,100%{ transform: scale(var(--pp-scale,1)) translateY(0); } 50%{ transform: scale(var(--pp-scale,1)) translateY(-6px); } }

.pp-tail{
	position:absolute; width:34px; height:34px; background: var(--pp-color); border-radius: 50% 50% 50% 4px;
	bottom: 46px; right: -14px; transform-origin: bottom right;
	animation: ppTailWag 1s ease-in-out infinite;
	box-shadow: inset -4px -4px 0 rgba(0,0,0,.06);
}
@keyframes ppTailWag{ 0%,100%{ transform: rotate(-12deg);} 50%{ transform: rotate(18deg);} }

.pp-body{
	position:absolute; inset: 22px 0 0 0; margin:auto; width:112px; height:100px;
	background: var(--pp-color);
	border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
	box-shadow: inset 0 -14px 18px rgba(0,0,0,.08);
}
.pp-belly{
	position:absolute; left:50%; bottom:6px; transform: translateX(-50%);
	width:58px; height:46px; background: var(--pp-light); border-radius:50%; opacity:.85;
}

.pp-head{
	position:absolute; top:0; left:50%; transform: translateX(-50%);
	width: 104px; height: 92px; background: var(--pp-color);
	border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
	box-shadow: inset 0 -10px 14px rgba(0,0,0,.06);
	z-index:2;
}

.pp-earL, .pp-earR{ position:absolute; top:-10px; width:34px; height:44px; background: var(--pp-color); z-index:1; }
.pp-earL{ left:2px; } .pp-earR{ right:2px; }

/* Dog: floppy rounded ears */
.pp-pet[data-species="dog"] .pp-earL{ border-radius: 40% 60% 60% 40%/70% 60% 40% 30%; transform: rotate(-14deg); }
.pp-pet[data-species="dog"] .pp-earR{ border-radius: 60% 40% 40% 60%/60% 70% 30% 40%; transform: rotate(14deg); }

/* Cat: pointed triangular ears + inner pink */
.pp-pet[data-species="cat"] .pp-earL{ clip-path: polygon(0% 100%, 100% 100%, 20% 0%); width:30px; height:34px; top:-16px; }
.pp-pet[data-species="cat"] .pp-earR{ clip-path: polygon(100% 100%, 0% 100%, 80% 0%); width:30px; height:34px; top:-16px; }
.pp-pet[data-species="cat"] .pp-earL::after, .pp-pet[data-species="cat"] .pp-earR::after{
	content:""; position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
	width:12px; height:16px; background: var(--pp-light); clip-path: polygon(0% 100%, 100% 100%, 30% 0%);
}
.pp-pet[data-species="cat"] .pp-whiskerL, .pp-pet[data-species="cat"] .pp-whiskerR{
	position:absolute; top:56px; width:26px; height:2px; background: rgba(0,0,0,.25); z-index:3; border-radius:2px;
}
.pp-pet[data-species="cat"] .pp-whiskerL{ left:-18px; } .pp-pet[data-species="cat"] .pp-whiskerR{ right:-18px; }
.pp-pet[data-species="cat"] .pp-whiskerL::before, .pp-pet[data-species="cat"] .pp-whiskerL::after,
.pp-pet[data-species="cat"] .pp-whiskerR::before, .pp-pet[data-species="cat"] .pp-whiskerR::after{
	content:""; position:absolute; width:24px; height:2px; background: rgba(0,0,0,.2); border-radius:2px; left:0;
}
.pp-pet[data-species="cat"] .pp-whiskerL::before{ top:-7px; } .pp-pet[data-species="cat"] .pp-whiskerL::after{ top:7px; }
.pp-pet[data-species="cat"] .pp-whiskerR::before{ top:-7px; } .pp-pet[data-species="cat"] .pp-whiskerR::after{ top:7px; }
.pp-pet[data-species="cat"] .pp-tail{ border-radius: 20px; width:16px; height:50px; bottom:24px; right:2px; transform: rotate(18deg); animation: ppTailWagSlow 1.8s ease-in-out infinite; }
@keyframes ppTailWagSlow{ 0%,100%{ transform: rotate(10deg);} 50%{ transform: rotate(24deg);} }

/* Bird: small wing tufts instead of ears, pointy beak, no tail-wag (wing flap instead) */
.pp-pet[data-species="bird"] .pp-earL, .pp-pet[data-species="bird"] .pp-earR{ display:none; }
.pp-pet[data-species="bird"] .pp-wingL, .pp-pet[data-species="bird"] .pp-wingR{
	position:absolute; top:30px; width:30px; height:40px; background: var(--pp-dark); border-radius: 60% 40% 50% 50%/70% 60% 40% 30%; z-index:3;
	animation: ppWingFlap 1.4s ease-in-out infinite;
}
.pp-pet[data-species="bird"] .pp-wingL{ left:-10px; transform-origin: top right; }
.pp-pet[data-species="bird"] .pp-wingR{ right:-10px; transform-origin: top left; animation-delay:.15s; }
@keyframes ppWingFlap{ 0%,100%{ transform: rotate(0deg); } 50%{ transform: rotate(-18deg); } }
.pp-pet[data-species="bird"] .pp-tail{
	background: var(--pp-dark); width:26px; height:20px; bottom:52px; right:-18px; border-radius: 4px 40% 40% 4px; animation:none;
}
.pp-pet[data-species="bird"] .pp-beak{
	position:absolute; top:56px; left:50%; transform: translateX(-50%);
	width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent;
	border-top: 10px solid #FFB020; z-index:4;
}
.pp-pet:not([data-species="bird"]) .pp-beak,
.pp-pet:not([data-species="bird"]) .pp-wingL,
.pp-pet:not([data-species="bird"]) .pp-wingR{ display:none; }

/* Face: eyes / blush / mouth — shared across species */
.pp-face{ position:absolute; top:34px; left:50%; transform:translateX(-50%); width:80px; height:40px; z-index:5; }
.pp-eyeL, .pp-eyeR{
	position:absolute; top:4px; width:16px; height:18px; background:#20232a; border-radius:50%;
	animation: ppBlink 4.2s ease-in-out infinite;
}
.pp-eyeL{ left:8px; } .pp-eyeR{ right:8px; }
.pp-eyeL::after, .pp-eyeR::after{ content:""; position:absolute; top:3px; left:3px; width:5px; height:5px; background:#fff; border-radius:50%; }
@keyframes ppBlink{ 0%,92%,100%{ transform: scaleY(1);} 96%{ transform: scaleY(0.1);} }

.pp-blushL, .pp-blushR{ position:absolute; top:20px; width:16px; height:9px; background: var(--pp-light); border-radius:50%; opacity:.75; }
.pp-blushL{ left:-4px; } .pp-blushR{ right:-4px; }

.pp-mouth{ position:absolute; top:26px; left:50%; transform:translateX(-50%); width:18px; height:9px; border-radius:0 0 10px 10px; border:2px solid #20232a; border-top:none; }

/* Mood variants */
.pp-pet[data-mood="happy"] .pp-mouth{ width:22px; height:12px; border-radius:0 0 14px 14px; }
.pp-pet[data-mood="happy"] .pp-pet-sparkle{ display:block; }
.pp-pet[data-mood="eating"] .pp-mouth{ animation: ppChew .35s ease-in-out infinite; }
@keyframes ppChew{ 0%,100%{ height:9px;} 50%{ height:3px;} }

.pp-pet[data-mood="sad"] .pp-eyeL, .pp-pet[data-mood="sad"] .pp-eyeR{ border-radius: 50% 50% 40% 40%; transform: translateY(2px); animation:none; }
.pp-pet[data-mood="sad"] .pp-mouth{ border-radius:10px 10px 0 0; border-top:2px solid #20232a; border-bottom:none; top:30px; }
.pp-pet[data-mood="sad"] .pp-tear{
	position:absolute; top:22px; left:16px; width:5px; height:9px; background:#7FC8FF; border-radius: 0 50% 50% 50%;
	animation: ppTearDrop 1.6s ease-in infinite;
}
@keyframes ppTearDrop{ 0%{ opacity:0; transform: translateY(-4px);} 20%{opacity:1;} 100%{ opacity:0; transform: translateY(14px);} }

.pp-pet[data-mood="dead"]{ animation:none; filter: grayscale(0.85) brightness(0.92); }
.pp-pet[data-mood="dead"] .pp-eyeL, .pp-pet[data-mood="dead"] .pp-eyeR{ background:none; animation:none; }
.pp-pet[data-mood="dead"] .pp-eyeL::before, .pp-pet[data-mood="dead"] .pp-eyeR::before{
	content:"×"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	font-size:16px; font-weight:900; color:#20232a; line-height:1;
}
.pp-pet[data-mood="dead"] .pp-eyeL::after, .pp-pet[data-mood="dead"] .pp-eyeR::after{ display:none; }
.pp-pet[data-mood="dead"] .pp-mouth{ border-radius:50%; width:10px; height:10px; }
.pp-pet[data-mood="dead"] .pp-tail{ animation:none; }
.pp-pet[data-mood="dead"] .pp-wingL, .pp-pet[data-mood="dead"] .pp-wingR{ animation:none; }

.pp-pet-sparkle{ display:none; position:absolute; inset:-10px; pointer-events:none; z-index:6; }
.pp-pet-sparkle span{
	position:absolute; font-size:14px; opacity:0; animation: ppSparkle 1.1s ease-out infinite;
}
.pp-pet-sparkle span:nth-child(1){ top:-6px; left:-8px; animation-delay:0s; }
.pp-pet-sparkle span:nth-child(2){ top:4px; right:-14px; animation-delay:.3s; }
.pp-pet-sparkle span:nth-child(3){ bottom:0; left:50%; animation-delay:.6s; }
@keyframes ppSparkle{ 0%{opacity:0; transform: translateY(4px) scale(.6);} 40%{opacity:1; transform:translateY(-6px) scale(1);} 100%{opacity:0; transform:translateY(-16px) scale(.8);} }

/* ---------- Meters ---------- */
.ppw-meters{ position:relative; z-index:1; width:100%; max-width:340px; display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.ppw-meter{ display:flex; align-items:center; gap:8px; }
.ppw-meter-icon{ font-size:16px; width:20px; text-align:center; }
.ppw-meter-track{ flex:1; height:10px; border-radius:999px; background: rgba(0,0,0,.08); overflow:hidden; }
html[data-theme="dark"] .ppw-meter-track{ background: rgba(255,255,255,.1); }
.ppw-meter-fill{ height:100%; border-radius:999px; transition: width .5s ease; }
.ppw-meter-fill.is-hunger{ background: linear-gradient(90deg, var(--accent, #FF6B4A), #FF8A65); }
.ppw-meter-fill.is-thirst{ background: linear-gradient(90deg, var(--accent-2, #0A84FF), #7C5CFC); }
.ppw-meter-fill.is-happy{ background: linear-gradient(90deg, var(--accent-green, #2FB350), var(--accent-green-2, #34C759)); }
.ppw-meter-fill.is-low{ background: linear-gradient(90deg, #ff3b30, #ff6b4a); }
.ppw-meter-pct{ font-size:11.5px; color: var(--text-secondary, #6E6E73); width:32px; text-align:left; direction:ltr; }

/* ---------- Actions ---------- */
.ppw-actions{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; }
.ppw-btn{
	display:inline-flex; align-items:center; gap:7px; border:none; cursor:pointer;
	border-radius: 999px; padding: 11px 18px; font-weight:700; font-size:13.5px;
	box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.04)); transition: transform .15s ease, box-shadow .15s ease;
	color:#fff;
}
.ppw-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,.08)); }
.ppw-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.ppw-btn.is-food{ background: linear-gradient(135deg, var(--accent, #FF6B4A), #FF8A65); }
.ppw-btn.is-water{ background: linear-gradient(135deg, var(--accent-2, #0A84FF), #7C5CFC); }
.ppw-btn.is-play{ background: linear-gradient(135deg, var(--accent-green, #2FB350), var(--accent-green-2, #34C759)); }
.ppw-btn.is-ghost{ background: var(--surface-solid, #fff); color: var(--text, #1D1D1F); border:1px solid var(--border, rgba(0,0,0,.06)); }
.ppw-btn-cost{ font-size:11px; opacity:.85; font-weight:600; }

/* ---------- Empty state (adopt) ---------- */
.ppw-adopt{
	background: var(--surface, rgba(255,255,255,.72)); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid var(--border, rgba(0,0,0,.06)); border-radius: var(--radius-lg, 28px);
	box-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,.08)); padding: 26px 22px;
}
.ppw-adopt h2{ margin:0 0 4px; font-size:18px; font-weight:800; }
.ppw-adopt p.ppw-adopt-sub{ margin:0 0 18px; color: var(--text-secondary, #6E6E73); font-size:13.5px; }

.ppw-species-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-bottom:18px; }
.ppw-species-card{
	background: var(--surface-solid, #fff); border: 2px solid var(--border, rgba(0,0,0,.06)); border-radius: var(--radius-md, 20px);
	padding: 14px 8px; text-align:center; cursor:pointer; transition: border-color .15s ease, transform .15s ease;
}
.ppw-species-card:hover{ transform: translateY(-2px); }
.ppw-species-card.is-active{ border-color: var(--accent, #FF6B4A); }
.ppw-species-card .ppw-species-emoji{ font-size:34px; display:block; margin-bottom:4px; }
.ppw-species-card .ppw-species-label{ font-size:12.5px; font-weight:700; }

.ppw-field{ margin-bottom:14px; }
.ppw-field label{ display:block; font-size:12.5px; font-weight:700; margin-bottom:6px; color: var(--text-secondary, #6E6E73); }
.ppw-field input[type="text"]{
	width:100%; padding:10px 14px; border-radius: var(--radius-sm, 14px); border:1px solid var(--border, rgba(0,0,0,.06));
	background: var(--surface-solid, #fff); color: var(--text, #1D1D1F); font-family:inherit; font-size:14px;
}
.ppw-field input[type="range"]{ width:100%; }
.ppw-color-row{ display:flex; gap:8px; flex-wrap:wrap; }
.ppw-color-dot{ width:30px; height:30px; border-radius:50%; cursor:pointer; border:3px solid transparent; }
.ppw-color-dot.is-active{ border-color: var(--text, #1D1D1F); }
.ppw-size-row{ display:flex; gap:8px; }
.ppw-size-row button{
	flex:1; padding:9px 0; border-radius: var(--radius-sm, 14px); border:1px solid var(--border, rgba(0,0,0,.06));
	background: var(--surface-solid, #fff); color: var(--text, #1D1D1F); cursor:pointer; font-weight:700; font-size:13px;
}
.ppw-size-row button.is-active{ background: var(--accent, #FF6B4A); color:#fff; border-color: transparent; }
.ppw-age-value{ font-size:12.5px; font-weight:700; color: var(--accent, #FF6B4A); }

/* ---------- Dead state ---------- */
.ppw-tombstone{ text-align:center; position:relative; z-index:1; }
.ppw-tombstone .ppw-grave{ font-size:64px; margin-bottom:6px; }
.ppw-tombstone h2{ margin:6px 0 4px; font-size:18px; }
.ppw-tombstone p{ margin:0 0 16px; color: var(--text-secondary, #6E6E73); font-size:13px; }

/* ---------- Toast ---------- */
.ppw-toast{
	position: fixed; bottom: 24px; left:50%; transform: translateX(-50%) translateY(20px);
	background: var(--surface-solid, #1D1D1F); color: var(--text, #1D1D1F);
	border:1px solid var(--border, rgba(0,0,0,.06)); box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.12));
	border-radius: var(--radius-md, 20px); padding: 12px 20px; font-size:13.5px; font-weight:600;
	opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease; z-index: 99999; max-width:90vw;
}
.ppw-toast.is-visible{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ---------- Mini-game overlay ---------- */
.ppw-game-overlay{
	position: fixed; inset:0; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	display:none; align-items:center; justify-content:center; z-index: 99998; padding:16px;
}
.ppw-game-overlay.is-open{ display:flex; }
.ppw-game-card{
	width:100%; max-width:360px; background: var(--surface-solid, #fff); border-radius: var(--radius-lg, 28px);
	box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.12)); padding:18px; direction:rtl; font-family: var(--font, 'Vazirmatn', sans-serif);
	color: var(--text, #1D1D1F);
}
.ppw-game-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ppw-game-head h3{ margin:0; font-size:15px; font-weight:800; }
.ppw-game-close{ background:none; border:none; cursor:pointer; font-size:18px; color: var(--text-secondary, #6E6E73); }
.ppw-game-stats{ display:flex; justify-content:space-between; font-size:12.5px; color: var(--text-secondary,#6E6E73); margin-bottom:8px; }
.ppw-game-field{
	position:relative; width:100%; height:280px; border-radius: var(--radius-md, 20px); overflow:hidden;
	background: linear-gradient(180deg, var(--accent-soft, #FFF1EC), var(--accent-2-soft, #EAF4FF));
}
.ppw-game-pet{
	position:absolute; bottom:6px; left:50%; transform: translateX(-50%); font-size:38px; transition: left .12s linear;
	filter: drop-shadow(0 4px 6px rgba(0,0,0,.15));
}
.ppw-treat{ position:absolute; top:-30px; font-size:26px; user-select:none; cursor:pointer; }
.ppw-game-footer{ display:flex; gap:10px; margin-top:12px; }
.ppw-game-start{
	flex:1; border:none; border-radius:999px; padding:11px 0; font-weight:800; color:#fff; cursor:pointer;
	background: linear-gradient(135deg, var(--accent-green, #2FB350), var(--accent-green-2, #34C759));
}
.ppw-game-result{ text-align:center; padding: 14px 0; }
.ppw-game-result strong{ font-size:26px; display:block; margin-bottom:4px; }

/* ---------- Customize modal ---------- */
.ppw-modal-overlay{ position: fixed; inset:0; background: rgba(0,0,0,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display:none; align-items:center; justify-content:center; z-index:99998; padding:16px; }
.ppw-modal-overlay.is-open{ display:flex; }
.ppw-modal-card{
	width:100%; max-width:380px; max-height:86vh; overflow-y:auto; background: var(--surface-solid, #fff);
	border-radius: var(--radius-lg, 28px); box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.12)); padding:20px;
	direction:rtl; font-family: var(--font, 'Vazirmatn', sans-serif); color: var(--text, #1D1D1F);
}
.ppw-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ppw-modal-head h3{ margin:0; font-size:15.5px; font-weight:800; }
.ppw-modal-close{ background:none; border:none; cursor:pointer; font-size:18px; color: var(--text-secondary, #6E6E73); }
.ppw-modal-save{
	width:100%; border:none; border-radius:999px; padding:12px 0; font-weight:800; color:#fff; cursor:pointer; margin-top:6px;
	background: linear-gradient(135deg, var(--accent, #FF6B4A), #FF8A65);
}

/* ---------- Responsive ---------- */
@media (max-width: 480px){
	.ppw-species-grid{ gap:8px; }
	.ppw-stage{ padding:22px 14px 18px; }
}

/* ==========================================================================
   Floating homepage bubble (#petly-pet-fab) — same idea as the Petly Live
   Support launcher (fixed corner button + slide-up panel), sitting right
   beside it on whichever corner the chat widget itself uses (94px = the
   chat launcher's 60px + a 22px edge margin + a 12px gap), so they read as
   a pair rather than two unrelated floating things. The panel's body just
   hosts a normal #petly-pet-root, so every rule above already applies to
   it unchanged. The launcher's icon is the visitor's own tiny live pet
   (see .ppf-launcher-pet) instead of a generic glyph.
   ========================================================================== */
#petly-pet-fab{ direction: rtl; font-family: var(--font, 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif); }
#petly-pet-fab *{ box-sizing: border-box; }

#petly-pet-fab .ppf-launcher{
	position: fixed; bottom: 22px; left: 94px; z-index: 99997;
	width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
	background: linear-gradient(135deg, var(--accent-green, #2FB350), var(--accent-green-2, #34C759));
	box-shadow: 0 10px 26px rgba(52,199,89,.42);
	display:flex; align-items:center; justify-content:center;
	transition: transform .2s ease, box-shadow .2s ease;
	animation: ppfLauncherBob 2.6s ease-in-out infinite;
}
#petly-pet-fab[data-position="right"] .ppf-launcher{ left:auto; right: 94px; }
#petly-pet-fab .ppf-launcher:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 34px rgba(52,199,89,.5); }
#petly-pet-fab .ppf-launcher-icon{ font-size: 26px; line-height:1; }
#petly-pet-fab.is-open .ppf-launcher{ animation:none; }
@keyframes ppfLauncherBob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-5px); } }

/* The mini live-pet portrait inside the launcher button — same markup/anatomy
   as the full-size pet, just scaled way down and clipped to a circle. */
#petly-pet-fab .ppf-launcher-pet{
	width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
	display:flex; align-items:center; justify-content:center;
	background: rgba(255,255,255,.18);
}
#petly-pet-fab .ppf-launcher-pet .pp-pet-wrap{ transform: scale(.3); margin:0; }

#petly-pet-fab .ppf-badge{
	position:absolute; top:-2px; left:-2px; min-width:18px; height:18px; padding:0 4px; border-radius:999px;
	background:#FF3B30; color:#fff; font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center;
	border:2px solid var(--bg, #fff);
}

#petly-pet-fab .ppf-panel{
	position: fixed; bottom: 96px; left: 94px; z-index: 99997;
	width: 380px; max-width: calc(100vw - 32px); max-height: min(640px, calc(100vh - 140px));
	background: var(--bg, #fff); border: 1px solid var(--border, rgba(0,0,0,.06)); border-radius: var(--radius-lg, 28px);
	box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.16));
	opacity:0; transform: translateY(16px) scale(.97); pointer-events:none; transition: opacity .2s ease, transform .2s ease;
	display:flex; flex-direction:column; overflow:hidden;
}
#petly-pet-fab[data-position="right"] .ppf-panel{ left:auto; right: 94px; }
#petly-pet-fab.is-open .ppf-panel{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }

#petly-pet-fab .ppf-panel-head{
	display:flex; align-items:center; justify-content:space-between; padding:16px 18px;
	border-bottom:1px solid var(--border, rgba(0,0,0,.06)); font-weight:800; font-size:14.5px; color: var(--text, #1D1D1F);
	flex:0 0 auto;
}
#petly-pet-fab .ppf-close{ background:none; border:none; cursor:pointer; font-size:17px; color: var(--text-secondary, #6E6E73); }
#petly-pet-fab .ppf-panel-body{ flex:1 1 auto; overflow-y:auto; padding: 4px 14px 14px; }
#petly-pet-fab .ppf-panel-body #petly-pet-root{ max-width:none; padding:8px 0 12px; }
#petly-pet-fab .ppf-guest-note{
	direction: rtl; font-family: var(--font, 'Vazirmatn', sans-serif);
	color: var(--text, #1D1D1F); font-size:13.5px; line-height:1.9; padding: 20px 4px 8px; text-align:center;
}
#petly-pet-fab .ppf-guest-note a{ color: var(--accent-2, #0A84FF); font-weight:700; }

@media (max-width: 480px){
	/* The launcher itself stays the same size/offset as the chat bubble at
	   every width (matching how the chat widget behaves) — only the panel
	   needs to shrink so it doesn't run off a narrow screen. */
	#petly-pet-fab .ppf-panel{ bottom:88px; }
}