body { font-family: Arial; background: #f0f0f0; margin: 0; padding: 0; }
button { margin: 10px; padding: 10px 20px; font-size: 18px; }
#gameArea, #inventoryMenu, #shopMenu, #playerInventory, #customize { display: none; margin-top: 20px; }
#world { width: 100%; height: 400px; background: #b0e0e6; position: relative; margin-top: 20px; overflow: hidden; }
.target { width: 50px; height: 50px; border-radius: 50%; position: absolute; cursor: pointer; line-height: 50px; color: white; font-weight: bold; text-align: center; user-select: none; }
.target.gold { background: gold; color: black; }
.target.silver { background: silver; color: black; }
.target.regular { background: red; }
#characterPreview { width: 80px; position: fixed; top: 100px; right: 20px; }
.head { width: 60px; height: 60px; background: #ffcc99; border-radius: 50%; position: relative; margin: 0 auto; }
.eye { width: 10px; height: 10px; background: black; border-radius: 50%; position: absolute; top: 20px; }
.eye.left { left: 15px; }
.eye.right { right: 15px; }
.arm { width: 15px; height: 50px; background: #ffcc99; position: absolute; top: 60px; }
.arm.left { left: -15px; }
.arm.right { right: -15px; }
.shirt { width: 60px; height: 60px; position: absolute; top: 60px; left: 0; }
.pants { width: 60px; height: 50px; position: absolute; top: 120px; left: 0; }
.leg { width: 20px; height: 50px; background: black; position: absolute; top: 120px; }
.leg.left { left: 0; }
.leg.right { right: 0; }
.accessory-item { width: 15px; height: 15px; position: absolute; top: 0; right: -20px; border: 2px solid black; background: yellow; }
.character, .accessory { display: inline-block; margin: 10px; cursor: pointer; padding: 5px; border: 2px solid #000; }
.selected { border-color: gold; }