/**
 * CostumeContexts - Themed costume overlays for the avatar system
 * Depends on: AvatarRenderer, AvatarAnimations
 */
(function() {
  'use strict';

  // ============================================================================
  // UTILITY FUNCTIONS
  // ============================================================================

  function roundRect(ctx, x, y, w, h, r) {
    if (w < 2 * r) r = w / 2;
    if (h < 2 * r) r = h / 2;
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.arcTo(x + w, y, x + w, y + h, r);
    ctx.arcTo(x + w, y + h, x, y + h, r);
    ctx.arcTo(x, y + h, x, y, r);
    ctx.arcTo(x, y, x + w, y, r);
    ctx.closePath();
  }

  function darken(color, amount) {
    var hex = color.replace('#', '');
    var r = Math.max(0, Math.floor(parseInt(hex.substr(0, 2), 16) * (1 - amount)));
    var g = Math.max(0, Math.floor(parseInt(hex.substr(2, 2), 16) * (1 - amount)));
    var b = Math.max(0, Math.floor(parseInt(hex.substr(4, 2), 16) * (1 - amount)));
    return '#' + r.toString(16).padStart(2, '0') + g.toString(16).padStart(2, '0') + b.toString(16).padStart(2, '0');
  }

  function lighten(color, amount) {
    var hex = color.replace('#', '');
    var r = Math.min(255, Math.floor(parseInt(hex.substr(0, 2), 16) + (255 - parseInt(hex.substr(0, 2), 16)) * amount));
    var g = Math.min(255, Math.floor(parseInt(hex.substr(2, 2), 16) + (255 - parseInt(hex.substr(2, 2), 16)) * amount));
    var b = Math.min(255, Math.floor(parseInt(hex.substr(4, 2), 16) + (255 - parseInt(hex.substr(4, 2), 16)) * amount));
    return '#' + r.toString(16).padStart(2, '0') + g.toString(16).padStart(2, '0') + b.toString(16).padStart(2, '0');
  }

  function getArmTransform(transforms, arm) {
    if (!transforms || !transforms[arm]) return { rotation: 0, x: 0, y: 0 };
    return transforms[arm];
  }

  // ============================================================================
  // COSTUME: KNIGHT ARMOR
  // ============================================================================

  var knightArmor = {
    id: 'knight-armor',
    name: 'Knight Armor',
    category: 'costume',
    avatarMode: 'FULL_BODY',
    animations: ['idle', 'walk', 'attack', 'hurt', 'celebrate'],
    defaultAnimation: 'idle',
    accessoryVisibility: {
      eyewear: false,
      headwear: true,
      effects: true
    },
    layerOrder: ['avatar-body', 'costume-base', 'avatar-head', 'costume-overlay', 'earned-accessories'],
    recommendedFor: ['rpg', 'adventure', 'action'],
    description: 'Medieval knight in shining armor',
    avatarPosition: { x: 0.5, y: 0.5 },
    avatarScale: 1.0,
    props: [
      { id: 'sword', anchor: 'rightArm', offset: { x: 5, y: 20 } },
      { id: 'shield', anchor: 'leftArm', offset: { x: -10, y: 0 } }
    ],
    contextEffects: {
      attack: { type: 'slash', color: '#c0c0c0' },
      hurt: { type: 'sparks', color: '#ffa500' }
    },

    renderCostumeUnder: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;
      var metalColor = '#a8a9ad';
      var metalDark = '#7d7f83';
      var metalLight = '#d4d5d9';

      // Cape (behind everything)
      ctx.fillStyle = '#8b0000';
      ctx.beginPath();
      ctx.moveTo(cx - 18 * scale, y + 68 * scale);
      ctx.quadraticCurveTo(cx - 25 * scale, y + 100 * scale, cx - 20 * scale + Math.sin(time * 2) * 3 * scale, y + 145 * scale);
      ctx.lineTo(cx + 20 * scale + Math.sin(time * 2 + 1) * 3 * scale, y + 145 * scale);
      ctx.quadraticCurveTo(cx + 25 * scale, y + 100 * scale, cx + 18 * scale, y + 68 * scale);
      ctx.closePath();
      ctx.fill();

      // Cape trim
      ctx.fillStyle = '#ffd700';
      ctx.fillRect(cx - 20 * scale, y + 140 * scale, 40 * scale, 5 * scale);

      // Body armor (chestplate)
      ctx.fillStyle = metalColor;
      roundRect(ctx, cx - 22 * scale, y + 68 * scale, 44 * scale, 50 * scale, 4 * scale);
      ctx.fill();

      // Chestplate details
      ctx.strokeStyle = metalDark;
      ctx.lineWidth = 2 * scale;
      ctx.beginPath();
      ctx.moveTo(cx, y + 70 * scale);
      ctx.lineTo(cx, y + 115 * scale);
      ctx.stroke();

      // Armor ridges
      ctx.strokeStyle = metalLight;
      ctx.lineWidth = 1 * scale;
      for (var i = 0; i < 3; i++) {
        ctx.beginPath();
        ctx.moveTo(cx - 18 * scale, y + 78 * scale + i * 12 * scale);
        ctx.lineTo(cx + 18 * scale, y + 78 * scale + i * 12 * scale);
        ctx.stroke();
      }

      // Leg armor (greaves)
      ctx.fillStyle = metalColor;
      roundRect(ctx, cx - 16 * scale, y + 120 * scale, 12 * scale, 35 * scale, 2 * scale);
      ctx.fill();
      roundRect(ctx, cx + 4 * scale, y + 120 * scale, 12 * scale, 35 * scale, 2 * scale);
      ctx.fill();

      // Knee guards
      ctx.fillStyle = metalLight;
      ctx.beginPath();
      ctx.arc(cx - 10 * scale, y + 125 * scale, 5 * scale, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.arc(cx + 10 * scale, y + 125 * scale, 5 * scale, 0, Math.PI * 2);
      ctx.fill();

      // Armored boots
      ctx.fillStyle = metalDark;
      roundRect(ctx, cx - 18 * scale, y + 152 * scale, 14 * scale, 8 * scale, 2 * scale);
      ctx.fill();
      roundRect(ctx, cx + 4 * scale, y + 152 * scale, 14 * scale, 8 * scale, 2 * scale);
      ctx.fill();
    },

    renderCostumeOver: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;
      var metalColor = '#a8a9ad';
      var metalDark = '#7d7f83';
      var metalLight = '#d4d5d9';

      // Shoulder pauldrons
      ctx.fillStyle = metalColor;
      ctx.beginPath();
      ctx.ellipse(cx - 26 * scale, y + 70 * scale, 12 * scale, 8 * scale, -0.3, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.ellipse(cx + 26 * scale, y + 70 * scale, 12 * scale, 8 * scale, 0.3, 0, Math.PI * 2);
      ctx.fill();

      // Pauldron spikes
      ctx.fillStyle = metalLight;
      ctx.beginPath();
      ctx.moveTo(cx - 32 * scale, y + 65 * scale);
      ctx.lineTo(cx - 35 * scale, y + 58 * scale);
      ctx.lineTo(cx - 28 * scale, y + 65 * scale);
      ctx.fill();
      ctx.beginPath();
      ctx.moveTo(cx + 32 * scale, y + 65 * scale);
      ctx.lineTo(cx + 35 * scale, y + 58 * scale);
      ctx.lineTo(cx + 28 * scale, y + 65 * scale);
      ctx.fill();

      // Helmet
      ctx.fillStyle = metalColor;
      ctx.beginPath();
      ctx.arc(cx, y + 32 * scale, 24 * scale, Math.PI, 0, false);
      ctx.fill();

      // Helmet face plate
      ctx.fillStyle = metalDark;
      roundRect(ctx, cx - 18 * scale, y + 20 * scale, 36 * scale, 28 * scale, 4 * scale);
      ctx.fill();

      // Visor slits (eyes peek through)
      ctx.fillStyle = '#1a1a1a';
      ctx.fillRect(cx - 14 * scale, y + 28 * scale, 10 * scale, 3 * scale);
      ctx.fillRect(cx + 4 * scale, y + 28 * scale, 10 * scale, 3 * scale);

      // Helmet crest
      ctx.fillStyle = '#8b0000';
      ctx.beginPath();
      ctx.moveTo(cx - 3 * scale, y + 8 * scale);
      ctx.lineTo(cx, y - 5 * scale);
      ctx.lineTo(cx + 3 * scale, y + 8 * scale);
      ctx.closePath();
      ctx.fill();

      // Sword (right hand)
      var rightArm = getArmTransform(transforms, 'rightArm');
      ctx.save();
      ctx.translate(cx + 26 * scale, y + 115 * scale);
      ctx.rotate((rightArm.rotation || 0) * Math.PI / 180);

      // Sword blade
      ctx.fillStyle = metalLight;
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(-2 * scale, -35 * scale);
      ctx.lineTo(0, -45 * scale);
      ctx.lineTo(2 * scale, -35 * scale);
      ctx.closePath();
      ctx.fill();

      // Sword guard
      ctx.fillStyle = '#ffd700';
      ctx.fillRect(-6 * scale, -2 * scale, 12 * scale, 4 * scale);

      // Sword handle
      ctx.fillStyle = '#4a3728';
      ctx.fillRect(-2 * scale, 2 * scale, 4 * scale, 10 * scale);

      ctx.restore();

      // Shield (left hand)
      var leftArm = getArmTransform(transforms, 'leftArm');
      ctx.save();
      ctx.translate(cx - 30 * scale, y + 95 * scale);
      ctx.rotate((leftArm.rotation || 0) * Math.PI / 180);

      // Shield body
      ctx.fillStyle = metalColor;
      ctx.beginPath();
      ctx.moveTo(0, -15 * scale);
      ctx.lineTo(12 * scale, -10 * scale);
      ctx.lineTo(12 * scale, 10 * scale);
      ctx.lineTo(0, 20 * scale);
      ctx.lineTo(-12 * scale, 10 * scale);
      ctx.lineTo(-12 * scale, -10 * scale);
      ctx.closePath();
      ctx.fill();

      // Shield emblem
      ctx.fillStyle = '#8b0000';
      ctx.beginPath();
      ctx.arc(0, 0, 6 * scale, 0, Math.PI * 2);
      ctx.fill();

      // Shield cross
      ctx.fillStyle = '#ffd700';
      ctx.fillRect(-1 * scale, -8 * scale, 2 * scale, 16 * scale);
      ctx.fillRect(-6 * scale, -1 * scale, 12 * scale, 2 * scale);

      ctx.restore();
    }
  };

  // ============================================================================
  // COSTUME: SPACE SUIT
  // ============================================================================

  var spaceSuit = {
    id: 'space-suit',
    name: 'Space Suit',
    category: 'costume',
    avatarMode: 'FULL_BODY',
    animations: ['idle', 'walk', 'attack', 'hurt', 'celebrate'],
    defaultAnimation: 'idle',
    accessoryVisibility: {
      eyewear: true,
      headwear: true,
      effects: true
    },
    layerOrder: ['avatar-body', 'costume-base', 'avatar-head', 'costume-overlay', 'earned-accessories'],
    recommendedFor: ['action', 'adventure', 'physics'],
    description: 'Astronaut ready for space exploration',
    avatarPosition: { x: 0.5, y: 0.5 },
    avatarScale: 1.0,
    props: [],
    contextEffects: {
      hurt: { type: 'sparks', color: '#00ffff' }
    },

    renderCostumeUnder: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;
      var suitColor = '#f0f0f0';
      var accentColor = '#4a90d9';

      // Oxygen pack (on back)
      ctx.fillStyle = '#e0e0e0';
      roundRect(ctx, cx - 12 * scale, y + 65 * scale, 24 * scale, 35 * scale, 4 * scale);
      ctx.fill();

      // Pack details
      ctx.fillStyle = accentColor;
      ctx.fillRect(cx - 8 * scale, y + 70 * scale, 16 * scale, 4 * scale);
      ctx.fillRect(cx - 8 * scale, y + 80 * scale, 16 * scale, 4 * scale);

      // Pack lights
      var blink = Math.sin(time * 3) > 0 ? 1 : 0.3;
      ctx.fillStyle = 'rgba(0, 255, 100, ' + blink + ')';
      ctx.beginPath();
      ctx.arc(cx - 4 * scale, y + 92 * scale, 2 * scale, 0, Math.PI * 2);
      ctx.fill();
      ctx.fillStyle = 'rgba(255, 100, 0, ' + (1 - blink) + ')';
      ctx.beginPath();
      ctx.arc(cx + 4 * scale, y + 92 * scale, 2 * scale, 0, Math.PI * 2);
      ctx.fill();

      // Suit body
      ctx.fillStyle = suitColor;
      roundRect(ctx, cx - 24 * scale, y + 64 * scale, 48 * scale, 55 * scale, 6 * scale);
      ctx.fill();

      // Blue accents on torso
      ctx.fillStyle = accentColor;
      ctx.fillRect(cx - 24 * scale, y + 64 * scale, 8 * scale, 55 * scale);
      ctx.fillRect(cx + 16 * scale, y + 64 * scale, 8 * scale, 55 * scale);

      // Suit legs
      ctx.fillStyle = suitColor;
      roundRect(ctx, cx - 18 * scale, y + 118 * scale, 14 * scale, 38 * scale, 4 * scale);
      ctx.fill();
      roundRect(ctx, cx + 4 * scale, y + 118 * scale, 14 * scale, 38 * scale, 4 * scale);
      ctx.fill();

      // Blue leg stripes
      ctx.fillStyle = accentColor;
      ctx.fillRect(cx - 18 * scale, y + 130 * scale, 14 * scale, 4 * scale);
      ctx.fillRect(cx + 4 * scale, y + 130 * scale, 14 * scale, 4 * scale);

      // Boots with magnetic plates
      ctx.fillStyle = '#555';
      roundRect(ctx, cx - 20 * scale, y + 152 * scale, 16 * scale, 8 * scale, 2 * scale);
      ctx.fill();
      roundRect(ctx, cx + 4 * scale, y + 152 * scale, 16 * scale, 8 * scale, 2 * scale);
      ctx.fill();

      // Magnetic plate glow
      ctx.fillStyle = accentColor;
      ctx.fillRect(cx - 18 * scale, y + 158 * scale, 12 * scale, 2 * scale);
      ctx.fillRect(cx + 6 * scale, y + 158 * scale, 12 * scale, 2 * scale);
    },

    renderCostumeOver: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;
      var suitColor = '#f0f0f0';
      var accentColor = '#4a90d9';

      // Gloves
      ctx.fillStyle = suitColor;
      ctx.beginPath();
      ctx.arc(cx - 26 * scale, y + 115 * scale, 6 * scale, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.arc(cx + 26 * scale, y + 115 * scale, 6 * scale, 0, Math.PI * 2);
      ctx.fill();

      // Glove accents
      ctx.fillStyle = accentColor;
      ctx.beginPath();
      ctx.arc(cx - 26 * scale, y + 115 * scale, 3 * scale, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.arc(cx + 26 * scale, y + 115 * scale, 3 * scale, 0, Math.PI * 2);
      ctx.fill();

      // Helmet bubble
      ctx.fillStyle = 'rgba(200, 230, 255, 0.3)';
      ctx.strokeStyle = '#ccc';
      ctx.lineWidth = 3 * scale;
      ctx.beginPath();
      ctx.arc(cx, y + 32 * scale, 28 * scale, 0, Math.PI * 2);
      ctx.fill();
      ctx.stroke();

      // Helmet reflection
      ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
      ctx.beginPath();
      ctx.ellipse(cx - 8 * scale, y + 22 * scale, 8 * scale, 12 * scale, -0.3, 0, Math.PI * 2);
      ctx.fill();

      // Helmet ring
      ctx.fillStyle = '#ddd';
      ctx.beginPath();
      ctx.ellipse(cx, y + 55 * scale, 22 * scale, 6 * scale, 0, 0, Math.PI * 2);
      ctx.fill();

      // Helmet accent
      ctx.fillStyle = accentColor;
      ctx.beginPath();
      ctx.arc(cx, y + 5 * scale, 4 * scale, 0, Math.PI * 2);
      ctx.fill();

      // Antenna
      ctx.strokeStyle = '#888';
      ctx.lineWidth = 2 * scale;
      ctx.beginPath();
      ctx.moveTo(cx + 20 * scale, y + 15 * scale);
      ctx.lineTo(cx + 28 * scale, y - 5 * scale);
      ctx.stroke();

      ctx.fillStyle = '#ff3333';
      ctx.beginPath();
      ctx.arc(cx + 28 * scale, y - 5 * scale, 3 * scale, 0, Math.PI * 2);
      ctx.fill();
    }
  };

  // ============================================================================
  // COSTUME: NINJA OUTFIT
  // ============================================================================

  var ninjaOutfit = {
    id: 'ninja-outfit',
    name: 'Ninja Outfit',
    category: 'costume',
    avatarMode: 'FULL_BODY',
    animations: ['idle', 'walk', 'attack', 'hurt', 'celebrate'],
    defaultAnimation: 'idle',
    accessoryVisibility: {
      eyewear: true,
      headwear: false,
      effects: true
    },
    layerOrder: ['avatar-body', 'costume-base', 'avatar-head', 'costume-overlay', 'earned-accessories'],
    recommendedFor: ['action', 'adventure', 'rpg'],
    description: 'Stealthy ninja warrior',
    avatarPosition: { x: 0.5, y: 0.5 },
    avatarScale: 1.0,
    props: [
      { id: 'katana', anchor: 'back', offset: { x: 0, y: -10 } }
    ],
    contextEffects: {
      attack: { type: 'slash', color: '#333' },
      hurt: { type: 'smoke', color: '#555' }
    },

    renderCostumeUnder: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;
      var ninjaBlack = '#1a1a1a';
      var ninjaGray = '#333';

      // Katana on back
      ctx.save();
      ctx.translate(cx + 15 * scale, y + 50 * scale);
      ctx.rotate(-0.4);

      // Scabbard
      ctx.fillStyle = '#2c1810';
      roundRect(ctx, -3 * scale, 0, 6 * scale, 50 * scale, 2 * scale);
      ctx.fill();

      // Handle wrap
      ctx.fillStyle = '#8b0000';
      for (var i = 0; i < 5; i++) {
        ctx.fillRect(-3 * scale, -10 * scale + i * 4 * scale, 6 * scale, 2 * scale);
      }

      // Guard
      ctx.fillStyle = '#ffd700';
      ctx.beginPath();
      ctx.ellipse(0, 0, 5 * scale, 2 * scale, 0, 0, Math.PI * 2);
      ctx.fill();

      ctx.restore();

      // Body suit
      ctx.fillStyle = ninjaBlack;
      roundRect(ctx, cx - 22 * scale, y + 64 * scale, 44 * scale, 52 * scale, 4 * scale);
      ctx.fill();

      // Belt with throwing stars
      ctx.fillStyle = ninjaGray;
      ctx.fillRect(cx - 22 * scale, y + 100 * scale, 44 * scale, 8 * scale);

      // Throwing stars on belt
      ctx.fillStyle = '#888';
      for (var s = 0; s < 3; s++) {
        var sx = cx - 12 * scale + s * 12 * scale;
        var sy = y + 104 * scale;
        ctx.beginPath();
        for (var p = 0; p < 4; p++) {
          var angle = p * Math.PI / 2;
          var px = sx + Math.cos(angle) * 3 * scale;
          var py = sy + Math.sin(angle) * 3 * scale;
          if (p === 0) ctx.moveTo(px, py);
          else ctx.lineTo(px, py);
        }
        ctx.closePath();
        ctx.fill();
      }

      // Legs
      ctx.fillStyle = ninjaBlack;
      roundRect(ctx, cx - 16 * scale, y + 116 * scale, 12 * scale, 36 * scale, 3 * scale);
      ctx.fill();
      roundRect(ctx, cx + 4 * scale, y + 116 * scale, 12 * scale, 36 * scale, 3 * scale);
      ctx.fill();

      // Leg wraps
      ctx.strokeStyle = ninjaGray;
      ctx.lineWidth = 2 * scale;
      for (var w = 0; w < 4; w++) {
        ctx.beginPath();
        ctx.moveTo(cx - 16 * scale, y + 125 * scale + w * 8 * scale);
        ctx.lineTo(cx - 4 * scale, y + 128 * scale + w * 8 * scale);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(cx + 4 * scale, y + 125 * scale + w * 8 * scale);
        ctx.lineTo(cx + 16 * scale, y + 128 * scale + w * 8 * scale);
        ctx.stroke();
      }

      // Tabi boots
      ctx.fillStyle = ninjaBlack;
      ctx.beginPath();
      ctx.moveTo(cx - 18 * scale, y + 152 * scale);
      ctx.lineTo(cx - 18 * scale, y + 160 * scale);
      ctx.lineTo(cx - 10 * scale, y + 160 * scale);
      ctx.lineTo(cx - 8 * scale, y + 155 * scale);
      ctx.lineTo(cx - 4 * scale, y + 160 * scale);
      ctx.lineTo(cx - 4 * scale, y + 152 * scale);
      ctx.closePath();
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(cx + 4 * scale, y + 152 * scale);
      ctx.lineTo(cx + 4 * scale, y + 160 * scale);
      ctx.lineTo(cx + 10 * scale, y + 160 * scale);
      ctx.lineTo(cx + 12 * scale, y + 155 * scale);
      ctx.lineTo(cx + 18 * scale, y + 160 * scale);
      ctx.lineTo(cx + 18 * scale, y + 152 * scale);
      ctx.closePath();
      ctx.fill();
    },

    renderCostumeOver: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;
      var ninjaBlack = '#1a1a1a';

      // Arm wraps
      ctx.fillStyle = ninjaBlack;
      roundRect(ctx, cx - 32 * scale, y + 70 * scale, 10 * scale, 45 * scale, 3 * scale);
      ctx.fill();
      roundRect(ctx, cx + 22 * scale, y + 70 * scale, 10 * scale, 45 * scale, 3 * scale);
      ctx.fill();

      // Face mask
      ctx.fillStyle = ninjaBlack;
      ctx.beginPath();
      ctx.moveTo(cx - 22 * scale, y + 35 * scale);
      ctx.lineTo(cx - 22 * scale, y + 55 * scale);
      ctx.quadraticCurveTo(cx, y + 60 * scale, cx + 22 * scale, y + 55 * scale);
      ctx.lineTo(cx + 22 * scale, y + 35 * scale);
      ctx.quadraticCurveTo(cx, y + 38 * scale, cx - 22 * scale, y + 35 * scale);
      ctx.fill();

      // Eye slit
      ctx.fillStyle = '#000';
      ctx.fillRect(cx - 18 * scale, y + 28 * scale, 36 * scale, 6 * scale);

      // Headband
      ctx.fillStyle = '#8b0000';
      ctx.fillRect(cx - 24 * scale, y + 15 * scale, 48 * scale, 6 * scale);

      // Headband tail
      ctx.beginPath();
      ctx.moveTo(cx + 24 * scale, y + 15 * scale);
      ctx.quadraticCurveTo(cx + 35 * scale + Math.sin(time * 3) * 3 * scale, y + 25 * scale, cx + 40 * scale + Math.sin(time * 3) * 5 * scale, y + 35 * scale);
      ctx.lineTo(cx + 36 * scale + Math.sin(time * 3) * 5 * scale, y + 38 * scale);
      ctx.quadraticCurveTo(cx + 32 * scale + Math.sin(time * 3) * 3 * scale, y + 28 * scale, cx + 24 * scale, y + 21 * scale);
      ctx.closePath();
      ctx.fill();
    }
  };

  // ============================================================================
  // COSTUME: WIZARD ROBES
  // ============================================================================

  var wizardRobes = {
    id: 'wizard-robes',
    name: 'Wizard Robes',
    category: 'costume',
    avatarMode: 'FULL_BODY',
    animations: ['idle', 'walk', 'attack', 'hurt', 'celebrate'],
    defaultAnimation: 'idle',
    accessoryVisibility: {
      eyewear: true,
      headwear: true,
      effects: true
    },
    layerOrder: ['avatar-body', 'costume-base', 'avatar-head', 'costume-overlay', 'earned-accessories'],
    recommendedFor: ['rpg', 'puzzle', 'adventure'],
    description: 'Mystical wizard with flowing robes',
    avatarPosition: { x: 0.5, y: 0.5 },
    avatarScale: 1.0,
    props: [
      { id: 'staff', anchor: 'rightArm', offset: { x: 5, y: 0 } }
    ],
    contextEffects: {
      attack: { type: 'magic', color: '#9b59b6' },
      celebrate: { type: 'sparkles', color: '#ffd700' }
    },

    renderCostumeUnder: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;
      var robeColor = '#2c3e50';
      var robeLight = '#3d566e';
      var accent = '#9b59b6';

      // Main robe body
      ctx.fillStyle = robeColor;
      ctx.beginPath();
      ctx.moveTo(cx - 22 * scale, y + 64 * scale);
      ctx.lineTo(cx - 30 * scale + Math.sin(time * 1.5) * 2 * scale, y + 158 * scale);
      ctx.quadraticCurveTo(cx, y + 162 * scale, cx + 30 * scale + Math.sin(time * 1.5 + 1) * 2 * scale, y + 158 * scale);
      ctx.lineTo(cx + 22 * scale, y + 64 * scale);
      ctx.closePath();
      ctx.fill();

      // Robe inner fold
      ctx.fillStyle = robeLight;
      ctx.beginPath();
      ctx.moveTo(cx - 5 * scale, y + 70 * scale);
      ctx.lineTo(cx - 8 * scale, y + 155 * scale);
      ctx.lineTo(cx + 8 * scale, y + 155 * scale);
      ctx.lineTo(cx + 5 * scale, y + 70 * scale);
      ctx.closePath();
      ctx.fill();

      // Belt
      ctx.fillStyle = '#8b4513';
      ctx.fillRect(cx - 22 * scale, y + 100 * scale, 44 * scale, 8 * scale);

      // Belt buckle
      ctx.fillStyle = '#ffd700';
      roundRect(ctx, cx - 6 * scale, y + 99 * scale, 12 * scale, 10 * scale, 2 * scale);
      ctx.fill();

      // Belt pouches
      ctx.fillStyle = '#6b3e26';
      roundRect(ctx, cx - 20 * scale, y + 105 * scale, 8 * scale, 10 * scale, 2 * scale);
      ctx.fill();
      roundRect(ctx, cx + 12 * scale, y + 105 * scale, 8 * scale, 10 * scale, 2 * scale);
      ctx.fill();

      // Mystical runes on robe
      ctx.strokeStyle = accent;
      ctx.lineWidth = 1 * scale;
      ctx.globalAlpha = 0.5 + Math.sin(time * 2) * 0.3;

      // Left rune
      ctx.beginPath();
      ctx.arc(cx - 15 * scale, y + 130 * scale, 5 * scale, 0, Math.PI * 2);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(cx - 15 * scale, y + 125 * scale);
      ctx.lineTo(cx - 15 * scale, y + 135 * scale);
      ctx.moveTo(cx - 20 * scale, y + 130 * scale);
      ctx.lineTo(cx - 10 * scale, y + 130 * scale);
      ctx.stroke();

      // Right rune
      ctx.beginPath();
      ctx.arc(cx + 15 * scale, y + 130 * scale, 5 * scale, 0, Math.PI * 2);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(cx + 12 * scale, y + 127 * scale);
      ctx.lineTo(cx + 18 * scale, y + 133 * scale);
      ctx.moveTo(cx + 18 * scale, y + 127 * scale);
      ctx.lineTo(cx + 12 * scale, y + 133 * scale);
      ctx.stroke();

      ctx.globalAlpha = 1;
    },

    renderCostumeOver: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;
      var robeColor = '#2c3e50';
      var accent = '#9b59b6';

      // Sleeves
      ctx.fillStyle = robeColor;
      ctx.beginPath();
      ctx.moveTo(cx - 22 * scale, y + 68 * scale);
      ctx.quadraticCurveTo(cx - 35 * scale, y + 90 * scale, cx - 32 * scale, y + 118 * scale);
      ctx.lineTo(cx - 25 * scale, y + 115 * scale);
      ctx.quadraticCurveTo(cx - 28 * scale, y + 90 * scale, cx - 18 * scale, y + 72 * scale);
      ctx.closePath();
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(cx + 22 * scale, y + 68 * scale);
      ctx.quadraticCurveTo(cx + 35 * scale, y + 90 * scale, cx + 32 * scale, y + 118 * scale);
      ctx.lineTo(cx + 25 * scale, y + 115 * scale);
      ctx.quadraticCurveTo(cx + 28 * scale, y + 90 * scale, cx + 18 * scale, y + 72 * scale);
      ctx.closePath();
      ctx.fill();

      // Staff (right hand)
      var rightArm = getArmTransform(transforms, 'rightArm');
      ctx.save();
      ctx.translate(cx + 28 * scale, y + 90 * scale);
      ctx.rotate((rightArm.rotation || 0) * Math.PI / 180);

      // Staff shaft
      ctx.fillStyle = '#5d4037';
      roundRect(ctx, -3 * scale, -50 * scale, 6 * scale, 80 * scale, 2 * scale);
      ctx.fill();

      // Staff orb holder
      ctx.fillStyle = '#3d2817';
      ctx.beginPath();
      ctx.moveTo(-6 * scale, -50 * scale);
      ctx.quadraticCurveTo(-8 * scale, -58 * scale, 0, -62 * scale);
      ctx.quadraticCurveTo(8 * scale, -58 * scale, 6 * scale, -50 * scale);
      ctx.closePath();
      ctx.fill();

      // Staff orb
      var orbGlow = ctx.createRadialGradient(0, -68 * scale, 0, 0, -68 * scale, 10 * scale);
      orbGlow.addColorStop(0, '#e0b0ff');
      orbGlow.addColorStop(0.5, accent);
      orbGlow.addColorStop(1, '#4a235a');
      ctx.fillStyle = orbGlow;
      ctx.beginPath();
      ctx.arc(0, -68 * scale, 8 * scale, 0, Math.PI * 2);
      ctx.fill();

      // Orb glow effect
      ctx.globalAlpha = 0.3 + Math.sin(time * 3) * 0.2;
      ctx.fillStyle = accent;
      ctx.beginPath();
      ctx.arc(0, -68 * scale, 12 * scale, 0, Math.PI * 2);
      ctx.fill();
      ctx.globalAlpha = 1;

      ctx.restore();

      // Hood/collar
      ctx.fillStyle = robeColor;
      ctx.beginPath();
      ctx.moveTo(cx - 24 * scale, y + 55 * scale);
      ctx.quadraticCurveTo(cx - 28 * scale, y + 45 * scale, cx - 20 * scale, y + 40 * scale);
      ctx.lineTo(cx + 20 * scale, y + 40 * scale);
      ctx.quadraticCurveTo(cx + 28 * scale, y + 45 * scale, cx + 24 * scale, y + 55 * scale);
      ctx.quadraticCurveTo(cx, y + 50 * scale, cx - 24 * scale, y + 55 * scale);
      ctx.fill();
    }
  };

  // ============================================================================
  // COSTUME: SUPERHERO CAPE
  // ============================================================================

  var superheroCape = {
    id: 'superhero-cape',
    name: 'Superhero Cape',
    category: 'costume',
    avatarMode: 'FULL_BODY',
    animations: ['idle', 'walk', 'attack', 'hurt', 'celebrate'],
    defaultAnimation: 'idle',
    accessoryVisibility: {
      eyewear: true,
      headwear: true,
      effects: true
    },
    layerOrder: ['avatar-body', 'costume-base', 'avatar-head', 'costume-overlay', 'earned-accessories'],
    recommendedFor: ['action', 'adventure'],
    description: 'Classic superhero with billowing cape',
    avatarPosition: { x: 0.5, y: 0.5 },
    avatarScale: 1.0,
    props: [],
    contextEffects: {
      attack: { type: 'impact', color: '#ffff00' },
      celebrate: { type: 'sparkles', color: '#ffd700' }
    },

    renderCostumeUnder: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;
      var suitColor = avatar && avatar.base && avatar.base.clothing && avatar.base.clothing.color ? avatar.base.clothing.color : '#c0392b';
      var capeColor = darken(suitColor, 0.3);

      // Cape (billowing behind)
      ctx.fillStyle = capeColor;
      ctx.beginPath();
      ctx.moveTo(cx - 20 * scale, y + 62 * scale);
      var wave1 = Math.sin(time * 2) * 5 * scale;
      var wave2 = Math.sin(time * 2 + 1) * 5 * scale;
      var wave3 = Math.sin(time * 2 + 2) * 5 * scale;
      ctx.quadraticCurveTo(cx - 30 * scale + wave1, y + 100 * scale, cx - 35 * scale + wave2, y + 155 * scale);
      ctx.quadraticCurveTo(cx, y + 160 * scale + wave3, cx + 35 * scale + wave2, y + 155 * scale);
      ctx.quadraticCurveTo(cx + 30 * scale + wave1, y + 100 * scale, cx + 20 * scale, y + 62 * scale);
      ctx.closePath();
      ctx.fill();

      // Cape inner lining
      ctx.fillStyle = lighten(capeColor, 0.2);
      ctx.beginPath();
      ctx.moveTo(cx - 15 * scale, y + 65 * scale);
      ctx.quadraticCurveTo(cx - 22 * scale + wave1 * 0.5, y + 100 * scale, cx - 25 * scale + wave2 * 0.5, y + 145 * scale);
      ctx.lineTo(cx + 25 * scale + wave2 * 0.5, y + 145 * scale);
      ctx.quadraticCurveTo(cx + 22 * scale + wave1 * 0.5, y + 100 * scale, cx + 15 * scale, y + 65 * scale);
      ctx.closePath();
      ctx.fill();

      // Bodysuit
      ctx.fillStyle = suitColor;
      roundRect(ctx, cx - 22 * scale, y + 64 * scale, 44 * scale, 52 * scale, 4 * scale);
      ctx.fill();

      // Belt
      ctx.fillStyle = '#ffd700';
      ctx.fillRect(cx - 22 * scale, y + 105 * scale, 44 * scale, 6 * scale);

      // Belt buckle
      ctx.fillStyle = '#fff';
      ctx.beginPath();
      ctx.arc(cx, y + 108 * scale, 5 * scale, 0, Math.PI * 2);
      ctx.fill();

      // Trunks
      ctx.fillStyle = darken(suitColor, 0.2);
      roundRect(ctx, cx - 18 * scale, y + 108 * scale, 36 * scale, 12 * scale, 2 * scale);
      ctx.fill();

      // Legs (suit continues)
      ctx.fillStyle = suitColor;
      roundRect(ctx, cx - 16 * scale, y + 118 * scale, 12 * scale, 36 * scale, 3 * scale);
      ctx.fill();
      roundRect(ctx, cx + 4 * scale, y + 118 * scale, 12 * scale, 36 * scale, 3 * scale);
      ctx.fill();

      // Boots
      ctx.fillStyle = darken(suitColor, 0.4);
      roundRect(ctx, cx - 18 * scale, y + 145 * scale, 14 * scale, 15 * scale, 3 * scale);
      ctx.fill();
      roundRect(ctx, cx + 4 * scale, y + 145 * scale, 14 * scale, 15 * scale, 3 * scale);
      ctx.fill();

      // Boot tops
      ctx.fillStyle = '#ffd700';
      ctx.fillRect(cx - 18 * scale, y + 145 * scale, 14 * scale, 3 * scale);
      ctx.fillRect(cx + 4 * scale, y + 145 * scale, 14 * scale, 3 * scale);
    },

    renderCostumeOver: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;
      var suitColor = avatar && avatar.base && avatar.base.clothing && avatar.base.clothing.color ? avatar.base.clothing.color : '#c0392b';

      // Arms
      ctx.fillStyle = suitColor;
      roundRect(ctx, cx - 32 * scale, y + 68 * scale, 12 * scale, 45 * scale, 4 * scale);
      ctx.fill();
      roundRect(ctx, cx + 20 * scale, y + 68 * scale, 12 * scale, 45 * scale, 4 * scale);
      ctx.fill();

      // Gloves
      ctx.fillStyle = darken(suitColor, 0.4);
      ctx.beginPath();
      ctx.arc(cx - 26 * scale, y + 115 * scale, 6 * scale, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.arc(cx + 26 * scale, y + 115 * scale, 6 * scale, 0, Math.PI * 2);
      ctx.fill();

      // Glove cuffs
      ctx.fillStyle = '#ffd700';
      ctx.fillRect(cx - 32 * scale, y + 105 * scale, 12 * scale, 4 * scale);
      ctx.fillRect(cx + 20 * scale, y + 105 * scale, 12 * scale, 4 * scale);

      // Chest emblem
      ctx.fillStyle = '#ffd700';
      ctx.beginPath();
      ctx.moveTo(cx, y + 70 * scale);
      ctx.lineTo(cx - 12 * scale, y + 78 * scale);
      ctx.lineTo(cx - 8 * scale, y + 95 * scale);
      ctx.lineTo(cx, y + 88 * scale);
      ctx.lineTo(cx + 8 * scale, y + 95 * scale);
      ctx.lineTo(cx + 12 * scale, y + 78 * scale);
      ctx.closePath();
      ctx.fill();

      // Mask
      ctx.fillStyle = darken(suitColor, 0.3);
      ctx.beginPath();
      ctx.moveTo(cx - 22 * scale, y + 25 * scale);
      ctx.quadraticCurveTo(cx - 25 * scale, y + 32 * scale, cx - 18 * scale, y + 38 * scale);
      ctx.lineTo(cx - 8 * scale, y + 32 * scale);
      ctx.lineTo(cx, y + 35 * scale);
      ctx.lineTo(cx + 8 * scale, y + 32 * scale);
      ctx.lineTo(cx + 18 * scale, y + 38 * scale);
      ctx.quadraticCurveTo(cx + 25 * scale, y + 32 * scale, cx + 22 * scale, y + 25 * scale);
      ctx.quadraticCurveTo(cx, y + 22 * scale, cx - 22 * scale, y + 25 * scale);
      ctx.fill();

      // Eye holes
      ctx.fillStyle = '#fff';
      ctx.beginPath();
      ctx.ellipse(cx - 12 * scale, y + 30 * scale, 6 * scale, 4 * scale, -0.2, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.ellipse(cx + 12 * scale, y + 30 * scale, 6 * scale, 4 * scale, 0.2, 0, Math.PI * 2);
      ctx.fill();
    }
  };

  // ============================================================================
  // COSTUME: ATHLETE UNIFORM
  // ============================================================================

  var athleteUniform = {
    id: 'athlete-uniform',
    name: 'Athlete Uniform',
    category: 'costume',
    avatarMode: 'FULL_BODY',
    animations: ['idle', 'walk', 'attack', 'hurt', 'celebrate'],
    defaultAnimation: 'idle',
    accessoryVisibility: {
      eyewear: true,
      headwear: true,
      effects: true
    },
    layerOrder: ['avatar-body', 'costume-base', 'avatar-head', 'costume-overlay', 'earned-accessories'],
    recommendedFor: ['sports', 'action', 'racing'],
    description: 'Athletic sports uniform',
    avatarPosition: { x: 0.5, y: 0.5 },
    avatarScale: 1.0,
    props: [
      { id: 'ball', anchor: 'rightArm', offset: { x: 10, y: 5 } }
    ],
    contextEffects: {
      celebrate: { type: 'confetti', color: '#ffd700' }
    },

    renderCostumeUnder: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;
      var jerseyColor = '#e74c3c';
      var accentColor = '#fff';

      // Jersey
      ctx.fillStyle = jerseyColor;
      roundRect(ctx, cx - 22 * scale, y + 64 * scale, 44 * scale, 45 * scale, 4 * scale);
      ctx.fill();

      // Jersey stripes
      ctx.fillStyle = accentColor;
      ctx.fillRect(cx - 22 * scale, y + 75 * scale, 44 * scale, 4 * scale);
      ctx.fillRect(cx - 22 * scale, y + 95 * scale, 44 * scale, 4 * scale);

      // Number on back
      ctx.fillStyle = accentColor;
      ctx.font = 'bold ' + (16 * scale) + 'px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('23', cx, y + 92 * scale);

      // Shorts
      ctx.fillStyle = '#2c3e50';
      roundRect(ctx, cx - 18 * scale, y + 108 * scale, 36 * scale, 22 * scale, 3 * scale);
      ctx.fill();

      // Shorts stripe
      ctx.fillStyle = jerseyColor;
      ctx.fillRect(cx - 18 * scale, y + 108 * scale, 4 * scale, 22 * scale);
      ctx.fillRect(cx + 14 * scale, y + 108 * scale, 4 * scale, 22 * scale);

      // Legs
      ctx.fillStyle = avatar && avatar.base ? avatar.base.skinTone || '#FFD5B8' : '#FFD5B8';
      roundRect(ctx, cx - 14 * scale, y + 128 * scale, 10 * scale, 25 * scale, 3 * scale);
      ctx.fill();
      roundRect(ctx, cx + 4 * scale, y + 128 * scale, 10 * scale, 25 * scale, 3 * scale);
      ctx.fill();

      // Socks
      ctx.fillStyle = accentColor;
      roundRect(ctx, cx - 16 * scale, y + 140 * scale, 12 * scale, 15 * scale, 2 * scale);
      ctx.fill();
      roundRect(ctx, cx + 4 * scale, y + 140 * scale, 12 * scale, 15 * scale, 2 * scale);
      ctx.fill();

      // Sock stripes
      ctx.fillStyle = jerseyColor;
      ctx.fillRect(cx - 16 * scale, y + 145 * scale, 12 * scale, 2 * scale);
      ctx.fillRect(cx + 4 * scale, y + 145 * scale, 12 * scale, 2 * scale);

      // Athletic shoes
      ctx.fillStyle = '#1a1a1a';
      roundRect(ctx, cx - 18 * scale, y + 152 * scale, 14 * scale, 8 * scale, 2 * scale);
      ctx.fill();
      roundRect(ctx, cx + 4 * scale, y + 152 * scale, 14 * scale, 8 * scale, 2 * scale);
      ctx.fill();

      // Shoe accents
      ctx.fillStyle = jerseyColor;
      ctx.fillRect(cx - 16 * scale, y + 154 * scale, 10 * scale, 2 * scale);
      ctx.fillRect(cx + 6 * scale, y + 154 * scale, 10 * scale, 2 * scale);
    },

    renderCostumeOver: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;
      var jerseyColor = '#e74c3c';
      var accentColor = '#fff';

      // Sleeves
      ctx.fillStyle = jerseyColor;
      roundRect(ctx, cx - 30 * scale, y + 66 * scale, 12 * scale, 20 * scale, 3 * scale);
      ctx.fill();
      roundRect(ctx, cx + 18 * scale, y + 66 * scale, 12 * scale, 20 * scale, 3 * scale);
      ctx.fill();

      // Sleeve stripes
      ctx.fillStyle = accentColor;
      ctx.fillRect(cx - 30 * scale, y + 78 * scale, 12 * scale, 3 * scale);
      ctx.fillRect(cx + 18 * scale, y + 78 * scale, 12 * scale, 3 * scale);

      // Headband
      ctx.fillStyle = jerseyColor;
      ctx.fillRect(cx - 22 * scale, y + 12 * scale, 44 * scale, 6 * scale);

      // Sweatbands on wrists
      ctx.fillStyle = accentColor;
      ctx.fillRect(cx - 30 * scale, y + 100 * scale, 10 * scale, 6 * scale);
      ctx.fillRect(cx + 20 * scale, y + 100 * scale, 10 * scale, 6 * scale);

      // Number on front (smaller)
      ctx.fillStyle = accentColor;
      ctx.font = 'bold ' + (12 * scale) + 'px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('23', cx, y + 82 * scale);
    }
  };

  // ============================================================================
  // COSTUME: PIRATE OUTFIT
  // ============================================================================

  var pirateOutfit = {
    id: 'pirate-outfit',
    name: 'Pirate Outfit',
    category: 'costume',
    avatarMode: 'FULL_BODY',
    animations: ['idle', 'walk', 'attack', 'hurt', 'celebrate'],
    defaultAnimation: 'idle',
    accessoryVisibility: {
      eyewear: true,
      headwear: true,
      effects: true
    },
    layerOrder: ['avatar-body', 'costume-base', 'avatar-head', 'costume-overlay', 'earned-accessories'],
    recommendedFor: ['adventure', 'action', 'rpg'],
    description: 'Swashbuckling pirate captain',
    avatarPosition: { x: 0.5, y: 0.5 },
    avatarScale: 1.0,
    props: [
      { id: 'cutlass', anchor: 'rightArm', offset: { x: 5, y: 15 } }
    ],
    contextEffects: {
      attack: { type: 'slash', color: '#c0c0c0' }
    },

    renderCostumeUnder: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;
      var coatColor = '#8b0000';
      var coatDark = '#5c0000';

      // Long coat (back)
      ctx.fillStyle = coatColor;
      ctx.beginPath();
      ctx.moveTo(cx - 24 * scale, y + 64 * scale);
      ctx.lineTo(cx - 28 * scale + Math.sin(time * 1.5) * 2 * scale, y + 155 * scale);
      ctx.quadraticCurveTo(cx, y + 158 * scale, cx + 28 * scale + Math.sin(time * 1.5 + 1) * 2 * scale, y + 155 * scale);
      ctx.lineTo(cx + 24 * scale, y + 64 * scale);
      ctx.closePath();
      ctx.fill();

      // Coat back detail
      ctx.fillStyle = coatDark;
      ctx.beginPath();
      ctx.moveTo(cx - 5 * scale, y + 90 * scale);
      ctx.lineTo(cx - 8 * scale, y + 150 * scale);
      ctx.lineTo(cx + 8 * scale, y + 150 * scale);
      ctx.lineTo(cx + 5 * scale, y + 90 * scale);
      ctx.closePath();
      ctx.fill();

      // White shirt
      ctx.fillStyle = '#f5f5dc';
      roundRect(ctx, cx - 18 * scale, y + 64 * scale, 36 * scale, 40 * scale, 3 * scale);
      ctx.fill();

      // Shirt ruffles
      ctx.strokeStyle = '#ddd';
      ctx.lineWidth = 1 * scale;
      for (var r = 0; r < 4; r++) {
        ctx.beginPath();
        ctx.moveTo(cx - 8 * scale, y + 68 * scale + r * 8 * scale);
        ctx.quadraticCurveTo(cx - 4 * scale, y + 72 * scale + r * 8 * scale, cx, y + 68 * scale + r * 8 * scale);
        ctx.quadraticCurveTo(cx + 4 * scale, y + 72 * scale + r * 8 * scale, cx + 8 * scale, y + 68 * scale + r * 8 * scale);
        ctx.stroke();
      }

      // Belt with buckle
      ctx.fillStyle = '#2c1810';
      ctx.fillRect(cx - 22 * scale, y + 102 * scale, 44 * scale, 8 * scale);

      ctx.fillStyle = '#ffd700';
      roundRect(ctx, cx - 8 * scale, y + 100 * scale, 16 * scale, 12 * scale, 2 * scale);
      ctx.fill();
      ctx.fillStyle = '#2c1810';
      roundRect(ctx, cx - 4 * scale, y + 103 * scale, 8 * scale, 6 * scale, 1 * scale);
      ctx.fill();

      // Pants
      ctx.fillStyle = '#2c3e50';
      roundRect(ctx, cx - 16 * scale, y + 108 * scale, 32 * scale, 45 * scale, 3 * scale);
      ctx.fill();

      // Boots
      ctx.fillStyle = '#3d2314';
      roundRect(ctx, cx - 18 * scale, y + 140 * scale, 14 * scale, 20 * scale, 3 * scale);
      ctx.fill();
      roundRect(ctx, cx + 4 * scale, y + 140 * scale, 14 * scale, 20 * scale, 3 * scale);
      ctx.fill();

      // Boot tops (folded)
      ctx.fillStyle = '#5d4037';
      ctx.beginPath();
      ctx.moveTo(cx - 18 * scale, y + 145 * scale);
      ctx.lineTo(cx - 20 * scale, y + 140 * scale);
      ctx.lineTo(cx - 4 * scale, y + 140 * scale);
      ctx.lineTo(cx - 4 * scale, y + 145 * scale);
      ctx.closePath();
      ctx.fill();
      ctx.beginPath();
      ctx.moveTo(cx + 4 * scale, y + 145 * scale);
      ctx.lineTo(cx + 4 * scale, y + 140 * scale);
      ctx.lineTo(cx + 20 * scale, y + 140 * scale);
      ctx.lineTo(cx + 18 * scale, y + 145 * scale);
      ctx.closePath();
      ctx.fill();
    },

    renderCostumeOver: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;
      var coatColor = '#8b0000';

      // Coat front panels
      ctx.fillStyle = coatColor;
      ctx.beginPath();
      ctx.moveTo(cx - 22 * scale, y + 64 * scale);
      ctx.lineTo(cx - 26 * scale, y + 110 * scale);
      ctx.lineTo(cx - 10 * scale, y + 110 * scale);
      ctx.lineTo(cx - 10 * scale, y + 64 * scale);
      ctx.closePath();
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(cx + 22 * scale, y + 64 * scale);
      ctx.lineTo(cx + 26 * scale, y + 110 * scale);
      ctx.lineTo(cx + 10 * scale, y + 110 * scale);
      ctx.lineTo(cx + 10 * scale, y + 64 * scale);
      ctx.closePath();
      ctx.fill();

      // Gold trim on coat
      ctx.strokeStyle = '#ffd700';
      ctx.lineWidth = 2 * scale;
      ctx.beginPath();
      ctx.moveTo(cx - 10 * scale, y + 64 * scale);
      ctx.lineTo(cx - 10 * scale, y + 110 * scale);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(cx + 10 * scale, y + 64 * scale);
      ctx.lineTo(cx + 10 * scale, y + 110 * scale);
      ctx.stroke();

      // Gold buttons
      ctx.fillStyle = '#ffd700';
      for (var b = 0; b < 3; b++) {
        ctx.beginPath();
        ctx.arc(cx - 14 * scale, y + 72 * scale + b * 12 * scale, 2 * scale, 0, Math.PI * 2);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(cx + 14 * scale, y + 72 * scale + b * 12 * scale, 2 * scale, 0, Math.PI * 2);
        ctx.fill();
      }

      // Cutlass (right hand)
      var rightArm = getArmTransform(transforms, 'rightArm');
      ctx.save();
      ctx.translate(cx + 28 * scale, y + 110 * scale);
      ctx.rotate((rightArm.rotation || 0) * Math.PI / 180);

      // Blade
      ctx.fillStyle = '#c0c0c0';
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.quadraticCurveTo(8 * scale, -20 * scale, 5 * scale, -40 * scale);
      ctx.lineTo(2 * scale, -40 * scale);
      ctx.quadraticCurveTo(5 * scale, -20 * scale, -2 * scale, 0);
      ctx.closePath();
      ctx.fill();

      // Guard
      ctx.fillStyle = '#ffd700';
      ctx.beginPath();
      ctx.ellipse(0, 2 * scale, 8 * scale, 4 * scale, 0.3, 0, Math.PI * 2);
      ctx.fill();

      // Handle
      ctx.fillStyle = '#3d2314';
      roundRect(ctx, -2 * scale, 4 * scale, 4 * scale, 12 * scale, 1 * scale);
      ctx.fill();

      ctx.restore();

      // Pirate hat
      ctx.fillStyle = '#1a1a1a';
      ctx.beginPath();
      ctx.moveTo(cx - 28 * scale, y + 8 * scale);
      ctx.quadraticCurveTo(cx - 32 * scale, y - 8 * scale, cx - 18 * scale, y - 18 * scale);
      ctx.lineTo(cx, y - 8 * scale);
      ctx.lineTo(cx + 18 * scale, y - 18 * scale);
      ctx.quadraticCurveTo(cx + 32 * scale, y - 8 * scale, cx + 28 * scale, y + 8 * scale);
      ctx.quadraticCurveTo(cx, y + 12 * scale, cx - 28 * scale, y + 8 * scale);
      ctx.fill();

      // Gold hat trim
      ctx.strokeStyle = '#ffd700';
      ctx.lineWidth = 2 * scale;
      ctx.stroke();

      // Skull emblem
      ctx.fillStyle = '#fff';
      ctx.beginPath();
      ctx.arc(cx, y - 5 * scale, 5 * scale, 0, Math.PI * 2);
      ctx.fill();
      ctx.fillStyle = '#000';
      ctx.beginPath();
      ctx.arc(cx - 2 * scale, y - 6 * scale, 1 * scale, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.arc(cx + 2 * scale, y - 6 * scale, 1 * scale, 0, Math.PI * 2);
      ctx.fill();
    }
  };

  // ============================================================================
  // COSTUME: SCIENTIST LAB COAT
  // ============================================================================

  var scientistLabcoat = {
    id: 'scientist-labcoat',
    name: 'Scientist Lab Coat',
    category: 'costume',
    avatarMode: 'FULL_BODY',
    animations: ['idle', 'walk', 'attack', 'hurt', 'celebrate'],
    defaultAnimation: 'idle',
    accessoryVisibility: {
      eyewear: true,
      headwear: true,
      effects: true
    },
    layerOrder: ['avatar-body', 'costume-base', 'avatar-head', 'costume-overlay', 'earned-accessories'],
    recommendedFor: ['puzzle', 'physics', 'creative'],
    description: 'Mad scientist ready to experiment',
    avatarPosition: { x: 0.5, y: 0.5 },
    avatarScale: 1.0,
    props: [
      { id: 'beaker', anchor: 'rightArm', offset: { x: 5, y: 10 } }
    ],
    contextEffects: {
      attack: { type: 'bubbles', color: '#00ff00' }
    },

    renderCostumeUnder: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;

      // Shirt underneath
      ctx.fillStyle = '#3498db';
      roundRect(ctx, cx - 18 * scale, y + 64 * scale, 36 * scale, 35 * scale, 3 * scale);
      ctx.fill();

      // Tie
      ctx.fillStyle = '#2c3e50';
      ctx.beginPath();
      ctx.moveTo(cx - 4 * scale, y + 64 * scale);
      ctx.lineTo(cx + 4 * scale, y + 64 * scale);
      ctx.lineTo(cx + 3 * scale, y + 72 * scale);
      ctx.lineTo(cx, y + 100 * scale);
      ctx.lineTo(cx - 3 * scale, y + 72 * scale);
      ctx.closePath();
      ctx.fill();

      // Pants
      ctx.fillStyle = '#34495e';
      roundRect(ctx, cx - 16 * scale, y + 98 * scale, 32 * scale, 55 * scale, 3 * scale);
      ctx.fill();

      // Sensible shoes
      ctx.fillStyle = '#2c1810';
      roundRect(ctx, cx - 18 * scale, y + 150 * scale, 14 * scale, 10 * scale, 2 * scale);
      ctx.fill();
      roundRect(ctx, cx + 4 * scale, y + 150 * scale, 14 * scale, 10 * scale, 2 * scale);
      ctx.fill();
    },

    renderCostumeOver: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;

      // Lab coat
      ctx.fillStyle = '#fff';
      ctx.beginPath();
      ctx.moveTo(cx - 24 * scale, y + 62 * scale);
      ctx.lineTo(cx - 26 * scale, y + 140 * scale);
      ctx.lineTo(cx - 10 * scale, y + 140 * scale);
      ctx.lineTo(cx - 10 * scale, y + 62 * scale);
      ctx.closePath();
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(cx + 24 * scale, y + 62 * scale);
      ctx.lineTo(cx + 26 * scale, y + 140 * scale);
      ctx.lineTo(cx + 10 * scale, y + 140 * scale);
      ctx.lineTo(cx + 10 * scale, y + 62 * scale);
      ctx.closePath();
      ctx.fill();

      // Coat collar
      ctx.fillStyle = '#fff';
      ctx.beginPath();
      ctx.moveTo(cx - 20 * scale, y + 55 * scale);
      ctx.lineTo(cx - 10 * scale, y + 70 * scale);
      ctx.lineTo(cx - 5 * scale, y + 60 * scale);
      ctx.quadraticCurveTo(cx, y + 58 * scale, cx + 5 * scale, y + 60 * scale);
      ctx.lineTo(cx + 10 * scale, y + 70 * scale);
      ctx.lineTo(cx + 20 * scale, y + 55 * scale);
      ctx.quadraticCurveTo(cx, y + 50 * scale, cx - 20 * scale, y + 55 * scale);
      ctx.fill();

      // Coat sleeves
      ctx.fillStyle = '#fff';
      roundRect(ctx, cx - 32 * scale, y + 64 * scale, 12 * scale, 45 * scale, 3 * scale);
      ctx.fill();
      roundRect(ctx, cx + 20 * scale, y + 64 * scale, 12 * scale, 45 * scale, 3 * scale);
      ctx.fill();

      // Pocket protector
      ctx.fillStyle = '#ecf0f1';
      roundRect(ctx, cx - 22 * scale, y + 72 * scale, 10 * scale, 15 * scale, 1 * scale);
      ctx.fill();

      // Pens in pocket
      ctx.fillStyle = '#3498db';
      ctx.fillRect(cx - 21 * scale, y + 70 * scale, 2 * scale, 12 * scale);
      ctx.fillStyle = '#e74c3c';
      ctx.fillRect(cx - 18 * scale, y + 71 * scale, 2 * scale, 11 * scale);
      ctx.fillStyle = '#2c3e50';
      ctx.fillRect(cx - 15 * scale, y + 70 * scale, 2 * scale, 10 * scale);

      // ID badge
      ctx.fillStyle = '#fff';
      roundRect(ctx, cx + 12 * scale, y + 75 * scale, 12 * scale, 18 * scale, 1 * scale);
      ctx.fill();
      ctx.fillStyle = '#3498db';
      ctx.fillRect(cx + 13 * scale, y + 76 * scale, 10 * scale, 6 * scale);
      ctx.fillStyle = '#ddd';
      ctx.fillRect(cx + 14 * scale, y + 84 * scale, 8 * scale, 2 * scale);
      ctx.fillRect(cx + 14 * scale, y + 88 * scale, 6 * scale, 2 * scale);

      // Safety goggles (on forehead)
      ctx.fillStyle = '#2c3e50';
      ctx.fillRect(cx - 24 * scale, y + 8 * scale, 48 * scale, 4 * scale);
      ctx.fillStyle = 'rgba(100, 200, 255, 0.6)';
      ctx.beginPath();
      ctx.ellipse(cx - 12 * scale, y + 10 * scale, 10 * scale, 6 * scale, 0, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.ellipse(cx + 12 * scale, y + 10 * scale, 10 * scale, 6 * scale, 0, 0, Math.PI * 2);
      ctx.fill();
      ctx.strokeStyle = '#1a1a2e';
      ctx.lineWidth = 2 * scale;
      ctx.stroke();

      // Beaker in hand
      var rightArm = getArmTransform(transforms, 'rightArm');
      ctx.save();
      ctx.translate(cx + 28 * scale, y + 110 * scale);
      ctx.rotate((rightArm.rotation || 0) * Math.PI / 180);

      // Beaker glass
      ctx.fillStyle = 'rgba(200, 230, 255, 0.4)';
      ctx.strokeStyle = '#aaa';
      ctx.lineWidth = 1 * scale;
      ctx.beginPath();
      ctx.moveTo(-5 * scale, -20 * scale);
      ctx.lineTo(-6 * scale, 0);
      ctx.lineTo(6 * scale, 0);
      ctx.lineTo(5 * scale, -20 * scale);
      ctx.closePath();
      ctx.fill();
      ctx.stroke();

      // Bubbling liquid
      var liquidColor = 'rgba(0, 255, 100, 0.7)';
      ctx.fillStyle = liquidColor;
      ctx.beginPath();
      ctx.moveTo(-5 * scale, -5 * scale);
      ctx.lineTo(-6 * scale, 0);
      ctx.lineTo(6 * scale, 0);
      ctx.lineTo(5 * scale, -5 * scale);
      ctx.closePath();
      ctx.fill();

      // Bubbles
      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
      for (var bub = 0; bub < 3; bub++) {
        var bubY = -8 * scale - ((time * 20 + bub * 30) % 15) * scale;
        var bubX = (bub - 1) * 3 * scale;
        ctx.beginPath();
        ctx.arc(bubX, bubY, 1.5 * scale, 0, Math.PI * 2);
        ctx.fill();
      }

      ctx.restore();
    }
  };

  // ============================================================================
  // COSTUME: CHEF OUTFIT
  // ============================================================================

  var chefOutfit = {
    id: 'chef-outfit',
    name: 'Chef Outfit',
    category: 'costume',
    avatarMode: 'FULL_BODY',
    animations: ['idle', 'walk', 'attack', 'hurt', 'celebrate'],
    defaultAnimation: 'idle',
    accessoryVisibility: {
      eyewear: true,
      headwear: true,
      effects: true
    },
    layerOrder: ['avatar-body', 'costume-base', 'avatar-head', 'costume-overlay', 'earned-accessories'],
    recommendedFor: ['creative', 'puzzle'],
    description: 'Master chef ready to cook',
    avatarPosition: { x: 0.5, y: 0.5 },
    avatarScale: 1.0,
    props: [
      { id: 'spatula', anchor: 'rightArm', offset: { x: 5, y: 15 } }
    ],
    contextEffects: {},

    renderCostumeUnder: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;

      // Chef jacket
      ctx.fillStyle = '#fff';
      roundRect(ctx, cx - 22 * scale, y + 64 * scale, 44 * scale, 50 * scale, 4 * scale);
      ctx.fill();

      // Double-breasted buttons
      ctx.fillStyle = '#ddd';
      for (var row = 0; row < 2; row++) {
        for (var col = 0; col < 3; col++) {
          ctx.beginPath();
          ctx.arc(cx + (row * 12 - 6) * scale, y + (75 + col * 12) * scale, 2 * scale, 0, Math.PI * 2);
          ctx.fill();
        }
      }

      // Apron
      ctx.fillStyle = '#f5f5f5';
      ctx.beginPath();
      ctx.moveTo(cx - 18 * scale, y + 90 * scale);
      ctx.lineTo(cx - 20 * scale, y + 155 * scale);
      ctx.lineTo(cx + 20 * scale, y + 155 * scale);
      ctx.lineTo(cx + 18 * scale, y + 90 * scale);
      ctx.closePath();
      ctx.fill();

      // Apron strings
      ctx.strokeStyle = '#ddd';
      ctx.lineWidth = 2 * scale;
      ctx.beginPath();
      ctx.moveTo(cx - 18 * scale, y + 90 * scale);
      ctx.lineTo(cx - 25 * scale, y + 95 * scale);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(cx + 18 * scale, y + 90 * scale);
      ctx.lineTo(cx + 25 * scale, y + 95 * scale);
      ctx.stroke();

      // Apron pocket
      ctx.fillStyle = '#eee';
      roundRect(ctx, cx - 10 * scale, y + 115 * scale, 20 * scale, 15 * scale, 2 * scale);
      ctx.fill();

      // Pants
      ctx.fillStyle = '#2c3e50';
      roundRect(ctx, cx - 16 * scale, y + 112 * scale, 32 * scale, 42 * scale, 3 * scale);
      ctx.fill();

      // Shoes
      ctx.fillStyle = '#1a1a1a';
      roundRect(ctx, cx - 18 * scale, y + 150 * scale, 14 * scale, 10 * scale, 2 * scale);
      ctx.fill();
      roundRect(ctx, cx + 4 * scale, y + 150 * scale, 14 * scale, 10 * scale, 2 * scale);
      ctx.fill();
    },

    renderCostumeOver: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;

      // Chef jacket sleeves
      ctx.fillStyle = '#fff';
      roundRect(ctx, cx - 30 * scale, y + 66 * scale, 12 * scale, 40 * scale, 3 * scale);
      ctx.fill();
      roundRect(ctx, cx + 18 * scale, y + 66 * scale, 12 * scale, 40 * scale, 3 * scale);
      ctx.fill();

      // Kitchen towel over shoulder
      ctx.fillStyle = '#e74c3c';
      ctx.beginPath();
      ctx.moveTo(cx + 20 * scale, y + 64 * scale);
      ctx.quadraticCurveTo(cx + 30 * scale, y + 70 * scale, cx + 25 * scale, y + 90 * scale);
      ctx.lineTo(cx + 20 * scale, y + 88 * scale);
      ctx.quadraticCurveTo(cx + 24 * scale, y + 72 * scale, cx + 18 * scale, y + 66 * scale);
      ctx.closePath();
      ctx.fill();

      // Towel stripes
      ctx.fillStyle = '#fff';
      ctx.fillRect(cx + 21 * scale, y + 72 * scale, 2 * scale, 14 * scale);
      ctx.fillRect(cx + 24 * scale, y + 74 * scale, 2 * scale, 12 * scale);

      // Chef hat
      ctx.fillStyle = '#fff';

      // Puffy top
      ctx.beginPath();
      ctx.arc(cx - 10 * scale, y - 25 * scale, 12 * scale, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.arc(cx + 10 * scale, y - 25 * scale, 12 * scale, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.arc(cx, y - 30 * scale, 14 * scale, 0, Math.PI * 2);
      ctx.fill();

      // Hat band
      roundRect(ctx, cx - 20 * scale, y - 12 * scale, 40 * scale, 20 * scale, 2 * scale);
      ctx.fill();

      // Hat band line
      ctx.fillStyle = '#ecf0f1';
      ctx.fillRect(cx - 20 * scale, y + 3 * scale, 40 * scale, 5 * scale);

      // Utensils in apron pocket
      ctx.fillStyle = '#888';
      ctx.fillRect(cx - 6 * scale, y + 110 * scale, 2 * scale, 12 * scale);
      ctx.fillRect(cx + 2 * scale, y + 112 * scale, 2 * scale, 10 * scale);

      // Spatula in hand
      var rightArm = getArmTransform(transforms, 'rightArm');
      ctx.save();
      ctx.translate(cx + 26 * scale, y + 108 * scale);
      ctx.rotate((rightArm.rotation || 0) * Math.PI / 180);

      // Handle
      ctx.fillStyle = '#5d4037';
      roundRect(ctx, -2 * scale, 0, 4 * scale, 18 * scale, 1 * scale);
      ctx.fill();

      // Spatula head
      ctx.fillStyle = '#888';
      roundRect(ctx, -6 * scale, -15 * scale, 12 * scale, 18 * scale, 2 * scale);
      ctx.fill();

      // Slots
      ctx.fillStyle = '#666';
      ctx.fillRect(cx - 4 * scale - cx - 26 * scale, -12 * scale, 8 * scale, 2 * scale);
      ctx.fillRect(cx - 4 * scale - cx - 26 * scale, -8 * scale, 8 * scale, 2 * scale);
      ctx.fillRect(cx - 4 * scale - cx - 26 * scale, -4 * scale, 8 * scale, 2 * scale);

      ctx.restore();
    }
  };

  // ============================================================================
  // COSTUME: COWBOY GEAR
  // ============================================================================

  var cowboyGear = {
    id: 'cowboy-gear',
    name: 'Cowboy Gear',
    category: 'costume',
    avatarMode: 'FULL_BODY',
    animations: ['idle', 'walk', 'attack', 'hurt', 'celebrate'],
    defaultAnimation: 'idle',
    accessoryVisibility: {
      eyewear: true,
      headwear: true,
      effects: true
    },
    layerOrder: ['avatar-body', 'costume-base', 'avatar-head', 'costume-overlay', 'earned-accessories'],
    recommendedFor: ['action', 'adventure'],
    description: 'Wild west cowboy',
    avatarPosition: { x: 0.5, y: 0.5 },
    avatarScale: 1.0,
    props: [
      { id: 'lasso', anchor: 'rightArm', offset: { x: 10, y: 0 } }
    ],
    contextEffects: {},

    renderCostumeUnder: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;
      var vestColor = '#8b4513';

      // Shirt
      ctx.fillStyle = '#c19a6b';
      roundRect(ctx, cx - 20 * scale, y + 64 * scale, 40 * scale, 45 * scale, 3 * scale);
      ctx.fill();

      // Shirt details (collar points)
      ctx.fillStyle = '#a08060';
      ctx.beginPath();
      ctx.moveTo(cx - 8 * scale, y + 62 * scale);
      ctx.lineTo(cx - 15 * scale, y + 75 * scale);
      ctx.lineTo(cx - 5 * scale, y + 70 * scale);
      ctx.closePath();
      ctx.fill();
      ctx.beginPath();
      ctx.moveTo(cx + 8 * scale, y + 62 * scale);
      ctx.lineTo(cx + 15 * scale, y + 75 * scale);
      ctx.lineTo(cx + 5 * scale, y + 70 * scale);
      ctx.closePath();
      ctx.fill();

      // Vest
      ctx.fillStyle = vestColor;
      ctx.beginPath();
      ctx.moveTo(cx - 20 * scale, y + 65 * scale);
      ctx.lineTo(cx - 22 * scale, y + 108 * scale);
      ctx.lineTo(cx - 8 * scale, y + 108 * scale);
      ctx.lineTo(cx - 8 * scale, y + 75 * scale);
      ctx.lineTo(cx - 12 * scale, y + 65 * scale);
      ctx.closePath();
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(cx + 20 * scale, y + 65 * scale);
      ctx.lineTo(cx + 22 * scale, y + 108 * scale);
      ctx.lineTo(cx + 8 * scale, y + 108 * scale);
      ctx.lineTo(cx + 8 * scale, y + 75 * scale);
      ctx.lineTo(cx + 12 * scale, y + 65 * scale);
      ctx.closePath();
      ctx.fill();

      // Belt
      ctx.fillStyle = '#3d2314';
      ctx.fillRect(cx - 20 * scale, y + 105 * scale, 40 * scale, 8 * scale);

      // Belt buckle (large oval)
      ctx.fillStyle = '#ffd700';
      ctx.beginPath();
      ctx.ellipse(cx, y + 109 * scale, 8 * scale, 5 * scale, 0, 0, Math.PI * 2);
      ctx.fill();
      ctx.fillStyle = '#b8860b';
      ctx.beginPath();
      ctx.ellipse(cx, y + 109 * scale, 5 * scale, 3 * scale, 0, 0, Math.PI * 2);
      ctx.fill();

      // Jeans
      ctx.fillStyle = '#4a6fa5';
      roundRect(ctx, cx - 16 * scale, y + 112 * scale, 32 * scale, 42 * scale, 3 * scale);
      ctx.fill();

      // Jean seams
      ctx.strokeStyle = '#3d5a80';
      ctx.lineWidth = 1 * scale;
      ctx.beginPath();
      ctx.moveTo(cx - 10 * scale, y + 115 * scale);
      ctx.lineTo(cx - 10 * scale, y + 152 * scale);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(cx + 10 * scale, y + 115 * scale);
      ctx.lineTo(cx + 10 * scale, y + 152 * scale);
      ctx.stroke();

      // Cowboy boots
      ctx.fillStyle = '#5d4037';
      ctx.beginPath();
      ctx.moveTo(cx - 18 * scale, y + 150 * scale);
      ctx.lineTo(cx - 20 * scale, y + 160 * scale);
      ctx.lineTo(cx - 4 * scale, y + 160 * scale);
      ctx.lineTo(cx - 4 * scale, y + 150 * scale);
      ctx.closePath();
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(cx + 4 * scale, y + 150 * scale);
      ctx.lineTo(cx + 4 * scale, y + 160 * scale);
      ctx.lineTo(cx + 20 * scale, y + 160 * scale);
      ctx.lineTo(cx + 18 * scale, y + 150 * scale);
      ctx.closePath();
      ctx.fill();

      // Boot heel
      ctx.fillStyle = '#3d2314';
      ctx.fillRect(cx - 18 * scale, y + 158 * scale, 4 * scale, 4 * scale);
      ctx.fillRect(cx + 14 * scale, y + 158 * scale, 4 * scale, 4 * scale);

      // Boot top decoration
      ctx.fillStyle = '#8b7355';
      ctx.fillRect(cx - 17 * scale, y + 150 * scale, 12 * scale, 3 * scale);
      ctx.fillRect(cx + 5 * scale, y + 150 * scale, 12 * scale, 3 * scale);

      // Spurs
      ctx.fillStyle = '#c0c0c0';
      ctx.beginPath();
      ctx.arc(cx - 19 * scale, y + 158 * scale, 2 * scale, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.arc(cx + 19 * scale, y + 158 * scale, 2 * scale, 0, Math.PI * 2);
      ctx.fill();
    },

    renderCostumeOver: function(ctx, avatar, x, y, scale, transforms, time) {
      var cx = x + 32 * scale;

      // Shirt sleeves
      ctx.fillStyle = '#c19a6b';
      roundRect(ctx, cx - 28 * scale, y + 66 * scale, 10 * scale, 40 * scale, 3 * scale);
      ctx.fill();
      roundRect(ctx, cx + 18 * scale, y + 66 * scale, 10 * scale, 40 * scale, 3 * scale);
      ctx.fill();

      // Bandana around neck
      ctx.fillStyle = '#e74c3c';
      ctx.beginPath();
      ctx.moveTo(cx - 15 * scale, y + 58 * scale);
      ctx.quadraticCurveTo(cx, y + 65 * scale, cx + 15 * scale, y + 58 * scale);
      ctx.lineTo(cx + 12 * scale, y + 62 * scale);
      ctx.quadraticCurveTo(cx, y + 68 * scale, cx - 12 * scale, y + 62 * scale);
      ctx.closePath();
      ctx.fill();

      // Bandana knot
      ctx.beginPath();
      ctx.arc(cx, y + 68 * scale, 4 * scale, 0, Math.PI * 2);
      ctx.fill();

      // Bandana tails
      ctx.beginPath();
      ctx.moveTo(cx - 2 * scale, y + 72 * scale);
      ctx.quadraticCurveTo(cx - 5 * scale, y + 85 * scale, cx - 8 * scale + Math.sin(time * 2) * 2 * scale, y + 92 * scale);
      ctx.lineTo(cx - 5 * scale + Math.sin(time * 2) * 2 * scale, y + 90 * scale);
      ctx.quadraticCurveTo(cx - 3 * scale, y + 82 * scale, cx, y + 72 * scale);
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(cx + 2 * scale, y + 72 * scale);
      ctx.quadraticCurveTo(cx + 5 * scale, y + 85 * scale, cx + 8 * scale + Math.sin(time * 2 + 0.5) * 2 * scale, y + 92 * scale);
      ctx.lineTo(cx + 5 * scale + Math.sin(time * 2 + 0.5) * 2 * scale, y + 90 * scale);
      ctx.quadraticCurveTo(cx + 3 * scale, y + 82 * scale, cx, y + 72 * scale);
      ctx.fill();

      // Cowboy hat
      var hatColor = '#8b4513';

      // Brim
      ctx.fillStyle = hatColor;
      ctx.beginPath();
      ctx.ellipse(cx, y + 8 * scale, 32 * scale, 8 * scale, 0, 0, Math.PI * 2);
      ctx.fill();

      // Crown
      ctx.beginPath();
      ctx.moveTo(cx - 18 * scale, y + 6 * scale);
      ctx.quadraticCurveTo(cx - 20 * scale, y - 18 * scale, cx - 10 * scale, y - 22 * scale);
      ctx.quadraticCurveTo(cx, y - 16 * scale, cx + 10 * scale, y - 22 * scale);
      ctx.quadraticCurveTo(cx + 20 * scale, y - 18 * scale, cx + 18 * scale, y + 6 * scale);
      ctx.closePath();
      ctx.fill();

      // Hat band
      ctx.fillStyle = darken(hatColor, 0.3);
      ctx.fillRect(cx - 18 * scale, y + 1 * scale, 36 * scale, 5 * scale);

      // Hat band buckle
      ctx.fillStyle = '#ffd700';
      ctx.fillRect(cx - 4 * scale, y, 8 * scale, 7 * scale);

      // Lasso in hand
      var rightArm = getArmTransform(transforms, 'rightArm');
      ctx.save();
      ctx.translate(cx + 26 * scale, y + 108 * scale);
      ctx.rotate((rightArm.rotation || 0) * Math.PI / 180);

      // Coiled rope
      ctx.strokeStyle = '#c19a6b';
      ctx.lineWidth = 3 * scale;
      ctx.beginPath();
      for (var coil = 0; coil < 3; coil++) {
        ctx.arc(0, -5 * scale + coil * 6 * scale, 8 * scale, 0, Math.PI * 1.8);
      }
      ctx.stroke();

      // Rope end
      ctx.beginPath();
      ctx.moveTo(8 * scale, 10 * scale);
      ctx.lineTo(15 * scale, 20 * scale);
      ctx.stroke();

      ctx.restore();
    }
  };

  // ============================================================================
  // CONTEXTS ARRAY
  // ============================================================================

  var CONTEXTS = [
    knightArmor,
    spaceSuit,
    ninjaOutfit,
    wizardRobes,
    superheroCape,
    athleteUniform,
    pirateOutfit,
    scientistLabcoat,
    chefOutfit,
    cowboyGear
  ];

  // ============================================================================
  // PUBLIC API
  // ============================================================================

  window.CostumeContexts = {
    CONTEXTS: CONTEXTS,

    getById: function(id) {
      for (var i = 0; i < CONTEXTS.length; i++) {
        if (CONTEXTS[i].id === id) {
          return CONTEXTS[i];
        }
      }
      return null;
    },

    getAll: function() {
      return CONTEXTS.slice();
    },

    getRecommendedFor: function(gameType) {
      var recommended = [];
      for (var i = 0; i < CONTEXTS.length; i++) {
        if (CONTEXTS[i].recommendedFor && CONTEXTS[i].recommendedFor.indexOf(gameType) !== -1) {
          recommended.push(CONTEXTS[i]);
        }
      }
      return recommended;
    },

    isAccessoryVisible: function(costumeId, accessoryType) {
      var costume = this.getById(costumeId);
      if (!costume || !costume.accessoryVisibility) {
        return true;
      }
      return costume.accessoryVisibility[accessoryType] !== false;
    }
  };

})();