.five-element-icon {
  position: relative;
  flex: none;
  width: 86px;
  height: 86px;

  .five-element-symbol { position: absolute; width: 68px; height: 68px; left: 9px; top: 5px; }
  .five-element-shape { position: absolute; box-shadow: inset 7px 6px 12px rgba(255,255,255,.42), 0 5px 8px rgba(94,72,137,.12); }
  .five-element-accent { position: absolute; }
  .five-element-eye { position: absolute; top: 42px; width: 5px; height: 7px; border-radius: 50%; background: #635044; }
  .five-element-eye-left { left: 22px; }
  .five-element-eye-right { left: 38px; }
  .five-element-smile { position: absolute; left: 28px; top: 49px; width: 10px; height: 7px; border: 2px solid #635044; border-top: 0; border-radius: 0 0 10px 10px; box-sizing: border-box; }
  .five-element-tag { position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; line-height: 28px; font-size: 20px; font-weight: 700; text-align: center; border: 2px solid #fff; border-radius: 50%; background: #fffdf8; box-shadow: 0 2px 5px rgba(92,72,131,.08); }
  .five-element-empty { display: block; color: #a99cbe; font-size: 44px; line-height: 86px; text-align: center; font-weight: 600; }
}

.five-element-water {
  .five-element-shape { left: 8px; top: 12px; width: 52px; height: 52px; border-radius: 70% 43% 66% 44%; transform: rotate(45deg); background: linear-gradient(145deg,#b0f5ff,#58d6ee 55%,#2ab8e0); }
  .five-element-accent { left: 16px; top: 24px; width: 10px; height: 17px; border-radius: 50%; transform: rotate(22deg); background: rgba(255,255,255,.35); }
  .five-element-eye { background: #3676ba; }
  .five-element-smile { border-color: #3676ba; }
}

.five-element-wood {
  .five-element-shape { left: 9px; top: 7px; width: 48px; height: 59px; border-radius: 85% 12% 75% 35%; transform: rotate(-16deg); background: linear-gradient(135deg,#c4f2b0,#7ed58a 50%,#42ae6c); }
  .five-element-accent { left: 31px; top: 12px; width: 2px; height: 28px; border-radius: 2px; transform: rotate(22deg); background: rgba(255,255,255,.55); }
  .five-element-eye { background: #3b7d51; }
  .five-element-smile { border-color: #3b7d51; }
}

.five-element-fire {
  .five-element-shape { left: 8px; top: 20px; width: 52px; height: 45px; border-radius: 42% 55% 52% 50%; background: linear-gradient(180deg,#ffb56f,#ff7858); }
  .five-element-shape::before { content: ''; position: absolute; left: 5px; top: -17px; width: 28px; height: 35px; border-radius: 85% 12% 70% 35%; transform: rotate(-17deg); background: linear-gradient(135deg,#ffca83,#ff9c62); }
  .five-element-shape::after { content: ''; position: absolute; right: 0; top: -9px; width: 21px; height: 28px; border-radius: 80% 15% 60% 30%; transform: rotate(20deg); background: #ffa56b; }
  .five-element-accent { left: 20px; top: 34px; width: 28px; height: 29px; border-radius: 75% 28% 55% 50%; background: #ffdc9a; }
  .five-element-eye { background: #a65a42; }
  .five-element-smile { border-color: #a65a42; }
}

.five-element-earth {
  .five-element-shape { left: 6px; top: 21px; width: 57px; height: 44px; border-radius: 30% 38% 24% 28%; transform: rotate(-7deg); background: linear-gradient(145deg,#e8c6a3,#c59064 60%,#b57b50); }
  .five-element-accent { left: 16px; top: 29px; width: 9px; height: 5px; border-radius: 50%; transform: rotate(-20deg); background: rgba(255,255,255,.4); }
  .five-element-eye { background: #805331; }
  .five-element-smile { border-color: #805331; }
}

.five-element-metal {
  .five-element-shape { left: 7px; top: 10px; width: 55px; height: 55px; border: 2px solid #e8ba4e; box-sizing: border-box; border-radius: 50%; background: linear-gradient(135deg,#fff0b6,#f7d36b 55%,#e9b743); }
  .five-element-accent { left: 14px; top: 17px; width: 41px; height: 41px; border: 2px solid rgba(255,255,239,.65); border-radius: 50%; box-sizing: border-box; }
  .five-element-eye { background: #aa7925; }
  .five-element-smile { border-color: #aa7925; }
}