.item-icon.slate { background: #e2e9ef; --item-dark: #617b93; --item-light: #a3b5c8; --item-edge: #4b647c; }
.item-icon.charcoal { background: #e3e2e6; --item-dark: #4c4d57; --item-light: #85858f; --item-edge: #31313a; }
.item-icon.jade { background: #d9ebdf; --item-dark: #32805e; --item-light: #77b490; --item-edge: #256247; }
.item-icon.mint { background: #dff0e9; --item-dark: #60a991; --item-light: #9bd3be; --item-edge: #427d6b; }
.item-icon.teal { background: #d7ecea; --item-dark: #30808a; --item-light: #79bdc0; --item-edge: #245f69; }
.item-icon.sky { background: #e0eef7; --item-dark: #5692c1; --item-light: #9cc5e6; --item-edge: #3a6c95; }
.item-icon.sapphire { background: #dfe7fa; --item-dark: #405eaa; --item-light: #8197dc; --item-edge: #304681; }
.item-icon.plum { background: #efe1ed; --item-dark: #8e507d; --item-light: #c587b3; --item-edge: #6e3a61; }
.item-icon.rose { background: #f6e5ee; --item-dark: #b96191; --item-light: #e9a3c5; --item-edge: #9b4978; }
.item-icon.crimson { background: #f6e1e1; --item-dark: #ae4554; --item-light: #df8286; --item-edge: #893341; }
.item-icon.coral { background: #fae6de; --item-dark: #d16b57; --item-light: #f0a28c; --item-edge: #a9513e; }
.item-icon.amber { background: #faecd6; --item-dark: #c37b29; --item-light: #efb75e; --item-edge: #975817; }
.item-icon.sand { background: #f1e8db; --item-dark: #997c63; --item-light: #ceb297; --item-edge: #725c4b; }

.item-icon .swatch { width: 19px; height: 19px; border-radius: 50%; background: linear-gradient(135deg, var(--item-light) 45%, var(--item-dark) 45% 81%, var(--item-edge) 81%); }
.item-icon .swatch::after { display: none; }
.item-icon .stone { clip-path: polygon(0 72%, 12% 37%, 39% 17%, 75% 14%, 95% 39%, 100% 77%, 81% 94%, 19% 93%); }
.item-icon .stone::after { background: var(--item-light); clip-path: polygon(12% 37%, 39% 17%, 75% 14%, 95% 39%, 59% 55%, 17% 59%); }
.item-icon .gem { clip-path: polygon(0 34%, 23% 9%, 77% 9%, 100% 34%, 50% 97%); }
.item-icon .gem::after { background: var(--item-light); clip-path: polygon(0 34%, 23% 9%, 77% 9%, 100% 34%, 69% 34%, 50% 88%, 32% 34%); }
.item-icon .crystal { clip-path: polygon(10% 70%, 18% 44%, 35% 53%, 47% 13%, 65% 1%, 87% 23%, 93% 59%, 76% 89%, 52% 98%, 27% 91%); }
.item-icon .crystal::after { background: var(--item-light); clip-path: polygon(35% 53%, 47% 13%, 65% 1%, 65% 31%, 52% 98%, 46% 61%, 27% 91%, 18% 44%); }
.item-icon .leaf { clip-path: polygon(0 94%, 23% 68%, 17% 45%, 35% 22%, 67% 10%, 97% 9%, 93% 42%, 81% 68%, 56% 83%, 31% 77%, 6% 99%); }
.item-icon .leaf::after { background: var(--item-light); clip-path: polygon(21% 68%, 35% 22%, 97% 9%, 63% 43%, 44% 54%, 51% 75%, 42% 78%, 36% 59%); }
.item-icon .mushroom { clip-path: polygon(2% 52%, 9% 29%, 25% 13%, 46% 8%, 68% 13%, 90% 32%, 98% 52%, 89% 62%, 65% 65%, 67% 88%, 58% 97%, 42% 97%, 33% 88%, 36% 65%, 12% 61%); }
.item-icon .mushroom::after { background: var(--item-light); clip-path: polygon(2% 52%, 9% 29%, 25% 13%, 46% 8%, 68% 13%, 90% 32%, 98% 52%, 59% 46%); }
.item-icon .berry { background: radial-gradient(circle at 25% 55%, var(--item-light) 0 8%, var(--item-dark) 9% 24%, transparent 25%), radial-gradient(circle at 73% 56%, var(--item-light) 0 8%, var(--item-dark) 9% 24%, transparent 25%), radial-gradient(circle at 49% 79%, var(--item-light) 0 6%, var(--item-edge) 7% 22%, transparent 23%); }
.item-icon .berry::after { background: var(--item-dark); clip-path: polygon(46% 34%, 29% 11%, 50% 13%, 57% 26%, 65% 9%, 83% 10%, 64% 35%); }
.item-icon .shell { clip-path: polygon(15% 23%, 31% 14%, 49% 10%, 72% 15%, 90% 29%, 98% 50%, 92% 66%, 68% 87%, 64% 97%, 39% 97%, 34% 88%, 9% 65%, 3% 48%); background: repeating-conic-gradient(from -100deg at 50% 89%, var(--item-dark) 0deg 10deg, var(--item-light) 10deg 20deg); }
.item-icon .shell::after { display: none; }
.item-icon .feather { clip-path: polygon(6% 97%, 27% 65%, 24% 53%, 39% 24%, 65% 6%, 94% 2%, 92% 22%, 80% 47%, 67% 57%, 56% 60%, 63% 65%, 46% 76%, 35% 75%, 14% 99%); }
.item-icon .feather::after { background: var(--item-light); clip-path: polygon(29% 68%, 39% 24%, 65% 6%, 94% 2%, 64% 27%, 45% 51%); }
.item-icon .bone { clip-path: polygon(0 47%, 6% 35%, 17% 32%, 24% 42%, 68% 42%, 74% 30%, 86% 28%, 96% 37%, 94% 49%, 100% 61%, 94% 71%, 82% 74%, 73% 64%, 25% 64%, 16% 77%, 5% 76%, 0 67%, 5% 55%); transform: rotate(-27deg); }
.item-icon .bone::after { background: var(--item-light); clip-path: polygon(0 47%, 6% 35%, 17% 32%, 24% 42%, 68% 42%, 74% 30%, 86% 28%, 96% 37%, 79% 52%, 14% 54%); }
.item-icon .log { clip-path: polygon(2% 54%, 21% 34%, 77% 16%, 91% 22%, 100% 39%, 96% 55%, 82% 67%, 29% 90%, 12% 86%, 3% 72%); }
.item-icon .log::after { background: radial-gradient(ellipse at 19% 71%, var(--item-light) 0 14%, var(--item-edge) 15% 19%, var(--item-light) 20% 26%, transparent 27%); }
.item-icon .spool { clip-path: polygon(17% 11%, 83% 11%, 90% 26%, 78% 37%, 78% 64%, 91% 75%, 83% 91%, 17% 91%, 8% 75%, 22% 64%, 22% 37%, 9% 25%); background: repeating-linear-gradient(0deg, var(--item-dark) 0 3px, var(--item-light) 3px 5px); }
.item-icon .spool::after { background: var(--item-edge); clip-path: polygon(9% 25%, 17% 11%, 83% 11%, 90% 26%, 78% 37%, 22% 37%); }
.item-icon .rope { width: 19px; height: 17px; border: 4px solid var(--item-dark); border-radius: 52% 48% 48% 52%; position: relative; background: transparent; transform: rotate(-19deg); }
.item-icon .rope::after { position: absolute; inset: -3px auto auto 3px; width: 5px; height: 18px; transform: rotate(-33deg); border-radius: 4px; background: var(--item-light); }
.item-icon .pickaxe { clip-path: polygon(0 36%, 12% 18%, 36% 8%, 62% 8%, 86% 24%, 100% 48%, 89% 49%, 69% 32%, 57% 29%, 32% 100%, 19% 94%, 44% 26%, 24% 27%, 10% 37%); }
.item-icon .pickaxe::after { background: var(--item-light); clip-path: polygon(0 36%, 12% 18%, 36% 8%, 62% 8%, 86% 24%, 100% 48%, 89% 49%, 69% 32%, 44% 26%, 24% 27%, 10% 37%); }
.item-icon .scythe { clip-path: polygon(85% 6%, 96% 12%, 67% 99%, 53% 95%, 76% 31%, 58% 27%, 37% 31%, 20% 43%, 4% 64%, 10% 41%, 26% 25%, 49% 15%, 82% 16%); }
.item-icon .scythe::after { background: var(--item-light); clip-path: polygon(76% 31%, 58% 27%, 37% 31%, 20% 43%, 4% 64%, 10% 41%, 26% 25%, 49% 15%, 82% 16%); }
.item-icon .axe { clip-path: polygon(7% 5%, 26% 10%, 45% 20%, 67% 24%, 83% 33%, 76% 45%, 61% 40%, 43% 98%, 29% 94%, 46% 37%, 23% 40%, 8% 50%, 1% 29%); }
.item-icon .axe::after { background: var(--item-light); clip-path: polygon(7% 5%, 26% 10%, 45% 20%, 62% 25%, 56% 42%, 39% 40%, 23% 40%, 8% 50%, 1% 29%); }
.item-icon .hammer { clip-path: polygon(12% 7%, 57% 7%, 66% 16%, 90% 16%, 96% 41%, 70% 48%, 56% 41%, 42% 99%, 28% 95%, 41% 39%, 11% 37%); }
.item-icon .hammer::after { background: var(--item-light); clip-path: polygon(12% 7%, 57% 7%, 66% 16%, 90% 16%, 96% 32%, 11% 26%); }
.item-icon .shovel { clip-path: polygon(71% 3%, 85% 1%, 98% 13%, 97% 29%, 87% 39%, 77% 37%, 55% 62%, 61% 74%, 47% 91%, 19% 99%, 4% 94%, 5% 76%, 16% 58%, 31% 51%, 44% 56%, 70% 29%, 66% 19%); }
.item-icon .shovel::after { background: var(--item-light); clip-path: polygon(5% 76%, 16% 58%, 31% 51%, 44% 56%, 37% 76%, 4% 94%); }
.item-icon .potion { clip-path: polygon(31% 5%, 69% 5%, 69% 22%, 60% 24%, 61% 42%, 82% 58%, 89% 76%, 77% 94%, 24% 94%, 11% 78%, 16% 59%, 38% 42%, 39% 24%, 31% 22%); }
.item-icon .potion::after { background: var(--item-light); clip-path: polygon(16% 59%, 46% 65%, 68% 54%, 82% 58%, 89% 76%, 77% 94%, 24% 94%, 11% 78%); }
.item-icon .pouch { clip-path: polygon(25% 4%, 74% 6%, 66% 27%, 62% 40%, 81% 53%, 93% 72%, 86% 88%, 73% 96%, 27% 96%, 13% 88%, 7% 71%, 19% 52%, 38% 39%, 33% 25%); }
.item-icon .pouch::after { background: var(--item-light); clip-path: polygon(25% 4%, 74% 6%, 66% 27%, 73% 34%, 60% 40%, 32% 37%, 26% 31%, 33% 25%); }
.item-icon .scroll { clip-path: polygon(15% 8%, 84% 8%, 94% 17%, 97% 32%, 86% 38%, 82% 32%, 80% 74%, 94% 74%, 94% 89%, 84% 97%, 14% 94%, 4% 86%, 5% 74%, 17% 72%, 20% 32%, 9% 30%, 6% 17%); }
.item-icon .scroll::after { background: var(--item-light); clip-path: polygon(24% 17%, 84% 17%, 77% 75%, 17% 75%); }
.item-icon .key { position: relative; background: transparent; transform: rotate(-35deg); }
.item-icon .key::before { content: ""; position: absolute; left: 0; top: 3px; width: 8px; height: 8px; border: 3px solid var(--item-dark); border-radius: 50%; }
.item-icon .key::after { position: absolute; left: 11px; top: 8px; width: 12px; height: 9px; clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 90%, 75% 52%, 52% 52%, 52% 100%, 27% 100%, 27% 52%, 0 52%); background: var(--item-edge); }
.item-icon .crate { clip-path: polygon(3% 22%, 47% 6%, 97% 25%, 97% 79%, 54% 97%, 3% 77%); }
.item-icon .crate::after { background: var(--item-light); clip-path: polygon(3% 22%, 47% 6%, 97% 25%, 53% 42%, 53% 48%, 87% 36%, 88% 43%, 54% 87%, 54% 77%, 72% 45%, 53% 51%, 13% 36%, 13% 30%, 53% 45%); }