/* ═══════════════════════════════════════════════════════════════
   COSMETICS — equippable layers for Iris & Apollo
   Scoped to .pup (and .pup.apollo where needed). 280×300 box.
   Applied by cosmetics.js → window.applyCosmetics(pup, opts, isApollo)
   ═══════════════════════════════════════════════════════════════ */
.pup .cosmetic{ position:absolute; pointer-events:none; }

/* ── AURA · colored glow behind everything ── */
.pup .cosmetic.aura{ left:50%; top:52%; width:300px; height:300px; transform:translate(-50%,-50%);
  border-radius:50%; animation:auraPulse 4s ease-in-out infinite; }
.pup .aura-golden{ background:radial-gradient(circle, rgba(236,203,120,.5), rgba(207,151,31,.14) 44%, transparent 68%); }
.pup .aura-rose{   background:radial-gradient(circle, rgba(240,120,160,.46), rgba(224,86,138,.14) 44%, transparent 68%); }
.pup .aura-teal{   background:radial-gradient(circle, rgba(50,210,180,.44), rgba(31,154,134,.14) 44%, transparent 68%); }
.pup .aura-violet{ background:radial-gradient(circle, rgba(160,100,230,.46), rgba(111,61,219,.14) 44%, transparent 68%); }
.pup .aura-darkroom{ background:radial-gradient(circle, rgba(255,60,80,.36), rgba(200,16,46,.12) 46%, transparent 66%); }
@keyframes auraPulse{ 0%,100%{ opacity:.72; } 50%{ opacity:1; } }

