diff --git a/src/game/scenes/BattleScene.ts b/src/game/scenes/BattleScene.ts
index c01704c..7c4e40f 100644
--- a/src/game/scenes/BattleScene.ts
+++ b/src/game/scenes/BattleScene.ts
@@ -24,7 +24,7 @@ const unitTexture: Record<string, string> = {
   'zhang-fei': 'unit-zhang-fei',
   'rebel-a': 'unit-rebel',
   'rebel-b': 'unit-rebel',
-  'rebel-c': 'unit-rebel-cavalry',
+  'rebel-c': 'unit-rebel-archer',
   'rebel-leader': 'unit-rebel-leader'
 };
 
@@ -244,7 +244,7 @@ export class BattleScene extends Phaser.Scene {
 
   private drawUnits() {
     firstBattleUnits.forEach((unit) => {
-      const sizeRatio = unit.faction === 'ally' ? 0.98 : 0.92;
+      const sizeRatio = unit.faction === 'ally' ? 1.08 : 1.02;
       const sprite = this.add.image(this.tileCenterX(unit.x), this.tileCenterY(unit.y), unitTexture[unit.id] ?? 'unit-rebel');
       sprite.setName(`unit-${unit.id}`);
       sprite.setDisplaySize(this.layout.tileSize * sizeRatio, this.layout.tileSize * sizeRatio);
@@ -252,12 +252,12 @@ export class BattleScene extends Phaser.Scene {
       sprite.setInteractive({ useHandCursor: unit.faction === 'ally' });
       sprite.on('pointerdown', () => this.selectUnit(unit));
 
-      const label = this.add.text(sprite.x, sprite.y + this.layout.tileSize * 0.36, unit.name, {
+      const label = this.add.text(sprite.x, sprite.y + this.layout.tileSize * 0.47, unit.name, {
         fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
-        fontSize: '13px',
+        fontSize: '11px',
         color: unit.faction === 'ally' ? '#e7edf7' : '#ffebe7',
-        backgroundColor: 'rgba(8,10,14,0.78)',
-        padding: { left: 5, right: 5, top: 2, bottom: 2 }
+        stroke: '#05070a',
+        strokeThickness: 3
       });
       label.setOrigin(0.5, 0);
       label.setDepth(7);
@@ -771,7 +771,7 @@ export class BattleScene extends Phaser.Scene {
       view.sprite.setAlpha(1);
       view.label.setAlpha(1);
       view.label.setColor(unit?.faction === 'ally' ? '#e7edf7' : '#ffebe7');
-      view.label.setBackgroundColor('rgba(8,10,14,0.78)');
+      view.label.setBackgroundColor('');
     });
   }
 
@@ -967,7 +967,7 @@ export class BattleScene extends Phaser.Scene {
     view.sprite.setTint(0xb7b7b7);
     view.label.setAlpha(0.55);
     view.label.setColor('#b9b9b9');
-    view.label.setBackgroundColor('rgba(20,20,20,0.66)');
+    view.label.setBackgroundColor('');
   }
 
   private renderBondPanel(message?: string) {
diff --git a/src/game/scenes/BootScene.ts b/src/game/scenes/BootScene.ts
index 11d47e9..5c6b126 100644
--- a/src/game/scenes/BootScene.ts
+++ b/src/game/scenes/BootScene.ts
@@ -15,13 +15,19 @@ type UnitPixelPalette = {
   robe: number;
   trim: number;
   shade: number;
+  highlight?: number;
   skin: number;
+  skinShade?: number;
   hair: number;
   weapon: number;
+  metal?: number;
   accent: number;
+  outline?: number;
+  boot?: number;
   beard?: boolean;
-  spear?: boolean;
-  halberd?: boolean;
+  beardStyle?: 'short' | 'long' | 'wild';
+  weaponKind?: 'dual' | 'sword' | 'spear' | 'glaive' | 'bow' | 'axe';
+  headgear?: 'topknot' | 'turban' | 'cap' | 'helmet';
   mounted?: boolean;
   cape?: boolean;
 };
@@ -69,211 +75,371 @@ export class BootScene extends Phaser.Scene {
       robe: palette.blue,
       trim: 0xe7edf7,
       shade: 0x1d3552,
+      highlight: 0x74a8df,
       skin: 0xf0c79a,
+      skinShade: 0xc9895f,
       hair: 0x1e1b17,
       weapon: 0xd8d0ba,
-      accent: 0xd8b15f
+      metal: 0xf0f4e9,
+      accent: 0xd8b15f,
+      outline: 0x10151b,
+      boot: 0x172033,
+      weaponKind: 'dual',
+      headgear: 'topknot'
     });
     this.createPixelUnitTexture('unit-guan-yu', {
       robe: 0x2f7d45,
       trim: 0xd7e6c5,
       shade: 0x1f5131,
+      highlight: 0x65b36d,
       skin: 0xd59b6e,
+      skinShade: 0xa86945,
       hair: 0x241611,
       weapon: 0xc7d2d8,
+      metal: 0xf0f5ee,
       accent: 0xb64232,
+      outline: 0x0d1410,
+      boot: 0x15130e,
       beard: true,
-      halberd: true
+      beardStyle: 'long',
+      weaponKind: 'glaive',
+      headgear: 'cap'
     });
     this.createPixelUnitTexture('unit-zhang-fei', {
       robe: 0x5b2b33,
       trim: 0xefc67c,
       shade: 0x351820,
+      highlight: 0x8a4552,
       skin: 0xb97955,
+      skinShade: 0x7d4937,
       hair: 0x16110f,
       weapon: 0xcfd8d8,
+      metal: 0xf1f5ed,
       accent: 0x15191f,
-      spear: true
+      outline: 0x0b0909,
+      boot: 0x141010,
+      beard: true,
+      beardStyle: 'wild',
+      weaponKind: 'spear',
+      headgear: 'topknot'
     });
     this.createPixelUnitTexture('unit-rebel', {
       robe: 0xc8a032,
       trim: 0x6e4f24,
       shade: 0x7b6221,
+      highlight: 0xf0cf5a,
       skin: 0xbc8053,
+      skinShade: 0x845237,
       hair: 0x242015,
       weapon: 0xbfc5bd,
+      metal: 0xe4e8d8,
       accent: 0xf1d157,
-      spear: true
+      outline: 0x17120c,
+      boot: 0x2d2115,
+      weaponKind: 'spear',
+      headgear: 'turban'
+    });
+    this.createPixelUnitTexture('unit-rebel-archer', {
+      robe: 0xd0aa3f,
+      trim: 0x754a28,
+      shade: 0x765a22,
+      highlight: 0xe4c565,
+      skin: 0xbc8053,
+      skinShade: 0x845237,
+      hair: 0x262017,
+      weapon: 0x8f5b31,
+      metal: 0xd8d7bf,
+      accent: 0xf1d157,
+      outline: 0x17120c,
+      boot: 0x2d2115,
+      weaponKind: 'bow',
+      headgear: 'turban'
     });
     this.createPixelUnitTexture('unit-rebel-cavalry', {
       robe: 0xd0aa3f,
       trim: 0x7a4b2a,
       shade: 0x7a6428,
+      highlight: 0xf0cf5a,
       skin: 0xbc8053,
+      skinShade: 0x845237,
       hair: 0x262017,
       weapon: 0xbfc5bd,
+      metal: 0xe4e8d8,
       accent: 0x56351f,
-      mounted: true
+      outline: 0x17120c,
+      boot: 0x2d2115,
+      mounted: true,
+      weaponKind: 'spear',
+      headgear: 'turban'
     });
     this.createPixelUnitTexture('unit-rebel-leader', {
       robe: 0x9e7130,
       trim: 0xf4d66f,
       shade: 0x60421f,
+      highlight: 0xd59b45,
       skin: 0xc98b5d,
+      skinShade: 0x8d5a3b,
       hair: 0x1e1710,
       weapon: 0xd4d7c6,
+      metal: 0xf1f1df,
       accent: 0xe4c43d,
-      halberd: true,
-      cape: true
+      outline: 0x120e0a,
+      boot: 0x1d1710,
+      weaponKind: 'axe',
+      headgear: 'helmet',
+      cape: true,
+      beard: true,
+      beardStyle: 'short'
     });
   }
 
   private createPixelUnitTexture(key: string, colors: UnitPixelPalette) {
     const graphics = this.make.graphics({ x: 0, y: 0 });
-    this.drawPixelShadow(graphics);
+    this.drawPixelShadow(graphics, colors);
 
     if (colors.mounted) {
       this.drawHorse(graphics, colors);
     }
 
     if (colors.cape) {
-      graphics.fillStyle(0x6c2722, 1);
-      graphics.fillRect(15, 19, 20, 18);
-      graphics.fillRect(12, 26, 7, 12);
-      graphics.fillStyle(0x3f1715, 1);
-      graphics.fillRect(13, 35, 17, 3);
+      this.drawCape(graphics, colors);
     }
 
-    this.drawWeapon(graphics, colors);
+    this.drawWeapon(graphics, colors, 'back');
     this.drawBody(graphics, colors);
     this.drawHead(graphics, colors);
+    this.drawWeapon(graphics, colors, 'front');
 
     graphics.generateTexture(key, 64, 64);
     graphics.destroy();
     this.textures.get(key).setFilter(Phaser.Textures.FilterMode.NEAREST);
   }
 
-  private drawPixelShadow(graphics: Phaser.GameObjects.Graphics) {
-    graphics.fillStyle(0x07090c, 0.45);
-    graphics.fillRect(12, 56, 40, 4);
-    graphics.fillRect(18, 53, 30, 3);
+  private px(graphics: Phaser.GameObjects.Graphics, color: number, x: number, y: number, width: number, height: number, alpha = 1) {
+    graphics.fillStyle(color, alpha);
+    graphics.fillRect(x, y, width, height);
+  }
+
+  private drawPixelShadow(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
+    const left = colors.mounted ? 7 : 15;
+    const width = colors.mounted ? 48 : 36;
+    this.px(graphics, 0x050609, left, 58, width, 3, 0.5);
+    this.px(graphics, 0x050609, left + 5, 56, width - 10, 2, 0.38);
+    this.px(graphics, 0x050609, left + 12, 54, width - 24, 2, 0.28);
   }
 
   private drawHorse(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
-    graphics.fillStyle(0x5b3824, 1);
-    graphics.fillRect(11, 39, 38, 10);
-    graphics.fillRect(8, 43, 8, 5);
-    graphics.fillRect(45, 35, 6, 9);
-    graphics.fillStyle(0x3a2418, 1);
-    graphics.fillRect(14, 48, 5, 10);
-    graphics.fillRect(25, 47, 5, 11);
-    graphics.fillRect(40, 47, 5, 11);
-    graphics.fillStyle(0x8c5a36, 1);
-    graphics.fillRect(16, 37, 24, 3);
-    graphics.fillRect(47, 37, 4, 3);
-    graphics.fillStyle(0x1f1510, 1);
-    graphics.fillRect(46, 32, 5, 4);
-    graphics.fillStyle(colors.accent, 1);
-    graphics.fillRect(22, 40, 14, 2);
-    graphics.fillRect(48, 35, 3, 2);
+    const outline = colors.outline ?? 0x15100d;
+    this.px(graphics, outline, 9, 38, 40, 13);
+    this.px(graphics, outline, 44, 30, 9, 13);
+    this.px(graphics, outline, 6, 43, 8, 6);
+    this.px(graphics, 0x5b3824, 11, 39, 36, 10);
+    this.px(graphics, 0x70472c, 13, 37, 25, 4);
+    this.px(graphics, 0x8c5a36, 17, 38, 19, 2);
+    this.px(graphics, 0x3a2418, 13, 49, 6, 9);
+    this.px(graphics, 0x3a2418, 25, 48, 5, 10);
+    this.px(graphics, 0x3a2418, 39, 48, 6, 10);
+    this.px(graphics, outline, 12, 57, 8, 2);
+    this.px(graphics, outline, 24, 57, 8, 2);
+    this.px(graphics, outline, 38, 57, 9, 2);
+    this.px(graphics, 0x6a4328, 45, 32, 7, 9);
+    this.px(graphics, 0x21150f, 46, 29, 5, 4);
+    this.px(graphics, 0x21150f, 49, 34, 4, 2);
+    this.px(graphics, colors.accent, 21, 41, 17, 3);
+    this.px(graphics, colors.trim, 24, 38, 10, 2);
+    this.px(graphics, 0xd6b05a, 47, 36, 4, 2);
+    this.px(graphics, 0x0b0b0b, 49, 32, 1, 1);
   }
 
-  private drawWeapon(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
-    graphics.fillStyle(colors.weapon, 1);
-    if (colors.spear) {
-      graphics.fillRect(49, 8, 3, 45);
-      graphics.fillRect(48, 5, 5, 4);
-      graphics.fillRect(46, 9, 9, 2);
-      graphics.fillStyle(0x7f8f8f, 1);
-      graphics.fillRect(50, 12, 1, 32);
+  private drawCape(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
+    const outline = colors.outline ?? 0x17100c;
+    this.px(graphics, outline, 16, 20, 22, 24);
+    this.px(graphics, outline, 13, 28, 9, 13);
+    this.px(graphics, 0x6c2722, 17, 21, 20, 21);
+    this.px(graphics, 0x8f392c, 18, 23, 8, 16);
+    this.px(graphics, 0x3f1715, 14, 35, 18, 4);
+    this.px(graphics, 0xc46146, 20, 24, 3, 12);
+  }
+
+  private drawWeapon(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette, layer: 'back' | 'front') {
+    const kind = colors.weaponKind ?? 'sword';
+    const metal = colors.metal ?? colors.weapon;
+    const outline = colors.outline ?? 0x101010;
+
+    if (layer === 'back' && kind === 'spear') {
+      this.px(graphics, outline, 50, 8, 4, 47);
+      this.px(graphics, colors.weapon, 51, 10, 2, 44);
+      this.px(graphics, outline, 48, 5, 7, 5);
+      this.px(graphics, metal, 49, 3, 5, 6);
+      this.px(graphics, metal, 46, 9, 10, 2);
+      this.px(graphics, 0xffffff, 50, 4, 2, 3, 0.55);
       return;
     }
 
-    if (colors.halberd) {
-      graphics.fillRect(49, 6, 3, 48);
-      graphics.fillRect(44, 8, 13, 3);
-      graphics.fillRect(51, 11, 8, 5);
-      graphics.fillRect(46, 16, 4, 4);
-      graphics.fillStyle(0x89999a, 1);
-      graphics.fillRect(50, 12, 1, 37);
+    if (layer === 'back' && kind === 'glaive') {
+      this.px(graphics, outline, 50, 5, 4, 50);
+      this.px(graphics, colors.weapon, 51, 8, 2, 46);
+      this.px(graphics, outline, 44, 6, 13, 5);
+      this.px(graphics, metal, 45, 5, 10, 5);
+      this.px(graphics, metal, 54, 9, 5, 5);
+      this.px(graphics, metal, 47, 12, 4, 6);
+      this.px(graphics, 0xffffff, 47, 6, 6, 1, 0.48);
       return;
     }
 
-    graphics.fillRect(50, 20, 3, 31);
-    graphics.fillRect(47, 19, 9, 3);
-    graphics.fillRect(51, 16, 3, 5);
+    if (layer === 'back' && kind === 'bow') {
+      this.px(graphics, outline, 15, 17, 3, 27);
+      this.px(graphics, outline, 18, 14, 3, 6);
+      this.px(graphics, outline, 18, 41, 3, 6);
+      this.px(graphics, colors.weapon, 17, 18, 2, 25);
+      this.px(graphics, colors.weapon, 19, 15, 2, 5);
+      this.px(graphics, colors.weapon, 19, 41, 2, 5);
+      this.px(graphics, metal, 22, 19, 1, 24, 0.8);
+      this.px(graphics, metal, 11, 32, 12, 1);
+      this.px(graphics, metal, 11, 30, 3, 5);
+      return;
+    }
+
+    if (layer === 'back' && kind === 'axe') {
+      this.px(graphics, outline, 50, 13, 4, 43);
+      this.px(graphics, colors.weapon, 51, 15, 2, 40);
+      this.px(graphics, outline, 43, 11, 16, 9);
+      this.px(graphics, metal, 44, 10, 9, 8);
+      this.px(graphics, metal, 52, 13, 7, 6);
+      this.px(graphics, 0xffffff, 45, 11, 5, 1, 0.5);
+      return;
+    }
+
+    if (layer === 'front' && kind === 'dual') {
+      this.px(graphics, outline, 46, 26, 3, 20);
+      this.px(graphics, metal, 47, 22, 2, 20);
+      this.px(graphics, metal, 49, 20, 3, 4);
+      this.px(graphics, colors.accent, 44, 39, 6, 2);
+      this.px(graphics, outline, 17, 31, 3, 17);
+      this.px(graphics, metal, 16, 28, 2, 18);
+      this.px(graphics, metal, 14, 27, 3, 4);
+      this.px(graphics, colors.accent, 16, 42, 6, 2);
+      return;
+    }
+
+    if (layer === 'front' && kind === 'sword') {
+      this.px(graphics, outline, 48, 22, 4, 28);
+      this.px(graphics, metal, 49, 18, 2, 29);
+      this.px(graphics, metal, 47, 20, 6, 3);
+      this.px(graphics, colors.accent, 46, 42, 7, 2);
+    }
   }
 
   private drawBody(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
-    graphics.fillStyle(colors.shade, 1);
-    graphics.fillRect(22, 27, 22, 24);
-    graphics.fillRect(18, 33, 8, 14);
-    graphics.fillRect(42, 33, 7, 14);
-    graphics.fillStyle(colors.robe, 1);
-    graphics.fillRect(23, 26, 20, 22);
-    graphics.fillRect(19, 32, 8, 13);
-    graphics.fillRect(42, 32, 7, 13);
-    graphics.fillRect(24, 48, 8, 8);
-    graphics.fillRect(35, 48, 8, 8);
+    const outline = colors.outline ?? 0x111318;
+    const highlight = colors.highlight ?? colors.robe;
+    const boot = colors.boot ?? 0x16120e;
+    const bodyY = colors.mounted ? 21 : 26;
+    const legY = colors.mounted ? 40 : 46;
 
-    graphics.fillStyle(colors.trim, 1);
-    graphics.fillRect(24, 27, 18, 2);
-    graphics.fillRect(25, 35, 16, 2);
-    graphics.fillRect(23, 45, 22, 2);
-    graphics.fillRect(29, 29, 3, 17);
-    graphics.fillRect(36, 29, 2, 17);
-    graphics.fillStyle(0xf8e6a8, 0.9);
-    graphics.fillRect(25, 30, 4, 2);
-    graphics.fillRect(39, 30, 3, 2);
-    graphics.fillRect(26, 39, 14, 2);
-    graphics.fillStyle(colors.accent, 1);
-    graphics.fillRect(30, 24, 8, 3);
-    graphics.fillRect(28, 37, 12, 2);
-    graphics.fillStyle(0x0a0c10, 1);
-    graphics.fillRect(24, 56, 9, 3);
-    graphics.fillRect(35, 56, 9, 3);
-    graphics.fillStyle(colors.skin, 1);
-    graphics.fillRect(17, 36, 4, 7);
-    graphics.fillRect(48, 36, 4, 7);
-    graphics.fillStyle(0x000000, 0.22);
-    graphics.fillRect(22, 50, 4, 5);
-    graphics.fillRect(39, 50, 4, 5);
+    this.px(graphics, outline, 23, legY, 10, 12);
+    this.px(graphics, outline, 35, legY - 2, 10, 14);
+    this.px(graphics, colors.shade, 25, legY, 7, 10);
+    this.px(graphics, colors.robe, 36, legY - 1, 7, 11);
+    this.px(graphics, boot, 22, legY + 10, 12, 4);
+    this.px(graphics, boot, 35, legY + 10, 12, 4);
+    this.px(graphics, 0xffffff, 27, legY + 1, 3, 1, 0.3);
+
+    this.px(graphics, outline, 21, bodyY + 2, 25, 23);
+    this.px(graphics, outline, 18, bodyY + 8, 8, 16);
+    this.px(graphics, outline, 42, bodyY + 6, 8, 16);
+    this.px(graphics, colors.shade, 23, bodyY + 4, 21, 21);
+    this.px(graphics, colors.robe, 24, bodyY + 3, 18, 20);
+    this.px(graphics, highlight, 26, bodyY + 5, 5, 15);
+    this.px(graphics, colors.shade, 37, bodyY + 5, 5, 17);
+    this.px(graphics, colors.robe, 19, bodyY + 9, 7, 13);
+    this.px(graphics, colors.robe, 42, bodyY + 8, 7, 12);
+    this.px(graphics, highlight, 20, bodyY + 10, 3, 9);
+
+    this.px(graphics, colors.trim, 24, bodyY + 4, 18, 2);
+    this.px(graphics, colors.trim, 25, bodyY + 12, 17, 2);
+    this.px(graphics, colors.trim, 23, bodyY + 20, 22, 2);
+    this.px(graphics, colors.trim, 29, bodyY + 6, 3, 16);
+    this.px(graphics, colors.accent, 31, bodyY, 8, 4);
+    this.px(graphics, colors.accent, 27, bodyY + 15, 14, 2);
+    this.px(graphics, 0xf8e6a8, 26, bodyY + 7, 4, 2, 0.8);
+    this.px(graphics, 0xf8e6a8, 38, bodyY + 7, 3, 2, 0.78);
+    this.px(graphics, 0xf8e6a8, 27, bodyY + 18, 13, 1, 0.55);
+
+    this.px(graphics, colors.skin, 17, bodyY + 15, 4, 6);
+    this.px(graphics, colors.skin, 48, bodyY + 13, 4, 6);
+    this.px(graphics, colors.skinShade ?? 0x9a6747, 18, bodyY + 20, 3, 2);
+    this.px(graphics, colors.skinShade ?? 0x9a6747, 49, bodyY + 18, 3, 2);
+
+    if (colors.weaponKind === 'bow') {
+      this.px(graphics, colors.accent, 39, bodyY + 14, 7, 3);
+      this.px(graphics, colors.metal ?? colors.weapon, 44, bodyY + 11, 9, 1);
+    }
   }
 
   private drawHead(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
-    graphics.fillStyle(colors.skin, 1);
-    graphics.fillRect(24, 11, 17, 15);
-    graphics.fillRect(21, 16, 4, 7);
-    graphics.fillRect(40, 16, 4, 7);
-    graphics.fillStyle(0xd79a70, 1);
-    graphics.fillRect(25, 24, 15, 2);
-    graphics.fillStyle(colors.hair, 1);
-    graphics.fillRect(23, 8, 20, 5);
-    graphics.fillRect(22, 12, 6, 10);
-    graphics.fillRect(39, 12, 5, 10);
-    graphics.fillRect(26, 6, 13, 3);
-    graphics.fillStyle(colors.accent, 1);
-    graphics.fillRect(25, 7, 14, 2);
-    graphics.fillRect(29, 4, 7, 3);
-    graphics.fillRect(30, 2, 5, 2);
+    const outline = colors.outline ?? 0x111318;
+    const skinShade = colors.skinShade ?? 0xb17450;
+    const headY = colors.mounted ? 7 : 10;
 
-    graphics.fillStyle(0x050609, 1);
-    graphics.fillRect(27, 17, 2, 1);
-    graphics.fillRect(36, 17, 2, 1);
-    graphics.fillRect(31, 22, 5, 1);
-    graphics.fillStyle(0xffffff, 0.55);
-    graphics.fillRect(29, 13, 5, 1);
-    graphics.fillRect(36, 13, 4, 1);
+    this.px(graphics, outline, 24, headY + 1, 18, 16);
+    this.px(graphics, outline, 21, headY + 6, 5, 7);
+    this.px(graphics, outline, 40, headY + 6, 5, 7);
+    this.px(graphics, colors.skin, 25, headY + 2, 16, 14);
+    this.px(graphics, colors.skin, 22, headY + 7, 4, 5);
+    this.px(graphics, colors.skin, 40, headY + 7, 4, 5);
+    this.px(graphics, skinShade, 34, headY + 9, 5, 5);
+    this.px(graphics, skinShade, 26, headY + 14, 14, 2);
+
+    if (colors.headgear === 'turban') {
+      this.px(graphics, colors.accent, 23, headY - 1, 20, 6);
+      this.px(graphics, colors.trim, 25, headY, 15, 2);
+      this.px(graphics, colors.accent, 31, headY - 4, 8, 4);
+      this.px(graphics, colors.shade, 40, headY + 1, 5, 5);
+    } else if (colors.headgear === 'helmet') {
+      this.px(graphics, outline, 23, headY - 2, 20, 8);
+      this.px(graphics, colors.trim, 25, headY - 3, 16, 6);
+      this.px(graphics, colors.accent, 29, headY - 7, 8, 5);
+      this.px(graphics, colors.metal ?? colors.trim, 26, headY + 3, 15, 2);
+    } else if (colors.headgear === 'cap') {
+      this.px(graphics, colors.hair, 23, headY - 1, 20, 6);
+      this.px(graphics, colors.accent, 25, headY - 2, 15, 3);
+      this.px(graphics, colors.accent, 30, headY - 5, 8, 4);
+    } else {
+      this.px(graphics, colors.hair, 23, headY - 2, 20, 6);
+      this.px(graphics, colors.hair, 22, headY + 2, 6, 9);
+      this.px(graphics, colors.hair, 39, headY + 2, 5, 9);
+      this.px(graphics, colors.accent, 26, headY - 4, 13, 3);
+      this.px(graphics, colors.accent, 29, headY - 7, 8, 4);
+      this.px(graphics, colors.hair, 31, headY - 9, 5, 3);
+    }
+
+    this.px(graphics, 0x050609, 27, headY + 8, 2, 1);
+    this.px(graphics, 0x050609, 36, headY + 8, 2, 1);
+    this.px(graphics, 0x3a1d18, 31, headY + 13, 5, 1);
+    this.px(graphics, 0xffffff, 29, headY + 4, 5, 1, 0.5);
+    this.px(graphics, 0xffffff, 36, headY + 4, 4, 1, 0.42);
 
     if (colors.beard) {
-      graphics.fillStyle(0x2a1712, 1);
-      graphics.fillRect(27, 24, 12, 8);
-      graphics.fillRect(29, 32, 8, 7);
-      graphics.fillStyle(0x160d0a, 1);
-      graphics.fillRect(31, 38, 5, 6);
-      graphics.fillStyle(0x4b281d, 1);
-      graphics.fillRect(28, 25, 3, 5);
-      graphics.fillRect(36, 25, 2, 6);
+      const beardY = headY + 15;
+      this.px(graphics, outline, 26, beardY - 1, 15, 8);
+      this.px(graphics, colors.hair, 27, beardY, 13, 7);
+      this.px(graphics, 0x4b281d, 28, beardY + 1, 3, 5);
+      this.px(graphics, 0x4b281d, 36, beardY + 1, 2, 5);
+
+      if (colors.beardStyle === 'long') {
+        this.px(graphics, outline, 28, beardY + 6, 11, 12);
+        this.px(graphics, colors.hair, 29, beardY + 6, 9, 11);
+        this.px(graphics, 0x160d0a, 31, beardY + 14, 5, 5);
+        this.px(graphics, 0x6a3a2a, 31, beardY + 7, 3, 9);
+      } else if (colors.beardStyle === 'wild') {
+        this.px(graphics, outline, 23, beardY + 2, 20, 10);
+        this.px(graphics, colors.hair, 24, beardY + 2, 18, 9);
+        this.px(graphics, outline, 27, beardY + 10, 13, 8);
+        this.px(graphics, colors.hair, 28, beardY + 10, 11, 7);
+        this.px(graphics, 0x4b281d, 26, beardY + 5, 4, 4);
+        this.px(graphics, 0x4b281d, 37, beardY + 5, 4, 4);
+      }
     }
   }
 }