/* ═══════════════════════════════════════════════════════════════
   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:48px; 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:46px; }
/* press pass — fedora band card */
.pup .hat-press{ left:74px; top:16px; 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:12px; }

/* ═══════════ 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:10px; 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:8px; }
/* laurel crown — gold 3-point crown + gem */
.pup .hat-crown{ left:88px; top:16px; 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:14px; }

/* ═══════════ 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:-18px; 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:-22px; }
/* flower crown — row of blossoms on the forehead */
.pup .hat-flowercrown{ left:78px; top:34px; 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:32px; }
/* 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);} }

/* ═══════════════════════════════════════════════════════════════
   v2 EXPANSION — extra collars, auras, hats & toys (The Golden)
   Same 280×300 box + anchoring conventions as the base file.
   ═══════════════════════════════════════════════════════════════ */

/* ── extra COLLAR colors (generic band + tag) ── */
.pup .collar-sky{ background:linear-gradient(#9fd0f5,#3f86c8); }
.pup .collar-slate{ background:linear-gradient(#8a95a8,#48505f); }
.pup .collar-charcoal{ background:linear-gradient(#54565e,#26272c); }
.pup .collar-mint{ background:linear-gradient(#a8ecc8,#4bbf88); }
.pup .collar-coral{ background:linear-gradient(#ff9e86,#e2573f); }
.pup .collar-lavender{ background:linear-gradient(#cdb8f0,#8a6bd0); }
.pup .collar-sunflower{ background:linear-gradient(#ffd95e,#e2a41f); }
.pup .collar-teal{ background:linear-gradient(#5fd0c0,#1f9a86); }
.pup .collar-orange{ background:linear-gradient(#ffb15e,#e0781f); }
.pup .collar-crimson{ background:linear-gradient(#e8635a,#a01028); }
.pup .collar-forest{ background:linear-gradient(#7bc47a,#256b2c); }
.pup .collar-denim{ background:linear-gradient(#7f9fd0,#3a5a86); }
.pup .collar-magenta{ background:linear-gradient(#f07ac0,#b01f7a); }
.pup .collar-bubblegum{ background:linear-gradient(#ffb0d8,#f06ab0); }
.pup .collar-silver{ background:linear-gradient(#e2e6ee,#9aa0ac); box-shadow:0 3px 6px -3px #000, inset 0 2px 3px rgba(255,255,255,.5); }
.pup .collar-silver .tag{ background:radial-gradient(circle at 40% 32%, #f4f6fa, #9aa0ac); border-color:#7a808c; }
/* structured collars */
.pup .collar-studded{ background:linear-gradient(#3a3a42,#18181e); }
.pup .collar-studded .tag{ background:radial-gradient(circle at 40% 32%,#e2e2e8,#9a9aa2); border-color:#6a6a72; }
.pup .collar-studded::after{ content:''; position:absolute; left:8px; right:8px; top:6px; height:6px; border-radius:3px;
  background:radial-gradient(circle at 6px 50%,#d8d8e0 0 2.2px,transparent 3px) 0/16px 100% repeat-x; }
.pup .collar-chain{ background:repeating-linear-gradient(60deg,#ffe28a 0 5px,#c8971f 5px 10px);
  box-shadow:0 3px 6px -3px #000, inset 0 2px 3px rgba(255,255,255,.4); }
.pup .collar-chain .tag{ background:radial-gradient(circle at 40% 32%,#fff0c0,#d8a83f); border-color:#a8801f; }
.pup .collar-pearl{ background:linear-gradient(#f0f0f4,#c8c8d2); }
.pup .collar-pearl .tag{ display:none; }
.pup .collar-pearl::after{ content:''; position:absolute; left:4px; right:4px; top:5px; height:11px; border-radius:6px;
  background:radial-gradient(circle at 7px 50%,#fff 0 4px,#d8d8e2 5px,transparent 6px) 0/15px 100% repeat-x; }

/* ── extra AURA colors ── */
.pup .aura-mint{ background:radial-gradient(circle, rgba(80,220,160,.46), rgba(31,154,110,.14) 44%, transparent 68%); }
.pup .aura-amber{ background:radial-gradient(circle, rgba(255,190,90,.5), rgba(224,140,30,.15) 44%, transparent 68%); }
.pup .aura-azure{ background:radial-gradient(circle, rgba(90,170,240,.46), rgba(31,110,200,.14) 44%, transparent 68%); }
.pup .aura-emerald{ background:radial-gradient(circle, rgba(60,200,110,.46), rgba(20,140,60,.14) 44%, transparent 68%); }
.pup .aura-lavender{ background:radial-gradient(circle, rgba(190,150,240,.46), rgba(130,90,210,.14) 44%, transparent 68%); }
.pup .aura-magenta{ background:radial-gradient(circle, rgba(240,90,190,.46), rgba(190,20,120,.14) 44%, transparent 68%); }
.pup .aura-crimson{ background:radial-gradient(circle, rgba(240,70,80,.44), rgba(180,16,40,.14) 44%, transparent 66%); }
.pup .aura-ice{ background:radial-gradient(circle, rgba(150,210,255,.5), rgba(60,140,220,.14) 44%, transparent 68%); }
.pup .aura-silver{ background:radial-gradient(circle, rgba(220,224,232,.5), rgba(150,156,168,.16) 44%, transparent 68%); }
.pup .aura-ember{ background:radial-gradient(circle at 50% 56%, rgba(255,140,60,.55), rgba(220,60,30,.2) 40%, transparent 70%); }
.pup .aura-sunset{ background:radial-gradient(circle at 50% 42%, rgba(255,180,120,.55), rgba(240,90,120,.22) 42%, transparent 70%); }
.pup .aura-prism{ background:conic-gradient(from 0deg,#ff7a7a,#ffcf5e,#9fe36a,#5fd0e0,#8a8ff0,#f07ad0,#ff7a7a);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 66%); mask:radial-gradient(circle,#000 30%,transparent 66%);
  opacity:.55; animation:prismSpin 9s linear infinite; }
@keyframes prismSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* ── extra HATS ── */
/* visor — curved brim + band */
.pup .hat-visor{ left:74px; top:38px; width:104px; height:26px; }
.pup .hat-visor .band{ position:absolute; left:20px; top:0; width:64px; height:12px; border-radius:7px; background:linear-gradient(#2a6fd0,#164a94); box-shadow:0 2px 4px -2px #000; }
.pup .hat-visor .brim{ position:absolute; left:44px; top:8px; width:60px; height:15px; border-radius:6px 16px 16px 6px/6px 12px 12px 6px; background:linear-gradient(#3a86e0,#1f5aa8); transform:rotate(6deg); }
.pup.apollo .hat-visor{ top:34px; }
/* beanie — knit dome + fold */
.pup .hat-beanie{ left:78px; top:6px; width:96px; height:52px; }
.pup .hat-beanie .dome{ position:absolute; left:0; top:0; width:96px; height:44px; border-radius:48px 48px 20px 20px; background:linear-gradient(#c8434a,#8a1f2a); box-shadow:inset 0 3px 6px rgba(255,255,255,.15),0 4px 9px -5px #000; }
.pup .hat-beanie .fold{ position:absolute; left:-2px; bottom:0; width:100px; height:16px; border-radius:9px; background:linear-gradient(#e0555c,#a8262f); }
.pup.apollo .hat-beanie{ top:0; }
/* bucket — dome + down-brim */
.pup .hat-bucket{ left:68px; top:8px; width:116px; height:52px; }
.pup .hat-bucket .dome{ position:absolute; left:26px; top:0; width:64px; height:34px; border-radius:26px 26px 6px 6px; background:linear-gradient(#7fae5a,#456b2c); }
.pup .hat-bucket .brim{ position:absolute; left:0; top:26px; width:116px; height:20px; border-radius:50%; background:linear-gradient(#8fbf6a,#3e6024); box-shadow:0 4px 8px -5px #000; }
.pup.apollo .hat-bucket{ top:2px; }
/* head bow */
.pup .hat-bowhead{ left:96px; top:26px; width:60px; height:30px; }
.pup .hat-bowhead .l, .pup .hat-bowhead .r{ position:absolute; top:0; width:27px; height:30px; background:linear-gradient(#ff8ec0,#e0407e); }
.pup .hat-bowhead .l{ left:0; clip-path:polygon(100% 50%,0 0,12% 50%,0 100%); }
.pup .hat-bowhead .r{ right:0; clip-path:polygon(0 50%,100% 0,88% 50%,100% 100%); }
.pup .hat-bowhead .k{ position:absolute; left:50%; top:7px; transform:translateX(-50%); width:14px; height:16px; border-radius:5px; background:#d0356e; }
.pup.apollo .hat-bowhead{ top:24px; }
/* cat ears — headband + triangles */
.pup .hat-catears{ left:78px; top:16px; width:96px; height:40px; }
.pup .hat-catears .band{ position:absolute; left:0; bottom:0; width:96px; height:12px; border-radius:8px; background:linear-gradient(#3a3a44,#1a1a20); }
.pup .hat-catears .l, .pup .hat-catears .r{ position:absolute; bottom:8px; width:26px; height:30px; background:linear-gradient(#3a3a44,#18181e); }
.pup .hat-catears .l{ left:8px; clip-path:polygon(0 100%,50% 0,100% 100%); }
.pup .hat-catears .r{ right:8px; clip-path:polygon(0 100%,50% 0,100% 100%); }
.pup .hat-catears .l::after, .pup .hat-catears .r::after{ content:''; position:absolute; left:50%; bottom:2px; transform:translateX(-50%); width:12px; height:16px; background:#f5a8c0; clip-path:polygon(0 100%,50% 0,100% 100%); }
.pup.apollo .hat-catears{ top:16px; }
/* sun hat — floppy brim + low dome + ribbon */
.pup .hat-sunhat{ left:61px; top:14px; width:130px; height:50px; }
.pup .hat-sunhat .brim{ position:absolute; left:0; top:22px; width:130px; height:24px; border-radius:50%; background:linear-gradient(#f0d68a,#c8a24a); box-shadow:0 5px 10px -6px #000; }
.pup .hat-sunhat .dome{ position:absolute; left:38px; top:0; width:54px; height:30px; border-radius:26px 26px 8px 8px; background:linear-gradient(#f4dc96,#d0aa54); }
.pup .hat-sunhat .band{ position:absolute; left:38px; top:20px; width:54px; height:8px; background:#e07a8a; border-radius:2px; }
.pup.apollo .hat-sunhat{ top:8px; }
/* chef toque — band + puff */
.pup .hat-chef{ left:84px; top:-6px; width:84px; height:58px; }
.pup .hat-chef .band{ position:absolute; left:8px; bottom:0; width:68px; height:20px; border-radius:5px; background:linear-gradient(#fff,#e2e2e8); box-shadow:0 3px 6px -3px #000; }
.pup .hat-chef .puff{ position:absolute; left:0; top:0; width:84px; height:42px; border-radius:42px 42px 14px 14px; background:radial-gradient(60% 60% at 30% 30%,#fff,#dfe0e6); box-shadow:inset 0 3px 6px rgba(0,0,0,.06); }
.pup.apollo .hat-chef{ top:-12px; }
/* cowboy — wide brim + crown + band */
.pup .hat-cowboy{ left:62px; top:2px; width:128px; height:50px; }
.pup .hat-cowboy .brim{ position:absolute; left:0; top:28px; width:128px; height:20px; border-radius:50%; background:linear-gradient(#a06a34,#5c3a16); box-shadow:0 4px 8px -5px #000; }
.pup .hat-cowboy .crown{ position:absolute; left:34px; top:0; width:60px; height:36px; border-radius:26px 26px 8px 8px; background:linear-gradient(#b47a3e,#6b451c); }
.pup .hat-cowboy .band{ position:absolute; left:34px; top:26px; width:60px; height:8px; background:#3a2a16; border-radius:2px; }
.pup.apollo .hat-cowboy{ top:-4px; }
/* headphones — arc band + cups */
.pup .hat-headphones{ left:64px; top:24px; width:152px; height:98px; }
.pup .hat-headphones .band{ position:absolute; left:8px; top:0; width:136px; height:66px; border:9px solid #2a2a32; border-bottom:0; border-radius:68px 68px 0 0; box-shadow:0 2px 4px -2px #000; }
.pup .hat-headphones .l, .pup .hat-headphones .r{ position:absolute; top:50px; width:24px; height:42px; border-radius:8px; background:linear-gradient(#3a3a44,#18181e); box-shadow:inset 0 2px 3px rgba(255,255,255,.15); }
.pup .hat-headphones .l{ left:0; } .pup .hat-headphones .r{ right:0; }
.pup.apollo .hat-headphones{ top:22px; }
/* top hat — brim + crown + band */
.pup .hat-tophat{ left:82px; top:-6px; width:88px; height:70px; }
.pup .hat-tophat .brim{ position:absolute; left:0; bottom:0; width:88px; height:14px; border-radius:50%; background:linear-gradient(#2a2a32,#111116); box-shadow:0 4px 8px -5px #000; }
.pup .hat-tophat .crown{ position:absolute; left:16px; top:0; width:56px; height:56px; border-radius:8px 8px 4px 4px; background:linear-gradient(#3a3a44,#16161c); }
.pup .hat-tophat .band{ position:absolute; left:16px; bottom:12px; width:56px; height:10px; background:#b4271f; }
.pup.apollo .hat-tophat{ top:-10px; }
/* halo — glowing gold ring (prestige) */
.pup .hat-halo{ left:89px; top:-12px; width:74px; height:26px; }
.pup .hat-halo .ring{ position:absolute; inset:0; border-radius:50%; border:6px solid #ffe08a; background:transparent;
  box-shadow:0 0 18px 4px rgba(255,214,120,.85), inset 0 0 8px rgba(255,214,120,.8); }
.pup.apollo .hat-halo{ top:-16px; }
/* shamrock band (seasonal) */
.pup .hat-shamrock{ left:78px; top:16px; width:96px; height:44px; }
.pup .hat-shamrock .band{ position:absolute; left:0; bottom:0; width:96px; height:11px; border-radius:7px; background:linear-gradient(#2a8f3a,#14611f); }
.pup .hat-shamrock .clover{ position:absolute; left:38px; top:0; width:20px; height:20px;
  background:radial-gradient(circle at 50% 78%,#2f9e3f 0 30%,transparent 32%),
    radial-gradient(circle at 22% 34%,#3fbf4f 0 34%,transparent 36%),
    radial-gradient(circle at 78% 34%,#3fbf4f 0 34%,transparent 36%),
    radial-gradient(circle at 50% 12%,#3fbf4f 0 34%,transparent 36%); }
.pup .hat-shamrock .clover::after{ content:''; position:absolute; left:48%; top:52%; width:3px; height:16px; background:#14611f; }
.pup.apollo .hat-shamrock{ top:16px; }
/* pumpkin (seasonal) */
.pup .hat-pumpkin{ left:110px; top:4px; width:60px; height:46px; }
.pup .hat-pumpkin .body{ position:absolute; left:0; bottom:0; width:60px; height:40px; border-radius:50%; background:radial-gradient(60% 60% at 38% 32%,#ffb15e,#e0781f 70%,#b4560f); box-shadow:inset -6px 0 8px rgba(0,0,0,.15); }
.pup .hat-pumpkin .body::before, .pup .hat-pumpkin .body::after{ content:''; position:absolute; top:6px; bottom:6px; width:8px; border-radius:50%; background:rgba(160,70,10,.35); }
.pup .hat-pumpkin .body::before{ left:16px; } .pup .hat-pumpkin .body::after{ right:16px; }
.pup .hat-pumpkin .stem{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:9px; height:12px; border-radius:3px; background:linear-gradient(#5a7a2a,#38541a); }
.pup.apollo .hat-pumpkin{ top:2px; }
/* reindeer antlers (seasonal) */
.pup .hat-antlers{ left:62px; top:2px; width:128px; height:54px; }
.pup .hat-antlers::after{ content:''; position:absolute; left:8px; bottom:0; width:112px; height:9px; border-radius:6px; background:linear-gradient(#6b451c,#3a260f); }
.pup .hat-antlers .l, .pup .hat-antlers .r{ position:absolute; top:0; width:34px; height:50px; }
.pup .hat-antlers .l{ left:18px; transform:rotate(-14deg); } .pup .hat-antlers .r{ right:18px; transform:rotate(14deg); }
.pup .hat-antlers .l::before, .pup .hat-antlers .r::before{ content:''; position:absolute; left:14px; bottom:0; width:7px; height:50px; border-radius:4px; background:linear-gradient(#a06a34,#6b451c); }
.pup .hat-antlers .l::after, .pup .hat-antlers .r::after{ content:''; position:absolute; left:0; top:6px; width:20px; height:7px; border-radius:4px; background:linear-gradient(#8f5a28,#5c3a16); transform:rotate(38deg); }
.pup.apollo .hat-antlers{ top:-2px; }

/* ── extra TOYS ── */
.pup .toy-redball{ left:184px; top:256px; width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 36% 30%, #ff9a86, #e2453a 70%, #a01f1f); box-shadow:0 5px 10px -5px #000; }
.pup .toy-redball::after{ content:''; position:absolute; left:8px; top:8px; width:12px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); }
.pup .toy-purpleball{ left:184px; top:256px; width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 36% 30%, #c9a8ff, #8a4de0 72%, #4d1f8a); box-shadow:0 5px 10px -5px #000; }
.pup .toy-purpleball::after{ content:''; position:absolute; left:8px; top:8px; width:12px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); }
.pup .toy-discpink{ left:172px; top:270px; width:56px; height:26px; border-radius:50%; transform:rotate(-12deg); background:radial-gradient(60% 70% at 50% 30%, #ffe4f0 0 40%, #f06ab0 42%); box-shadow:0 6px 10px -5px #000, inset 0 -3px 5px rgba(0,0,0,.25); }
.pup .toy-stick{ left:176px; top:272px; width:60px; height:14px; border-radius:7px; background:linear-gradient(#c69a5a,#8a6432); transform:rotate(-16deg); box-shadow:0 4px 8px -5px #000; }
.pup .toy-stick::after{ content:''; position:absolute; left:10px; top:4px; width:34px; height:3px; border-radius:2px; background:rgba(90,60,20,.4); }
.pup .toy-lenscap{ left:184px; top:258px; width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#4a4a52,#18181e 72%); box-shadow:0 5px 10px -5px #000, inset 0 0 0 3px #2a2a30; }
.pup .toy-lenscap i{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:14px; height:8px; border-radius:3px; background:#2a2a30; box-shadow:0 0 0 2px #3a3a42; }
.pup .toy-camera{ left:176px; top:262px; width:54px; height:38px; border-radius:8px; background:linear-gradient(#3a3a44,#1a1a20); box-shadow:0 5px 10px -5px #000; }
.pup .toy-camera .lens{ position:absolute; left:28px; top:9px; width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#8ab5e3,#1f4d8a 70%,#0c2540); box-shadow:inset 0 0 0 2px #12121a; }
.pup .toy-camera .btn{ position:absolute; left:8px; top:-4px; width:12px; height:7px; border-radius:2px; background:#b4271f; }
.pup .toy-clapper{ left:176px; top:262px; width:56px; height:40px; border-radius:4px; background:linear-gradient(#2a2a32,#14141a); box-shadow:0 5px 10px -5px #000; }
.pup .toy-clapper .top{ position:absolute; left:0; top:-8px; width:56px; height:12px; border-radius:3px; background:repeating-linear-gradient(58deg,#fff 0 8px,#1a1a1f 8px 16px); transform-origin:left bottom; transform:rotate(-10deg); }
.pup .toy-mic{ left:190px; top:256px; width:22px; height:44px; }
.pup .toy-mic .ball{ position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 36% 32%,#c8c8d2,#6a6a72 72%); box-shadow:0 3px 6px -3px #000; }
.pup .toy-mic .stick{ position:absolute; left:8px; top:18px; width:6px; height:26px; border-radius:3px; background:linear-gradient(#3a3a42,#1a1a20); }
.pup .toy-duck{ left:182px; top:262px; width:50px; height:38px; }
.pup .toy-duck::before{ content:''; position:absolute; left:0; bottom:0; width:38px; height:24px; border-radius:16px 20px 12px 12px; background:radial-gradient(circle at 34% 30%,#ffe98a,#f0c33f 74%); box-shadow:0 4px 8px -5px #000; }
.pup .toy-duck .head{ position:absolute; left:22px; top:0; width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#ffe98a,#f0c33f 72%); }
.pup .toy-duck .head::after{ content:''; position:absolute; left:5px; top:6px; width:3px; height:3px; border-radius:50%; background:#1a1a20; }
.pup .toy-duck .beak{ position:absolute; left:40px; top:9px; width:10px; height:7px; border-radius:2px 4px 4px 2px; background:#f0862b; }
.pup .toy-plush{ left:184px; top:260px; width:40px; height:40px; }
.pup .toy-plush .face{ position:absolute; left:4px; top:4px; width:32px; height:32px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#c89a6a,#8a6338 74%); box-shadow:0 4px 8px -5px #000; }
.pup .toy-plush .ear{ position:absolute; left:4px; top:0; width:14px; height:14px; border-radius:50%; background:#a67c48; }
.pup .toy-plush .ear::after{ content:''; position:absolute; left:24px; top:0; width:14px; height:14px; border-radius:50%; background:#a67c48; }

/* ═══ v2.1 additions ═══ */
/* collars */
.pup .collar-turquoise{ background:linear-gradient(#5fd8c8,#1f9a86); }
.pup .collar-maroon{ background:linear-gradient(#a84450,#5a1420); }
.pup .collar-olive{ background:linear-gradient(#9aa04a,#4a5016); }
.pup .collar-navy{ background:linear-gradient(#4f6398,#1a2648); }
.pup .collar-grape{ background:linear-gradient(#8a5ab0,#42186a); }
.pup .collar-tangerine{ background:linear-gradient(#ff9a4a,#d05a12); }
.pup .collar-blush{ background:linear-gradient(#f8c2d0,#e88098); }
.pup .collar-steel{ background:linear-gradient(#8a94a4,#454e5c); }
/* auras */
.pup .aura-peach{ background:radial-gradient(circle, rgba(255,150,110,.5), rgba(224,110,70,.15) 44%, transparent 68%); }
.pup .aura-jade{ background:radial-gradient(circle, rgba(60,200,140,.46), rgba(20,140,90,.14) 44%, transparent 68%); }
.pup .aura-cobalt{ background:radial-gradient(circle, rgba(80,120,240,.46), rgba(30,50,180,.14) 44%, transparent 68%); }
.pup .aura-plum{ background:radial-gradient(circle, rgba(180,90,170,.46), rgba(120,40,110,.14) 44%, transparent 68%); }
.pup .aura-honey{ background:radial-gradient(circle, rgba(240,185,60,.5), rgba(200,140,20,.15) 44%, transparent 68%); }
.pup .aura-aqua{ background:radial-gradient(circle, rgba(70,210,210,.48), rgba(20,150,150,.14) 44%, transparent 68%); }
.pup .aura-blush{ background:radial-gradient(circle, rgba(240,160,190,.46), rgba(200,100,140,.14) 44%, transparent 68%); }
.pup .aura-lime{ background:radial-gradient(circle, rgba(170,216,74,.48), rgba(110,160,30,.14) 44%, transparent 68%); }
/* earmuffs */
.pup .hat-earmuffs{ left:62px; top:24px; width:156px; height:96px; }
.pup .hat-earmuffs .band{ position:absolute; left:16px; top:0; width:124px; height:60px; border:8px solid #d0455a; border-bottom:0; border-radius:62px 62px 0 0; box-shadow:0 2px 4px -2px #000; }
.pup .hat-earmuffs .l, .pup .hat-earmuffs .r{ position:absolute; top:44px; width:34px; height:36px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#ff9aa8,#c0344a 70%); box-shadow:0 3px 6px -3px #000, inset 0 2px 4px rgba(255,255,255,.25); }
.pup .hat-earmuffs .l{ left:0; } .pup .hat-earmuffs .r{ right:0; }
.pup.apollo .hat-earmuffs{ top:22px; }
/* snapback */
.pup .hat-snapback{ left:70px; top:22px; width:112px; height:46px; }
.pup .hat-snapback .dome{ position:absolute; left:26px; top:0; width:66px; height:34px; border-radius:30px 30px 6px 6px; background:linear-gradient(#2a2f6a,#141838); }
.pup .hat-snapback .brim{ position:absolute; left:0; top:30px; width:88px; height:14px; border-radius:4px; background:linear-gradient(#1f2450,#0e1230); box-shadow:0 3px 6px -3px #000; }
.pup .hat-snapback .patch{ position:absolute; left:44px; top:8px; width:18px; height:14px; border-radius:3px; background:#e0b83f; }
.pup.apollo .hat-snapback{ top:12px; }
/* propeller cap (spins) */
.pup .hat-propeller{ left:82px; top:18px; width:88px; height:52px; }
.pup .hat-propeller .dome{ position:absolute; left:6px; top:14px; width:76px; height:38px; border-radius:38px 38px 8px 8px; background:conic-gradient(from 90deg,#e2453a 0 90deg,#f0c33f 0 180deg,#2a78db 0 270deg,#3a8f3f 0); }
.pup .hat-propeller .stalk{ position:absolute; left:50%; top:6px; transform:translateX(-50%); width:5px; height:12px; background:#3a3a42; }
.pup .hat-propeller .prop{ position:absolute; left:22px; top:0; width:44px; height:8px; border-radius:4px; background:linear-gradient(90deg,#e2453a,#f0c33f); box-shadow:0 1px 2px rgba(0,0,0,.3); animation:propSpin 1.1s linear infinite; }
@keyframes propSpin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
.pup.apollo .hat-propeller{ top:4px; }
/* headscarf */
.pup .hat-headscarf{ left:76px; top:16px; width:100px; height:48px; }
.pup .hat-headscarf .dome{ position:absolute; left:0; top:0; width:100px; height:40px; border-radius:50px 50px 16px 16px; background:linear-gradient(#e2554a,#a01f28); }
.pup .hat-headscarf .dots{ position:absolute; left:0; top:0; width:100px; height:40px; border-radius:50px 50px 16px 16px; background:radial-gradient(circle at 20px 14px,#fff 0 3px,transparent 4px),radial-gradient(circle at 50px 22px,#fff 0 3px,transparent 4px),radial-gradient(circle at 78px 14px,#fff 0 3px,transparent 4px); }
.pup .hat-headscarf .knot{ position:absolute; right:-4px; top:20px; width:16px; height:14px; background:#c0343a; border-radius:4px; }
.pup.apollo .hat-headscarf{ top:2px; }
/* toys */
.pup .toy-yarnball{ left:184px; top:256px; width:40px; height:40px; border-radius:50%; background:radial-gradient(circle at 36% 30%,#ffb0d0,#e0609a 70%); box-shadow:0 5px 10px -5px #000; overflow:hidden; }
.pup .toy-yarnball::before{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(40deg,transparent 0 4px,rgba(160,30,90,.35) 4px 5px); }
.pup .toy-yarnball::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(-40deg,transparent 0 5px,rgba(255,255,255,.25) 5px 6px); }
.pup .toy-ring{ left:176px; top:258px; width:52px; height:40px; border-radius:50%; border:9px solid; border-color:#e0b060 #c68a3a #b0742a #d89c50; background:transparent; box-shadow:0 5px 10px -5px #000, inset 0 0 0 1px rgba(0,0,0,.2); }
.pup .toy-kong{ left:186px; top:254px; width:36px; height:46px; filter:drop-shadow(0 5px 8px rgba(0,0,0,.5)); }
.pup .toy-kong i{ position:absolute; left:50%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle at 38% 30%,#ff8a80,#c02020 72%); }
.pup .toy-kong .a{ bottom:0; width:36px; height:22px; }
.pup .toy-kong .b{ bottom:14px; width:28px; height:18px; }
.pup .toy-kong .c{ bottom:26px; width:20px; height:16px; }

/* ═══ v2.2 · Clubs & Activities ═══ */
/* ── hats ── */
/* marching band shako */
.pup .hat-shako{ left:86px; top:-8px; width:84px; height:80px; }
.pup .hat-shako .body{ position:absolute; left:8px; top:8px; width:68px; height:56px; border-radius:8px 8px 6px 6px; background:linear-gradient(#2a2a34,#111116); }
.pup .hat-shako .visor{ position:absolute; left:4px; top:58px; width:76px; height:12px; border-radius:6px; background:linear-gradient(#3a3a44,#0e0e12); box-shadow:0 3px 5px -3px #000; }
.pup .hat-shako .plume{ position:absolute; left:50%; top:-14px; transform:translateX(-50%); width:14px; height:30px; border-radius:7px; background:linear-gradient(#fff,#d0d0d8); }
.pup .hat-shako .plate{ position:absolute; left:50%; top:22px; transform:translateX(-50%); width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 40% 32%,#ffe28a,#c8971f 72%); box-shadow:inset 0 0 0 2px #a8801f; }
.pup.apollo .hat-shako{ top:-28px; }
/* straw hat (ag / farm) */
.pup .hat-strawhat{ left:58px; top:12px; width:136px; height:52px; }
.pup .hat-strawhat .brim{ position:absolute; left:0; top:24px; width:136px; height:24px; border-radius:50%; background:radial-gradient(circle,#e8cf8a,#c8a24a 70%); box-shadow:0 5px 10px -6px #000; }
.pup .hat-strawhat .brim::after{ content:''; position:absolute; inset:0; border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 3px,rgba(140,90,42,.14) 3px 4px); }
.pup .hat-strawhat .dome{ position:absolute; left:40px; top:0; width:56px; height:30px; border-radius:26px 26px 8px 8px; background:linear-gradient(#f0dc9a,#c8a24a); }
.pup .hat-strawhat .band{ position:absolute; left:40px; top:20px; width:56px; height:8px; background:#8a5a2a; border-radius:2px; }
.pup.apollo .hat-strawhat{ top:6px; }
/* safety goggles (STEM) */
.pup .hat-goggles{ left:78px; top:32px; width:96px; height:36px; }
.pup .hat-goggles .strap{ position:absolute; left:0; top:13px; width:96px; height:10px; background:#3a3a42; border-radius:5px; }
.pup .hat-goggles .l, .pup .hat-goggles .r{ position:absolute; top:2px; width:34px; height:30px; border-radius:10px; background:radial-gradient(circle at 38% 30%,rgba(210,235,255,.9),rgba(120,170,220,.6)); border:3px solid #d0d4dc; box-shadow:0 2px 4px -2px #000; }
.pup .hat-goggles .l{ left:6px; } .pup .hat-goggles .r{ right:6px; }
.pup.apollo .hat-goggles{ top:24px; }
/* hard hat (ag / shop) */
.pup .hat-hardhat{ left:74px; top:6px; width:108px; height:48px; }
.pup .hat-hardhat .dome{ position:absolute; left:20px; top:0; width:68px; height:36px; border-radius:34px 34px 10px 10px; background:linear-gradient(#ffd23a,#d89a10); }
.pup .hat-hardhat .ridge{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:8px; height:34px; background:#e0a81f; border-radius:4px; }
.pup .hat-hardhat .brim{ position:absolute; left:0; top:30px; width:108px; height:14px; border-radius:50%; background:linear-gradient(#ffcf2a,#c88f0f); box-shadow:0 3px 6px -3px #000; }
.pup.apollo .hat-hardhat{ top:0; }
/* athletic sweatband */
.pup .hat-sweatband{ left:80px; top:42px; width:92px; height:20px; }
.pup .hat-sweatband .band{ position:absolute; inset:0; border-radius:10px; background:linear-gradient(#fff,#e2e2e8); box-shadow:0 2px 4px -2px #000; }
.pup .hat-sweatband .stripe{ position:absolute; left:6px; right:6px; top:7px; height:6px; background:#c8202f; border-radius:2px; }
.pup.apollo .hat-sweatband{ top:40px; }
/* tiara (dance / drill) */
.pup .hat-tiara{ left:90px; top:24px; width:72px; height:28px; }
.pup .hat-tiara .band{ position:absolute; left:0; bottom:0; width:72px; height:8px; border-radius:5px; background:linear-gradient(#ffe58a,#d8ad3a); }
.pup .hat-tiara .crown{ position:absolute; left:6px; bottom:6px; width:60px; height:18px; background:linear-gradient(#ffe58a,#d8ad3a); clip-path:polygon(0 100%,12% 40%,25% 100%,38% 18%,50% 100%,62% 18%,75% 100%,88% 40%,100% 100%); }
.pup .hat-tiara .gem{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:8px; height:8px; border-radius:50%; background:#e0407e; box-shadow:0 0 6px #e0407e; }
.pup.apollo .hat-tiara{ top:10px; }
/* jester hat (theatre) */
.pup .hat-jester{ left:76px; top:12px; width:100px; height:48px; }
.pup .hat-jester .band{ position:absolute; left:0; bottom:0; width:100px; height:10px; border-radius:6px; background:#e0b83f; }
.pup .hat-jester .l, .pup .hat-jester .m, .pup .hat-jester .r{ position:absolute; bottom:8px; width:26px; height:36px; }
.pup .hat-jester .l{ left:2px; background:#c8202f; clip-path:polygon(0 100%,50% 0,100% 100%); transform:rotate(-12deg); transform-origin:bottom; }
.pup .hat-jester .m{ left:37px; background:#2a78db; clip-path:polygon(0 100%,50% 0,100% 100%); }
.pup .hat-jester .r{ right:2px; background:#2a8f3a; clip-path:polygon(0 100%,50% 0,100% 100%); transform:rotate(12deg); transform-origin:bottom; }
.pup .hat-jester .l::after, .pup .hat-jester .m::after, .pup .hat-jester .r::after{ content:''; position:absolute; left:50%; top:-3px; transform:translateX(-50%); width:7px; height:7px; border-radius:50%; background:#ffe58a; }
.pup.apollo .hat-jester{ top:-4px; }
/* ── collars ── */
.pup .collar-ffa{ background:repeating-linear-gradient(90deg,#16255a 0 4px,#1f316e 4px 8px); }
.pup .collar-ffa .tag{ background:radial-gradient(circle at 40% 32%,#ffe28a,#c8971f); border-color:#a8801f; }
.pup .collar-velvet{ background:linear-gradient(#7a1420,#4a0c14); box-shadow:0 3px 6px -3px #000, inset 0 2px 4px rgba(255,255,255,.1); }
.pup .collar-velvet .tag{ background:radial-gradient(circle at 40% 32%,#ffe28a,#c8971f); border-color:#a8801f; }
.pup .collar-band{ background:linear-gradient(#1a2a6a,#0e1640); }
.pup .collar-band .tag{ background:radial-gradient(circle at 40% 32%,#ffe28a,#c8971f); border-color:#a8801f; }
.pup .collar-band::after{ content:''; position:absolute; left:8px; right:8px; top:50%; transform:translateY(-50%); height:4px; background:#e0b83f; border-radius:2px; }
.pup .collar-letterman{ background:linear-gradient(#1f4d8a,#12335e); }
.pup .collar-letterman .tag{ display:none; }
.pup .collar-letterman::after{ content:'M'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font:800 12px/1 Outfit,system-ui,sans-serif; color:#c8202f; background:#fff; width:19px; height:19px; border-radius:5px; display:grid; place-items:center; box-shadow:0 2px 4px -2px #000; }
.pup .collar-medal{ background:linear-gradient(#c8202f,#8a1420); }
.pup .collar-medal .tag{ display:none; }
.pup .collar-medal::after{ content:''; position:absolute; left:50%; top:15px; transform:translateX(-50%); width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 38% 30%,#ffe88a,#c8971f 70%); box-shadow:0 3px 6px -3px #000, inset 0 0 0 2px #a8801f; }
.pup .collar-stole{ background:linear-gradient(#5a2a8a,#3a1a5e); }
.pup .collar-stole .tag{ display:none; }
.pup .collar-stole::before, .pup .collar-stole::after{ content:''; position:absolute; top:4px; width:12px; height:42px; background:linear-gradient(#6a3a9a,#4a2270); border-radius:0 0 5px 5px; }
.pup .collar-stole::before{ left:calc(50% - 20px); } .pup .collar-stole::after{ left:calc(50% + 8px); }
/* ── toys / props ── */
.pup .toy-palette{ left:174px; top:262px; width:58px; height:40px; }
.pup .toy-palette .base{ position:absolute; inset:0; border-radius:52% 52% 48% 42%/62% 60% 42% 52%; background:radial-gradient(circle at 40% 34%,#e8dcc4,#c8b89a 74%); box-shadow:0 4px 8px -5px #000; }
.pup .toy-palette .base::after{ content:''; position:absolute; right:9px; bottom:7px; width:10px; height:10px; border-radius:50%; background:#2a2320; }
.pup .toy-palette .dabs{ position:absolute; inset:0; background:radial-gradient(circle at 26% 36%,#e2453a 0 4px,transparent 5px),radial-gradient(circle at 44% 26%,#2a78db 0 4px,transparent 5px),radial-gradient(circle at 62% 34%,#f0b82f 0 4px,transparent 5px),radial-gradient(circle at 40% 56%,#3a8f3f 0 4px,transparent 5px); }
.pup .toy-trophy{ left:184px; top:254px; width:40px; height:46px; }
.pup .toy-trophy .cup{ position:absolute; left:8px; top:0; width:24px; height:26px; border-radius:6px 6px 15px 15px; background:linear-gradient(#ffe28a,#c8971f); box-shadow:inset -3px 0 4px rgba(0,0,0,.2); }
.pup .toy-trophy .cup::before, .pup .toy-trophy .cup::after{ content:''; position:absolute; top:2px; width:8px; height:14px; border:3px solid #e6c25a; border-radius:50%; }
.pup .toy-trophy .cup::before{ left:-8px; } .pup .toy-trophy .cup::after{ right:-8px; }
.pup .toy-trophy .stem{ position:absolute; left:50%; top:26px; transform:translateX(-50%); width:6px; height:9px; background:#c8971f; }
.pup .toy-trophy .base{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:26px; height:8px; border-radius:2px; background:#8a5a2a; box-shadow:0 4px 7px -4px #000; }
.pup .toy-masks{ left:176px; top:262px; width:54px; height:40px; }
.pup .toy-masks .m1, .pup .toy-masks .m2{ position:absolute; top:4px; width:30px; height:34px; border-radius:50% 50% 50% 50%/40% 40% 62% 62%; box-shadow:0 4px 7px -5px #000; }
.pup .toy-masks .m1{ left:0; background:radial-gradient(circle at 40% 30%,#ffe88a,#c8971f 74%); }
.pup .toy-masks .m2{ right:0; background:radial-gradient(circle at 40% 30%,#e2e2ea,#9aa0ac 74%); }
.pup .toy-masks .m1::after, .pup .toy-masks .m2::after{ content:''; position:absolute; left:7px; top:12px; width:4px; height:4px; border-radius:50%; background:#1a1a20; box-shadow:13px 0 0 #1a1a20; }
.pup .toy-football{ left:180px; top:264px; width:48px; height:32px; }
.pup .toy-football .b{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 36% 32%,#a0632f,#6b3d18 74%); transform:rotate(-18deg); box-shadow:0 4px 8px -5px #000; }
.pup .toy-football .b::after{ content:''; position:absolute; left:50%; top:28%; transform:translateX(-50%); width:2px; height:44%; background:#f0ead6; box-shadow:-4px 0 0 #f0ead6,4px 0 0 #f0ead6; }
.pup .toy-basketball{ left:184px; top:256px; width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 36% 30%,#ffb15e,#e0781f 70%); box-shadow:0 5px 10px -5px #000; overflow:hidden; }
.pup .toy-basketball::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 47%,rgba(90,40,10,.5) 48% 52%,transparent 53%),linear-gradient(0deg,transparent 47%,rgba(90,40,10,.5) 48% 52%,transparent 53%); }
.pup .toy-basketball::after{ content:''; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(90,40,10,.4); }
.pup .toy-beaker{ left:186px; top:258px; width:34px; height:42px; }
.pup .toy-beaker .glass{ position:absolute; left:4px; top:2px; width:26px; height:38px; border:2px solid rgba(210,230,255,.7); border-radius:3px 3px 8px 8px; background:linear-gradient(180deg,transparent 38%,rgba(60,160,220,.6) 38%); box-shadow:0 4px 7px -5px #000; }
.pup .toy-beaker .glass::after{ content:''; position:absolute; left:5px; bottom:7px; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.6); }
.pup .toy-baton{ left:176px; top:268px; width:56px; height:18px; }
.pup .toy-baton .stick{ position:absolute; left:8px; top:7px; width:44px; height:4px; border-radius:2px; background:linear-gradient(90deg,#e8e8ee,#b0b0ba); transform:rotate(-18deg); transform-origin:left; }
.pup .toy-baton .knob{ position:absolute; left:0; top:4px; width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#fff,#c8971f 72%); box-shadow:0 2px 4px -2px #000; }
.pup .toy-note{ left:186px; top:258px; width:34px; height:42px; }
.pup .toy-note .head{ position:absolute; left:2px; bottom:2px; width:20px; height:16px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#4a4a56,#16161c 74%); transform:rotate(-18deg); box-shadow:0 3px 6px -4px #000; }
.pup .toy-note .stem{ position:absolute; left:19px; top:2px; width:4px; height:30px; background:#16161c; }
.pup .toy-note .flag{ position:absolute; left:21px; top:2px; width:10px; height:16px; border-radius:0 8px 0 8px; background:#16161c; }
.pup .toy-pompom{ left:178px; top:260px; width:52px; height:38px; }
.pup .toy-pompom .p{ position:absolute; top:2px; width:30px; height:30px; border-radius:50%; box-shadow:0 4px 7px -5px #000; }
.pup .toy-pompom .p1{ left:0; background:radial-gradient(circle at 38% 32%,#ff9ec8,#e0407e 72%); }
.pup .toy-pompom .p2{ right:0; background:radial-gradient(circle at 38% 32%,#c0a8ff,#7a4de0 72%); }
.pup .toy-pompom .p::before{ content:''; position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(rgba(255,255,255,.28) 0 8deg,transparent 8deg 16deg); }