/* ── COLLAR · band at the neck + hanging tag ── */
.pup .cosmetic.collar{ left:96px; top:170px; width:88px; height:21px;
  border-radius:9px 9px 13px 13px / 9px 9px 17px 17px;
  box-shadow:0 3px 6px -3px #000, inset 0 2px 3px rgba(255,255,255,.18); }
.pup .cosmetic.collar .tag{ position:absolute; left:50%; bottom:-11px; transform:translateX(-50%);
  width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 40% 32%, #f4dca4, #b98a2e);
  box-shadow:0 2px 4px -1px #000, inset 0 1px 1px rgba(255,255,255,.55); border:1.5px solid #8a651f; }
.pup .collar-pink{ background:linear-gradient(#f5a8c0,#d96a90); }
.pup .collar-lime{ background:linear-gradient(#cfe85e,#86b41f); }
.pup .collar-red{ background:linear-gradient(#e8635a,#b4271f); }
.pup .collar-leather{ background:linear-gradient(#7a4f2a,#43260f); }
.pup .collar-leather .tag{ background:radial-gradient(circle at 40% 32%, #e2e2e8, #9a9aa2); border-color:#6a6a72; }
.pup.apollo .cosmetic.collar{ top:178px; width:92px; left:94px; }

/* ── BANDANA · triangle under the chin ── */
.pup .cosmetic.bandana{ left:96px; top:168px; width:88px; height:58px; }
.pup .cosmetic.bandana .knot{ position:absolute; left:6px; top:2px; width:17px; height:17px; border-radius:50%;
  box-shadow:0 2px 4px -1px #000; }
.pup .cosmetic.bandana .cloth{ position:absolute; left:9px; top:8px; width:70px; height:48px;
  clip-path:polygon(0 0, 100% 0, 50% 100%); box-shadow:0 4px 8px -4px #000; }
.pup .bandana-red .knot{ background:linear-gradient(#e8635a,#b4271f); }
.pup .bandana-red .cloth{ background:repeating-linear-gradient(46deg,#d6463e 0 9px,#b4271f 9px 18px); }
.pup.apollo .cosmetic.bandana{ top:176px; }

/* ── HATS ── */
/* beret — tilted artist disc */
.pup .hat-beret{ left:76px; top:8px; width:98px; height:44px; transform:rotate(-13deg); }
.pup .hat-beret .disc{ position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(60% 60% at 38% 30%, #3c3c46, #18181e 78%);
  box-shadow:0 5px 12px -5px #000, inset 0 2px 5px rgba(255,255,255,.12); }
.pup .hat-beret .nub{ position:absolute; left:46%; top:-5px; width:10px; height:10px; border-radius:50%; background:#caa23f; }
.pup.apollo .hat-beret{ top:2px; transform:rotate(-13deg); }
/* field cap — khaki crown + brim */
.pup .hat-cap{ left:72px; top:4px; width:108px; height:48px; }
.pup .hat-cap .crown{ position:absolute; left:18px; top:0; width:74px; height:34px; border-radius:22px 22px 8px 8px;
  background:linear-gradient(#8a7642,#564726); box-shadow:inset 0 3px 6px rgba(255,255,255,.14), 0 4px 9px -5px #000; }
.pup .hat-cap .brim{ position:absolute; left:64px; top:24px; width:50px; height:13px;
  border-radius:4px 11px 11px 4px / 4px 9px 9px 4px; background:linear-gradient(#73622f,#3e3318); transform:rotate(7deg); }
.pup.apollo .hat-cap{ top:-2px; }
/* headlamp — thin forehead band + lamp */
.pup .hat-headlamp{ left:86px; top:26px; width:68px; height:16px; }
.pup .hat-headlamp .band{ position:absolute; inset:0; border-radius:9px; background:linear-gradient(#2c2c34,#101014);
  box-shadow:0 2px 5px -2px #000; }
.pup .hat-headlamp .lamp{ position:absolute; left:50%; top:1px; transform:translateX(-50%); width:18px; height:15px;
  border-radius:5px; background:radial-gradient(circle at 50% 40%, #fff6d0 0%, #ffd98a 40%, #cf971f 100%);
  box-shadow:0 0 16px 5px rgba(255,232,150,.75); }
.pup.apollo .hat-headlamp{ top:22px; }
/* press pass — fedora band card */
.pup .hat-press{ left:74px; top:6px; width:104px; height:46px; }
.pup .hat-press .crown{ position:absolute; left:20px; top:0; width:68px; height:30px; border-radius:18px 18px 6px 6px;
  background:linear-gradient(#3a3a44,#1a1a20); }
.pup .hat-press .brim{ position:absolute; left:8px; top:26px; width:90px; height:11px; border-radius:50%;
  background:linear-gradient(#2c2c34,#141418); box-shadow:0 4px 8px -5px #000; }
.pup .hat-press .card{ position:absolute; left:50%; top:10px; transform:translateX(-50%) rotate(-3deg);
  width:30px; height:13px; border-radius:3px; background:#f3ead2;
  font:700 7px/13px 'JetBrains Mono',monospace; color:#b4271f; text-align:center; letter-spacing:.06em; }
.pup .hat-press .card::after{ content:'PRESS'; }
.pup.apollo .hat-press{ top:0; }

/* ═══════════ SPECIAL / SEASONAL / PRESTIGE ═══════════ */
/* golden-hour aura — rich sunset radiance */
.pup .aura-goldenhour{ background:radial-gradient(circle at 50% 42%, rgba(255,214,140,.62), rgba(255,140,80,.3) 38%, rgba(207,80,60,.12) 60%, transparent 73%); }
/* glowing golden-hour collar */
.pup .collar-golden{ background:linear-gradient(#ffe6a8,#cf971f);
  box-shadow:0 0 16px rgba(236,203,120,.85), inset 0 2px 3px rgba(255,255,255,.45); }
.pup .collar-golden .tag{ background:radial-gradient(circle at 40% 32%, #fff4d6, #e0b84f); border-color:#b9892a; }
/* grad cap — mortarboard + tassel */
.pup .hat-grad{ left:74px; top:0; width:104px; height:48px; }
.pup .hat-grad .base{ position:absolute; left:40px; top:18px; width:26px; height:22px; border-radius:7px 7px 5px 5px; background:linear-gradient(#23232a,#0e0e13); }
.pup .hat-grad .board{ position:absolute; left:10px; top:6px; width:86px; height:30px; background:linear-gradient(#2a2a32,#13131a);
  transform:rotate(-2deg); box-shadow:0 5px 10px -5px #000; clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.pup .hat-grad .tassel{ position:absolute; left:84px; top:18px; width:3.5px; height:30px; background:#caa23f; }
.pup .hat-grad .tassel::after{ content:''; position:absolute; left:-3px; bottom:-5px; width:10px; height:12px; border-radius:3px;
  background:linear-gradient(#f0d070,#caa23f); }
.pup.apollo .hat-grad{ top:-6px; }
/* laurel crown — gold 3-point crown + gem */
.pup .hat-crown{ left:88px; top:6px; width:64px; height:34px; }
.pup .hat-crown .band{ position:absolute; inset:0; background:linear-gradient(#ffe6a0,#cf971f);
  clip-path:polygon(0 100%, 0 42%, 16% 0, 33% 48%, 50% 0, 67% 48%, 84% 0, 100% 42%, 100% 100%);
  box-shadow:0 0 12px rgba(236,203,120,.75); }
.pup .hat-crown .gem{ position:absolute; left:50%; top:56%; transform:translateX(-50%); width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 40% 32%, #ff8a98, #d11f33); box-shadow:0 0 6px rgba(255,59,83,.7); }
.pup.apollo .hat-crown{ top:2px; }

/* ═══════════ HOLIDAY WEARABLES ═══════════ */
/* santa hat — red cone, white trim + pompom */
.pup .hat-santa{ left:92px; top:-30px; width:92px; height:78px; }
.pup .hat-santa .cone{ position:absolute; left:6px; top:6px; width:80px; height:62px;
  background:linear-gradient(150deg,#e8504e,#b4271f); clip-path:polygon(8% 100%, 92% 100%, 62% 6%); border-radius:0 0 8px 8px; }
.pup .hat-santa .trim{ position:absolute; left:2px; bottom:0; width:88px; height:15px; border-radius:9px; background:linear-gradient(#fff,#dfe2e8); box-shadow:0 2px 5px -2px #000; }
.pup .hat-santa .pom{ position:absolute; left:52px; top:0; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#fff,#d6dae2); }
.pup.apollo .hat-santa{ top:-36px; }
/* witch hat — black cone + brim + band */
.pup .hat-witch{ left:84px; top:-34px; width:108px; height:84px; transform:rotate(-6deg); }
.pup .hat-witch .cone{ position:absolute; left:24px; top:0; width:60px; height:66px;
  background:linear-gradient(150deg,#3a2f4a,#16101f); clip-path:polygon(50% 0, 84% 100%, 16% 100%); }
.pup .hat-witch .brim{ position:absolute; left:0; bottom:0; width:108px; height:16px; border-radius:50%; background:linear-gradient(#2a2138,#120c1c); box-shadow:0 3px 6px -3px #000; }
.pup .hat-witch .band{ position:absolute; left:30px; bottom:13px; width:48px; height:9px; background:#8a4de0; border-radius:2px; }
.pup.apollo .hat-witch{ top:-40px; }
/* party hat — striped cone + pompom */
.pup .hat-party{ left:98px; top:-32px; width:84px; height:74px; transform:rotate(4deg); }
.pup .hat-party .cone{ position:absolute; left:18px; top:6px; width:48px; height:62px;
  background:repeating-linear-gradient(58deg,#f0c66b 0 8px,#e0568a 8px 16px,#5fc9b6 16px 24px); clip-path:polygon(50% 0,100% 100%,0 100%); }
.pup .hat-party .pom{ position:absolute; left:34px; top:-2px; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#fff6d0,#f0c66b); }
.pup.apollo .hat-party{ top:-38px; }
/* flower crown — row of blossoms on the forehead */
.pup .hat-flowercrown{ left:78px; top:22px; width:124px; height:24px; }
.pup .hat-flowercrown i{ position:absolute; top:0; width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #ffe07a 0 22%, transparent 24%),
    radial-gradient(circle at 50% 8%, #f5a8c0 0 30%, transparent 32%),
    radial-gradient(circle at 88% 40%, #f5a8c0 0 30%, transparent 32%),
    radial-gradient(circle at 72% 90%, #f5a8c0 0 30%, transparent 32%),
    radial-gradient(circle at 12% 40%, #f5a8c0 0 30%, transparent 32%),
    radial-gradient(circle at 28% 90%, #f5a8c0 0 30%, transparent 32%); }
.pup .hat-flowercrown .f1{ left:2px; transform:scale(.8); } .pup .hat-flowercrown .f2{ left:24px; }
.pup .hat-flowercrown .f3{ left:52px; transform:scale(1.1); } .pup .hat-flowercrown .f4{ left:82px; }
.pup .hat-flowercrown .f5{ left:104px; transform:scale(.8); }
.pup.apollo .hat-flowercrown{ top:18px; }
/* shades — sunglasses over the lens */
.pup .hat-shades{ left:92px; top:62px; width:96px; height:30px; }
.pup .hat-shades i{ position:absolute; top:0; width:38px; height:28px; border-radius:9px;
  background:linear-gradient(150deg,#2a2a32 0%,#0c0c10 60%); box-shadow:0 2px 5px -2px #000, inset 2px 2px 4px rgba(255,255,255,.18); }
.pup .hat-shades .l{ left:0; } .pup .hat-shades .r{ right:0; }
.pup .hat-shades .bridge{ position:absolute; left:38px; top:8px; width:20px; height:5px; border-radius:3px; background:#1a1a20; }
.pup.apollo .hat-shades{ top:58px; left:90px; }

/* scarf collar — chunky knit + hanging ends */
.pup .collar-scarf{ background:repeating-linear-gradient(90deg,#c43a32 0 7px,#a82a22 7px 14px); height:26px; top:166px;
  box-shadow:0 3px 6px -3px #000; }
.pup .collar-scarf .e1, .pup .collar-scarf .e2{ position:absolute; top:18px; width:18px; height:34px; border-radius:5px;
  background:repeating-linear-gradient(0deg,#c43a32 0 7px,#a82a22 7px 14px); }
.pup .collar-scarf .e1{ left:30px; transform:rotate(8deg); } .pup .collar-scarf .e2{ left:48px; transform:rotate(-6deg); }
.pup.apollo .collar-scarf{ top:172px; }
/* bow collar — a cute bow at the throat */
.pup .collar-bow{ background:linear-gradient(#f5a8c0,#d96a90); }
.pup .collar-bow .bow{ position:absolute; left:50%; top:-7px; transform:translateX(-50%); width:42px; height:22px; }
.pup .collar-bow .bow::before, .pup .collar-bow .bow::after{ content:''; position:absolute; top:0; width:19px; height:22px;
  background:linear-gradient(#f7b6cb,#e0789e); }
.pup .collar-bow .bow::before{ left:0; clip-path:polygon(100% 50%,0 0,0 100%); }
.pup .collar-bow .bow::after{ right:0; clip-path:polygon(0 50%,100% 0,100% 100%); }

/* ═══════════ DOG TOYS ═══════════ */
.pup .cosmetic.toy{ }
.pup .toy-ball{ left:184px; top:256px; width:38px; height:38px; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #eaff70, #b6d62a 70%, #7e9a1a); box-shadow:0 5px 10px -5px #000; }
.pup .toy-ball::after{ content:''; position:absolute; left:6px; top:14px; width:26px; height:12px; border:2px solid #f4ffd0; border-bottom:0; border-radius:13px 13px 0 0; opacity:.7; }
.pup .toy-blueball{ left:184px; top:256px; width:38px; height:38px; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #9fd0ff, #2a78db 72%, #14508a); box-shadow:0 5px 10px -5px #000; }
.pup .toy-blueball::after{ content:''; position:absolute; left:8px; top:7px; width:12px; height:7px; border-radius:50%; background:rgba(255,255,255,.6); }
.pup .toy-bone{ left:178px; top:266px; width:50px; height:22px; }
.pup .toy-bone i, .pup .toy-bone::before, .pup .toy-bone::after{ position:absolute; background:linear-gradient(#fff,#e2dcc8); }
.pup .toy-bone::before{ content:''; left:0; top:0; width:18px; height:22px; border-radius:9px; box-shadow:0 4px 8px -4px #000; }
.pup .toy-bone::after{ content:''; right:0; top:0; width:18px; height:22px; border-radius:9px; box-shadow:0 4px 8px -4px #000; }
.pup .toy-bone i{ left:12px; top:6px; width:26px; height:10px; }
.pup .toy-frisbee{ left:172px; top:270px; width:56px; height:26px; border-radius:50%; transform:rotate(-12deg);
  background:radial-gradient(60% 70% at 50% 30%, #eaf4ff 0 40%, #2a78db 42%); box-shadow:0 6px 10px -5px #000, inset 0 -3px 5px rgba(0,0,0,.25); }
.pup .toy-rope{ left:176px; top:266px; width:52px; height:20px; }
.pup .toy-rope i{ position:absolute; left:18px; top:2px; width:16px; height:16px; border-radius:50%; background:repeating-conic-gradient(#d8c7a0 0 18deg,#b89a6a 18deg 36deg); }
.pup .toy-rope::before, .pup .toy-rope::after{ content:''; position:absolute; top:5px; width:20px; height:10px; border-radius:5px; background:repeating-linear-gradient(90deg,#e0d2ad 0 4px,#bfa676 4px 8px); }
.pup .toy-rope::before{ left:0; } .pup .toy-rope::after{ right:0; }
/* a little wiggle when playing */
.pup.playing .cosmetic.toy{ animation:toyWiggle .5s ease-in-out infinite; }
@keyframes toyWiggle{ 0%,100%{ transform:translateY(0) rotate(-6deg);} 50%{ transform:translateY(-7px) rotate(8deg);} }